HTML の第一歩 — レッスン 8 — タグのユニバーサル属性

さまざまなタグにはそれぞれ独自の属性があることはすでに話しました。今度は、さまざまなタグにすべてに共通の属性もあることについて話しましょう。その中でも最も人気のあるものを見ていきましょう。

id 属性

id 属性はタグの一意の名前を示します。このような名前は繰り返してはいけません。jQuery や JavaScript を扱うときに問題を引き起こす可能性があるからです。id タグの使用例をいくつか挙げます。

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">こんにちは</li>
  <li id="item4">世界</li>
</ul>
...
<div id="header"></div>

id 属性は、各ブロック、メニュー、メニュー項目、その他のタグごとに個別に CSS 装飾スタイルを設定するために使用できます。また、id は JavaScript（jQuery）でも使用されます。

class 属性

class 属性はタグのクラスへの所属を示します。id と同様に、class はこのクラスのすべてのタグに対して同時にのみ CSS スタイルを設定するために使用できます。つまり、id が 1 つなのに対して、class は多くのタグに同じものを一度に設定できます。

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">こんにちは</li>
  <li class="item">世界</li>
</ul>

style 属性

style 属性は、タグに直接 CSS スタイルを書くためのものです。この属性の詳細には今は深入りしなくても構いません。CSS チュートリアルで詳しく説明します。今はある程度わかりやすい例だけを書きます。

...
<div style="width: 200px; height: 100px; background: #dddddd">
ブロック
</div>
...
<p style="font-size: 14px; color: #333333">
テキスト
</p>

最初の例は、幅 200 ピクセル、高さ 100 ピクセル、背景 #dddddd（灰色に近い）のブロックを出力します。2 番目の例は、フォントサイズ 14 ピクセル、色 #333333（黒に近いがそうではない）のテキストの段落です。

title 属性

ページ上の要素にマウスを合わせたときのポップアップヒントに使用されます。

...
<img src="./images/image.jpg" alt="photo" title="これは私です" />
...
<a href="html2.html" title="私のページ">リンク</a>
...
<h2 title="見出し">こんにちは、世界!</h2>

もちろん、他にもユニバーサル属性があります: accesskey、contenteditable、contextmenu、dir、hidden、lang、spellcheck、tabindex。多言語サイトの制作をするときに後でこれらに出会うと思います。今のところは主要なユニバーサル属性について知っていれば十分です。