とまどう属性

Webページを作成しはじめても、なかなか使い方を理解できない属性があります。ここでは、 特に id や class の使い方について説明します。

id="名前"

要素に対して名前をつけます。同一の Webページの中では、同じ名前を重複して使うことはできません。要素を特定したいときは、id を使います。id は、次の場合に利用します。

  1. スタイルシートのセレクタ(スタイルシートを適用する対象)
  2. ハイパーリンクテキストのアンカー(目標位置)
  3. スクリプトから特定要素を参照するための手段
  4. 宣言されたオブジェクト要素の名前

class="クラス名"

要素に対してクラス名をつけます。同一の Webページの中でも、複数の要素に対し同じ名前を重複して使えます。また、スペースで区切り1つの要素に対し、複数のクラス名を指定できます。id と一緒に指定することもできます。
複数の箇所で利用したい、スタイルシートのセレクタ(スタイルシートを適用する対象)として利用します。

id と class の記述例

<div id="id_name">
<div class="class_name1">
・・・・
</div>
<p id="id_name_p" class="class_name2">id と class 併記</p>
<p class="class_name2 class_name3">class 名を2つ併記</p>
</div>

name 属性

id 属性は、HTML4.0 で定められました。それより前は、name 属性でのみ要素を識別していました。 id 属性は、アンカー名として使われる時は、name 属性と同じ名前空間を共有します。ただし、name 属性は a、applet、form、frame、 iframe、img、と map 要素の場合 id 属性と同時に指定することができます。この場合、両方とも同一の属性値をとる必要があります。 スクリプトエンジンは、要素を識別する際に、name属性と id属性の双方が設定されている場合はname属性を優先します。
フォームのコントロール要素 input、 select、button、 textarea、や label 要素には、name 属性の方が、便利なようです。
name 属性と id 属性は、役割が混在していますが、name 属性は、XTHML1.0 で form と img 要素が、XHTML1.1 では、a と map 要素が廃止されました。

name と id の併記例

<h4><a name="heiki" id="heiki">併記</a></h4>

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > HTML > 属性 id class