HTML・CSS:グローバル属性とは

グローバル属性とは

グローバル属性とは、全ての要素に対して付与することのできる属性です。
※要素によっては効果を発揮しないものもあります。

accesskey属性とは

accesskey属性は、要素に対してショートカットキーを付けることが出来ます。
半角スペースで複数付けることが可能です。他のショートカットキーとのかねあいがあるので、複数指定された場合はかぶっていないものから選択します。

主な使い道としては<a>が便利だと思います。何故かというと指定したショートカットキーを押すとリンク先のページを自動で表示してくれるからです。↓

ちなみにですが、ブラウザによって一緒に押さなければいけないキーは異なります。↓

↑を踏まえたうえで実際にやってみてください。ショートカットに指定したのはUです。

<a href="https://111111monji.com/tumitobatusyoukai/" accesskey="U" target="_blank">いちもんじの代表作に飛ぶよ（U）</a>

これを仮にメニューに設定した場合、簡単にホームに飛ぶことが出来たりするわけですね。

autocapitalize属性とは

autocapitalize属性とは、<form>などの入力欄で入力した文字列の最初の文字を自動的に大文字化するか設定する属性になります。ただこの機能はスマホみたいに、何かを入力する際にキーボードが表示されるものに対応していますので、PCでの入力の際などにはあまり活躍しないかも知れません。

スマホ使っている人はやってみてください。ローマ字モードにすると反応すると思います。↓

全部小文字（off）↓

各文の先頭文字だけ大文字（sentences）↓

ちなみにいちもんじのiPhoneでは最初だけシフトが押された状態になりました。

各単語の最初の文字を大文字にする（words）↓

ちなみにいちもんじのiPhoneでは半角スペースを入れるたびに大文字になりました。

全部大文字（characters）↓

ちなみにいちもんじのiPhoneでは最初の文字だけ大文字になりました。

autofocus属性とは

このページを開いたときに、まずここにスクロールして飛んできたのではないでしょうか？これは上の入力フォーム要素にautofocus属性を付与しているからです。

<input name="q" autofocus />

autofocus属性を付与することによってその要素にフォーカスされるので、ページを開いたらまずその要素まで強制的にスクロールされることになります。なので複数の要素にこの属性を付けることはできません。一番最初（コードの上の方）に付けている属性にジャンプすることになります。

こうすることによって読み上げ機能を使っている目の不自由な方は混乱する元となる可能性があるので、この機能を使うのは極力控えたほうが良いかもしれません。

contenteditable属性とは

contenteditable属性とは、付与された要素が誰にでも編集出来てしまう属性です。例えばこれを見てください。

↑これは編集できないと思います。しかしこれはどうでしょう。編集しようとしてみてください。↓

編集出来てしまいますね。このcontenteditable属性を使うことによって誰でも編集が出来るようになるわけです。となると、例えばこのサイトはよくコードを載せていますが、見ている人がそのコードを基本にして部分部分を編集して使いたいよというときにリアルタイムで編集ができるというわけですね！これはすごい！！（…と言いつつ多分この属性をいちいち付与するのが面倒くさくて使わない）

<p contentEditable="true">なまむぎ　なまごめ　なまたまご</p>

dir属性とは

dir属性とは、テキストの表記方向を決める属性です。指定できる値は

この３つになります。
dir属性の使い方としては、基本的には使用する頻度も少ないと思われますが、アラビア語やヘブライ語などの右から読む言語に対して右から読みますよ～とか指定してあげるものになるので、使用方法としてはこんな感じ↓

日本語でこんにちはは「こんにちは。」アラビア語では「mrhban.」がこんにちは。

<p>日本語でこんにちはは「こんにちは。」アラビア語では「<span lang="ar" dir="rtl">mrhban.</span>」がこんにちは。</p>

この属性は基本的に初期値を持ちませんが、<bdi>タグの場合は初期値がautoに設定されます。

draggable属性とは

draggable属性とは、指定された要素をドラッグ可能にするかどうかを決めます。この機能は主にテキスト・画像に適用されると思います。
ドラッグを可能にすると、コピペのようなことが簡単に出来るという利点があります。ブラウザを画面の半分ほどの大きさにしてデスクトップにドラッグアンドドロップすると画像が自動的に保存されるなどが可能になります。指定できるのは下の値２つです。

仮においてみました。↓この画像はドラッグ出来ると思います。

<img src="https://111111monji.com/wp-content/uploads/2023/07/fonto.jpg" draggable="true">

↓こっちはできないはず。

<img src="https://111111monji.com/wp-content/uploads/2023/07/fonto.jpg" draggable="false">

ちなみに何も設定していないとどうなるか試してみてください。↓

<img src="https://111111monji.com/wp-content/uploads/2023/07/fonto.jpg">

