共通属性

解説

次の属性はほとんどどの要素に対しても使うことができます。

lang="言語コード"

要素の中身や属性値の言語を指定します。日本語であれば「ja」、英語であれば「en」になります。指定しなかったときは不明な言語として扱われます。

次のようにhtml要素にlang="ja"を指定すれば、html要素の中身(つまりHTML文書全体)が日本語で書かれていることを表します。

<html lang="ja">
 …
</html>

特定の箇所だけ言語が変わる場合は、その範囲を表す要素にlang属性を設定します。例えば引用する文章が英語で書かれているなら、blockquote要素にlang="en"を指定します。

<blockquote lang="en">
  <p>quoted text in English</p>
</blockquote>

lang属性に対応したブラウザであれば、言語によってフォントを切り替えたり、引用符を言語に合わせて表示したりすることが可能になります。音声ブラウザであれば、言語ごとに音声エンジンを使い分けることができます。

dir="文字方向"
文字の表記方向を指定します。利用できる値は次のとおりです。
ltr
左から右へ(left-to-right)
rtl
右から左へ(right-to-left)

アラビア語やヘブライ語など右から左に記述する言語を使うときに、この属性を利用します。

id="ID"

特定の要素に固有の名前(識別子)をつけるための属性です。一つの文書中で複数の要素に同じ名前をつけることはできません。また、a要素やform要素のname属性で名前をつけるときは、id属性と同じ値を指定しなければなりません。id属性はHTML中で様々な役割を果たします。

id属性が設定された要素に対しリンクすることができます。

<p id="MYID">…</p>

と、p要素に名前をつけておけば、<a href="URI#MYID">とすることでHTML中のp要素をリンク先にすることができます。

また、id属性はスタイルシートのセレクタになります。上記のp要素であればCSSを使いp#MYID { color: red; }と指定し、デザインを変えることができます。

そのほか、スクリプトから特定の要素を参照する際などに利用されます。

class="クラス"

特定の要素に分類上の名前をつけるための属性です。id属性とは異なり、一つの文書中で複数の要素に同じクラスを設定することができます。また、スペースで区切って一つの要素に複数のクラスを設定できます。

class属性は主にスタイルシートのセレクタとして利用されます。

<p class="MYCLASS">…</p>

と、指定しておけば、CSSでp.MYCLASS { font-weight: bold; }とするなどして、デザインを変更することができます。

style="スタイルシート"
特定の要素にのみスタイルを設定するために使います。style属性を使うときはmeta要素でデフォルトのスタイルシート言語を指定しなければいけません。 
<p style="color: blue;">…</p>

とすれば、その部分のp要素だけのデザインを変えることができます。しかし、style属性を使いすぎるとCSSの一括指定というメリットが活かせなくなり、またHTML中にスタイル指定が混ざりHTMLコードが荒れる問題があるので、極力使わないようにしたほうが無難です。

XHTML 1.1ではstyle属性は非推奨とされています。

title="補足情報"

要素に補足説明をつけるための属性です。一般的な視覚系ブラウザであれば、マウスポインタを要素に重ねたときにtitle属性の内容がツールチップ文字列として表示されます。

例えば、小さな画像を大きな画像へリンクするためのアンカーにしたなら、

<a href="big.jpg" title="拡大した画像を表示します">
<img src="small.jpg" alt="代替テキスト">
</a>

として、説明をつけるなどの使い方が考えられます。

組み込みイベント

特定のイベントが発生したときに、スクリプトを実行するための属性です。これらの属性を使うときは、meta要素でスクリプト言語を指定する必要があります。組み込みイベント属性には次の18種類があります。

onload="スクリプト"
ユーザーエージェントがウィンドウやフレームの内容を全て読み込んだ後に実行されます。
onunload="スクリプト"
ユーザーエージェントが現在の文書をウィンドウやフレームから消去するときに実行されます。
onclick="スクリプト"
要素がクリックされたときに実行されます。
ondblclick="スクリプト"
要素がダブルクリックされたときに実行されます。
onmousedown="スクリプト"
要素の上でマウスのボタンが押されたときに実行されます。
onmouseup="スクリプト"
要素の上でマウスのボタンが放されたときに実行されます。
onmouseover="スクリプト"
要素の上にマウスポインタが移動したときに実行されます。
onmousemove="スクリプト"
要素の上でマウスポインタが動かされたときに実行されます。
onmouseout="スクリプト"
要素の外へマウスポインタが移動したときに実行されます。
onfocus="スクリプト"
マウスやタブなどで要素にフォーカスが移ったときに実行されます。
onblur="スクリプト"
マウスやタブなどで要素のフォーカスが失われたときに実行されます。
onkeypress="スクリプト"
要素の上でキーが押されて放されたときに実行されます。
onkeydown="スクリプト"
要素の上でキーが押されたときに実行されます。
onkeyup="スクリプト"
要素の上でキーが放されたときに実行されます。
onsubmit="スクリプト"
フォームが送信されたときに実行されます。
onreset="スクリプト"
フォームの内容がリセットされたときに実行されます。
onselect="スクリプト"
テキストボックス中の文字列が選択されたときに実行されます。
onchange="スクリプト"
テキストボックスやメニューリストの内容が変更された後、フォーカスを失ったときに実行されます。

注意点

id属性とclass属性の違い

id属性とclass属性の値はどちらもスタイルシートのセレクタとして利用されるため、両者の違いはid属性がHTML中で同じ値を2度使えないのに対し、class属性は同じ値を何度も使える点だけだと思われがちですが、id属性は固有の名前、class属性は分類名であり、性格を異にしています。

例えば、HTML文書中にプログラムのサンプルコードを載せることにします。この場合、それぞれのサンプルコードにはclass属性にsampleという分類名をつけ、id属性にはsample1、sample2、sample3などの固有の名前をつけます。

<pre class="sample" id="sample1"><code>
  一つ目のサンプル
</code></pre>
<pre class="sample" id="sample2"><code>
二つ目のサンプル
</code></pre>
<pre class="sample" id="sample3"><code>
三つ目のサンプル
</code></pre>

id属性が固有名詞でclass属性は一般名詞だと思っておけばよいでしょう。

もう一つid属性とclass属性で異なる点は、id属性が設定された要素はリンクの終点アンカーになることです。見出し(h1?h6要素)などにid属性を設定しておけば、後から文章中の特定の箇所へリンクすることができます。

class属性で見た目に関する名前をつけない

class属性はスタイルシートのセレクタになるため、class="red"やclass="big"など、見た目に関するクラス名をつけたくなります。

<p>操作を誤ると<em class="red">データが消失する</em>危険があります。</p>
.red { color: red; }

しかし、見た目に関するクラス名をつけると、後から「赤色ではなくて太字にしたい」と思ったときに困ってしまいます。

class属性には見た目ではなく意味に基づいた値を指定しましょう。上の例であれば「データが消失する→警告」と考え、class="warning"のようにします。

<p>操作を誤ると<em class="warning">データが消失する</em>危険があります。</p>

こうしておけば、CSSを使って後から「警告」の箇所のデザインをHTMLを編集しなくても変更できます。

Information