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

グローバル属性とは

accesskey要素に対してショートカットキーを付ける。半角スペースで複数付けられる。
autocapitalize<form>などの入力欄で入力した文字列の最初の文字を自動的に大文字化するか設定する。
autofocus付与した属性に対してフォーカス(勝手にスクロール)する
contenteditableこの属性が付与された要素に対して編集可能にする
dirテキストを左から読むか右から読むか指定(右からはアラビア語やヘブライ語などに使用)
draggableその要素をドラッグ可能にするかどうか指定(ドラッグ出来たらデスクトップなどにコピペできる)
画像やテキストは初期値でドラッグ可能なので、ドラッグ不可にする際に使う?
enterkeyhintスマートフォンなどの画面上に表示されるキーボードに対しエンターキーの表記を変える
hidden指定された要素がそのページと無関係であることを示す
inert指定された要素とその子孫要素すべてを機能しないようにする
例)アラートを出したときに他の操作を一切受け付けなくする
inputmode<input>要素で使用される。何か入力する際に表示するキーボードの種類を決めることが出来る
例えば電話番号を入力させたいテキストボックスなら番号のみのキーボードなど…主にスマホで活躍
is既存の要素(pとかdivとかいろいろ)にカスタム要素名を指定する・独自のカスタム要素を作成する
data-*オリジナル属性(独自に作成してOK)で、名前が文字列”data-“で始まって、ハイフンの後に少なくとも 1 文字が入るカスタム属性 例:data-ichimonji , data-kokohahenkoukanou ,
itemscope関連付けられたメタデータのスコープを定義
itemiditemscope属性・ itemtype属性を持つ要素に対し、マイクロデータにおける要素のグローバル識別子を指定
itemprop要素にプロパティを追加する
itemrefitemscope属性を持つ要素の子孫でないプロパティに対し、要素に関連付けることができる
itemtype itemprop (要素のプロパティ)を定義するのに使われる語彙の URL を指定
lang要素の中で使用する言語の種類を明示する
nonce暗号化ノンス (“number used once”) を定義する
popover要素をポップオーバー要素として示す
spellcheckスペルミスのチェックを行うかを定義する
styleHTMLのタグ(要素)に直接CSSを記述する
<style>タグもあるが、これはタグの内側にCSSを記述する。
例)<p style=”font-size:10pt”></p>
tabindextabを押したときに要素にフォーカスする
<input>
タグで作成したテキストボックスなどの入力フォームは、タブキーを押すと次々入力項目を進められるが、テキストなどにはその機能がない。そんなテキストなどにもフォーカス可能。
title要素の補足情報を示す
主な使用箇所→引用テキスト・画像・URLのリンク先情報など
translateページが翻訳される際その要素を翻訳対象にするかどうか指定

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

accesskey属性とは

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

※すべての要素に対して付けられるのですが、ブラウザによって動き方が異なりますし、要素によっては効果を発揮しないものもあります。

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

いちもんじの代表作に飛ぶよ(U)

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

Windows押すべきキーMac押すべきキー
Chrome/EdgeAlt+指定したキー
FirefoxAlt + Shift+指定したキー★Firefox 57 以降
●Firefox 14 以降
△Firefox 13 以前
★Control + Option + 指定したキー
●Control + Alt + key
△Control + key
Opera 15+Alt+指定したキーOpera 15+Control + Alt + key
Opera 12Shift + Esc で一覧を開き、+指定したキー

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

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

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

autocapitalize属性とは

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

off全部小文字
apple
none全部小文字
apple
on全部小文字
apple
sentences各文の先頭文字だけ大文字
Apple
Plane
words各単語の最初の文字を大文字にする
I Have A Pen
characters全部大文字
APPLE

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

全部小文字(off)↓

各文の先頭文字だけ大文字(sentences)↓

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

各単語の最初の文字を大文字にする(words)↓

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

全部大文字(characters)↓

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

autofocus属性とは

※ページを開いたらいきなりここに飛んできた方へ※
これはグローバル属性のautofocus属性を説明する項目です。このページのトップに戻りたい方はこちらからどうぞ。→このページの一番上

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

<input name="q" autofocus />

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

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

contenteditable属性とは

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

なまむぎ なまごめ なまたまご

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

なまむぎ なまごめ なまたまご

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

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

dir属性とは

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

  • 左から右へ→ltr
  • 右から左へ→rtl
  • 自動判断(正確ではないので非推奨)→auto

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

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

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

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

draggable属性とは

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

  • true
  • false

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

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

enterひらがな入力モードのキーボードの右下を「改行」にする
doneひらがな入力モードのキーボードの右下を「完了」にする
goひらがな入力モードのキーボードの右下を「開く」にする
nextひらがな入力モードのキーボードの右下を「次へ」にする
previousひらがな入力モードのキーボードの右下を「改行」にする
searchひらがな入力モードのキーボードの右下を「検索」にする
sendひらがな入力モードのキーボードの右下を「送信」にする

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

右下の表記を「改行」(enter)にする↓

右下の表記を「完了」(done)にする↓

右下の表記を「開く」(go)にする↓

右下の表記を「次へ」(next)にする↓

右下の表記を「改行」(previous)にする↓

右下の表記を「検索」(search)にする↓

右下の表記を「送信」(send)にする↓

hidden属性とは

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

指定できる値↓

・hidden → そのページに無関係であると示す
・until-found → ページ内検索などでユーザーがそれを見つけたときに表示させる

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

inert属性とは

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

不活性化とは…活性でない状態にすること、死滅した状態にすること、活動できない状態にすること

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

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

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

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

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

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

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

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

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

カスタム要素の種類

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

  • 自律カスタム要素…JavaScript を用いた自分だけのオリジナル要素
  • カスタマイズドビルトイン要素既存の要素に付け足して作成した要素

自律カスタム要素は上記で説明した通り、自分で作った要素のことです。一方カスタマイズドビルトイン要素は既にある要素(例えば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-*属性とは

一言で言えば変数です。

変数とは
中身を自由に入れ替えできる箱だと思っておいてもらえればOK

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

CSS↓

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

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

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

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

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

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

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

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

item属性

item属性には、itemid、itemprop、itemscope、itemtype、itemrefの5つが存在します。そもそもアイテムって何よ?って感じですよね。

アイテムとは、名前と値のペアのグループのこと
(後程また詳しく調べます)

itemscope属性とは

それぞれもちろん機能は違いますが、どのitem属性も、指定する為にはまずitemscope属性を付ける必要があります。というのも、このitemscope属性が、どこからどこまでをアイテムとするのかを指定するものだからです。
(更新中)

itemid属性とは

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

マイクロデータとは
ウェブ上を回っている検索エンジンさんはニンゲンの目とは違い、そのページが一体何を説明しているのか、表しているのか、画像が一体何を意味しているのか、などなど理解することが出来ません。なので、検索エンジンさんにだけ伝わる言語でお伝えするための情報です。

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

まだ更新中…。

タイトルとURLをコピーしました