HTMLタグに対し属性を加えることで、要素にプラスアルファの設定をすることができます。
属性はHTMLタグを更に機能的にしたり制御しやすくするために必要なものです。
目次
属性とは
属性とは要素の追加オプションである
属性の書き方
属性は常にname="value"の形式で記述します。
<!-- 無属性のdivタグ -->
<div>属性を持ってないよ〜</div>
<!-- 属性を持つdivタグ -->
<div class="">class属性が付いたよ〜</div>
<!-- 属性と属性値を持つdivタグ -->
<div class="sample">sampleという値を持つclass属性が付いたよ〜</div>グローバル属性
グローバル属性とはHTML要素すべてに共通して使える属性のことです。
グローバル属性だけでも約30種類あるので、今回は特に使用頻度が高いものに絞って紹介します。
class | 要素にクラス名を定義する。 クラス名によりHTML要素をグループ化することで、 CSSで共通するスタイルを割り当てたり、JavaScriptで要素にアクセスすることが出来る。製品レベルに作り込むHTML文書には9割以上の要素に classを割り当てることが一般的なので、最も登場頻度が高い属性となることが一般的。 |
id | 要素にid名を定義する。id名は1ページにひとつだけ存在するユニーク（一意）な要素を定義するために使用する。 |
style | 要素にインラインスタイルを定義する。 静的なスタイルの管理にはあまり使わないが、 JavaScriptで動的にスタイルを書き換えたりする際によく使用する。 |
<div class="container">
<h1 id="title">titleというid値を持ったタイトル</h1>
<p style="font-size: 16px;">インラインスタイルで文字サイズを16pxに指定した段落</p>
</div>
<div class="container">
...
</div>/* class="container"を指定した要素に共通して300pxの固定幅を指定する */
.container {
width: 300px;
}タグ固有の属性
特定のタグでのみ使用する固有の属性も存在します。
href | a（アンカー要素）に使用する固有の属性。 |
<!-- hrefはアンカー要素のリンク先を指定するaタグ固有の属性である -->
<a href="https://launcher-kit.com">リンクテキスト</a>属性の役割と目的
属性はなぜ必要なのか？
それはHTMLのルール上、属性でしか果たすことが出来ない役割や目的があるからです。
要素に名前を付ける
属性の役割でもっとも多いのは「要素を識別するための名前を付ける」ことです。
1ページにひとつのみ存在する固有の名前を付けたいときはid属性
名前付けをしたいが固有である必要は無い場合はclass属性JavaScriptによる高度な操作や今後の拡張性を見越してdata-*属性
などの属性を活用することになります。
HTMLにはdivやaなど様々なタグがありますが、これはタグの分類であり要素につける名前ではありません。
要素をグループ化する
属性は「要素をグループ化してコントロールする」シーンでも大いに活躍します。
グループ化の際にはclassを使うと良いでしょう。
class属性で要素をグループ化する目的は何なのか？
それは:lant-css:によるスタイルを使い回すためであることが多いです。
他にはJavaScriptで共通のclass属性を持っている要素を配列で取得しDOM操作をするシーンもあります。
HTMLで親子階層によるグループ化には:lang-el-div:タグを使用します。classによるグループ化はdivタグによるグループ化とは異なり、ページやサイトを横断してグループ化することが可能になります。
アクセシビリティを確保する
HTML文書のアクセシビリティを高め、あらゆるユーザーに正確に情報を伝えるためにも属性を用います。
タグの挙動をコントロールする
属性は要素の根幹となる動きを決定づけるものも数多くあります。