これやってみてびっくりしたんですけど、普通にドラッグできるんですね(笑)
だとすればドラッグできないようにする、という方がこの属性の本来の使い方なような気がします。

enterkeyhint属性とは

enterkeyhint属性とは、スマホなどの画面上にキーボードが表示される際に右下に表示されるエンターキーの部分をどう表示させるか指定できます。指定できる値はこうなっています。↓

↑ここでまとめたのは、自分のiPhoneでこのページを開いてみたときの動作です。試せるのであれば、お手持ちのスマホで見てみてください。入力フォームをタップして、ひらがな入力モードに切り替えです。

右下の表記を「改行」（enter）にする↓

右下の表記を「完了」（done）にする↓

右下の表記を「開く」（go）にする↓

右下の表記を「次へ」（next）にする↓

右下の表記を「改行」（previous）にする↓

右下の表記を「検索」（search）にする↓

右下の表記を「送信」（send）にする↓

hidden属性とは

hidden属性とは、ページを見ている人に指定された要素がページと無関係であると示すための属性です。例えば<input>などで何か情報を入力する際に、目には見えない情報を一緒に付けて送ることなどが可能になります（ただしHTMLのソース自体は誰でも見ることが出来るので、個人情報などをここに書くのは不向き。）
例えば会員情報などで、一意の数字を振りたいときなどに目に見えない入力フォームを作成して使用したりできます。また、javascriptを使って状況に応じて見せたり見せなかったりすることもできます。

指定できる値↓

until-foundは、例えば何かに該当したときだけ特定の文字を表示させるなど、そういうものに使用することも出来ます。

inert属性とは

inert属性とは、この属性を付与された要素、及びその子孫（divが親だったらそれらの中に入っている要素まで全部ってことですな）を不活性化する属性になっています。不活性化って何よ？って思いますね。私も思いました。調べました。

つまり動かさないようにするための属性ということですね。
こんな機能一体いつ使うの！？と思われます。これ、たまーにPCの操作をしていて何かしらやらかした時（？）とかソフトがフリーズしてしまったときに、表示されたダイアログ（選択肢みたいなもの）しか触れないことってたまにないですか？
それとか、画面開いた瞬間に画面に大きな広告が表示されて、小さな×ボタンを押さないと他のボタンなどが一切触れないときとか…。（この小さな×がスマホだとなかなか触れなくてイライラしますよね…(笑)）そんなときに、背景の要素などにすべてこの属性をかけておけば、×ボタン押すまで他の要素には触れさせないぞ！と…そういうことも実現可能だということですね。（別に使う機会無い気もするけど）

<div inert>
<button>aaa</button>
<input type="text" value="ここに入力できますか？"></p>
</div>

このように、不活性化（動かさないように）することが可能です。その際どこが不活性化したのか分かりやすくするために画面の背景をちょっと暗くしたり、ボタン自体をちょっと死んでます的な灰色にしてみたりすると見ている人には分かりやすいかもですね。

要素死んでますアピールするためのCSS

というわけで、一見して要素死んでます的な表現をするのには、要素自体の色を薄くするとか背景を灰色にするとか薄くするとかいろいろと方法がありますが、とにもかくにもこんな風にinert属性が設定されているであろう場所にCSSを適用させればいいと思います。

[inert] {
  何かしらの指定;
}

CSSを指定するときのこの[]は何の意味があったかな？って人はこちらの記事を確認してみて

CSS：CSSとは？ボックスの考え方・CSSの書き方、セレクタ・スタイル・プロパティ・値・スタイル項目・id・class・@ルール・属性セレクタ

CSS：CSSとは？ボックスの考え方・CSSの書き方、セレクタ・スタイル・プロパティ・値・スタイル項目・@ルール

111111monji.com

2023.10.25

例えば要素の透明度を薄くするというのが一番分かりやすい方法かもしれません。

<div inert id="otamesi">
<button>aaa</button>
<input type="text" value="ここに入力できますか？"></p>
</div>

#otamesi[inert] {
  opacity: 0.3;}

今回はここだけ例として使っているのでid（#が頭につくもの）を付与しましたが、普通に全部のinert属性使うならこうですね。↓

[inert] {
  opacity: 0.3;}

inputmode属性とは

inputmode属性とは、<input>要素で使われます。例えば電話番号を入力してほしいとき、私たちはテキストボックスを用意しますが、この時、テキストボックスに触れたときに仮想キーボードを使っている方やスマホユーザーの人には番号のみが使えるキーボードが表示されたら便利ですね。そういった際にこの属性を使用します。
ただ、この属性を使用するには<input>で正しい型を指定する必要があり、例えば電話番号を入力してほしいのであれば<input>の型はtelタイプとなりますが…。ただ、<input>でtelタイプを指定した段階ですでに番号だけのキーボードが表示されるようにはなっているんですよね…。
なので実質この属性って使うタイミングが少ないのではないか…？という思いです。

is属性とは

is属性とは、カスタマイズされた組み込み要素の名前を指定する属性です。って言ってもこれもまた分かりにくいですよね…。カスタマイズって元々の物をいじって機能を追加するイメージですがそのイメージのままで、グローバル要素なので全ての要素（使えないものもあります）に対して付けることが出来ます。例えばボタンを押したらアラートを出すなど、そういうことが可能になります（スクリプトを使用しますが）
ちなみにこのカスタマイズされた要素のことをカスタム要素と呼び、そのカスタム要素にも２パターンあるようです。

カスタム要素の種類

カスタム要素には２種類存在しますが、そのどちらとも既存の要素らとかぶってしまわないように「-（ハイフン）」を含めなければならないというルールがあります。

自律カスタム要素は上記で説明した通り、自分で作った要素のことです。一方カスタマイズドビルトイン要素は既にある要素（例えばpとかdivとか…）に自分で機能を追加した要素のことです。
どちらにせよこのカスタム要素にはJavascriptを使う必要が出てきます。

触るな危険！

<script>
   class KokonikurasumeiButton extends HTMLButtonElement {
      constructor() {
         super();
         // ここに拡張機能を記述する
         this.addEventListener('click', () => {
            alert('触るなって言ったのに…。');
         });
      }
   }
   customElements.define('kasutamu-button', KokonikurasumeiButton, { extends: 'button' });
</script>
<p><button is="kasutamu-button">触るな危険！</button></p>

<p is="word-count"></p>

こうしてみると同じ<p>タグでも、こちらはカスタムされたオリジナル要素“word-count”になっていることが分かります。

data-*属性とは

一言で言えば変数です。

• １文字の代表作は醍醐くんの飯活！
• 一文字の名前は一と一文字とichimonjiといちもんじ
• 今度の作品は動く絵本をテーマにしています
• 定めた内容を簡単に設定出来て便利
• １箇所変えると複数個所楽に変えられるのが良い

<ul>
  <li data-kokoziyuu="1">１文字の代表作は醍醐くんの飯活！</li>
  <li data-kokoziyuu="2">一文字の名前は一と一文字とichimonjiといちもんじ</li>
  <li data-kokoziyuu="0">今度の作品は動く絵本をテーマにしています</li>
  <li data-kokoziyuu="3">定めた内容を簡単に設定出来て便利</li>
  <li data-kokoziyuu="0">１箇所変えると複数個所楽に変えられるのが良い</li>
</ul>

CSS↓

li[data-kokoziyuu="0"] {
  background-color: #000;
 color:#fff;  
}

このような形で、data-　←これは固定なので、-の右から自由に名前を付けて使います。今回は分かり易い様にkokoziyuu（ここ自由）という名前を付けました。
そして普通にHTMLを書いていきます。=”1″などの書き方は何をしているかというと、kokoziyuuの中に半角数字の１を代入する（変数（kokoziyuu）と言う名の箱の中に半角の1を入れますよ）という意味です。
ただここでは例としてkokoziyuuが0の時の処理しか書いていない（CSSを見るとお分かりだと思います）ので、見た目上変化するのは0を指定されている

 <li data-kokoziyuu="0">今度の作品は動く絵本をテーマにしています</li>
 <li data-kokoziyuu="0">１箇所変えると複数個所楽に変えられるのが良い</li>

この２箇所の文章部分だけだと思います。

さて、これらが一体なぜ便利なのか説明しますと、例えば背景を黒くして文字を白くしたい場所が複数あったとしましょう。つまりdata-kokoziyuu=”0″を指定している要素がたくさん存在しているという状況です。そんな中デザインで試行錯誤していたあなたが「う～ん…この背景の色はもっと明るい色が良いんじゃないか…？」となったとしましょう。するとどうですか？このdata-kokoziyuu=”0″が指定されているところすべての編集をしなきゃならない…？（震え声）という不安がよぎりませんか？
そんなことないです。だって、

li[data-kokoziyuu="0"] {
  background-color: #000;
 color:#fff;  
}

この background-color: #000;の部分を明るい色に変更すれば、data-kokoziyuu=”0″が指定されている部分は全て明るい色に一瞬で様変わりしてくれます。

という感じで、処理が断然楽になるって意味でもこのdata属性は理解しておいた方が良さそうですね。

itemid属性とは

itemid属性とは、アイテムの固有でグローバルな識別の形でマイクロデータを提供します。…ってことだったのですが、正直全然まったく意味が分かりません。マイクロデータってまず何？ってところから調べてみました。

このようでした。まあつまりSEO対策に繋がって来るということでしょう。

まだ更新中…。