id とは
- ここで説明する id とは次の語句からなる HTML 要素の属性です。
- identification
- 読み: アイデンティフィケーション
意味: 識別、身分証明
id 属性の概要
この属性は、HTML 要素に識別子を設定します。
識別子とは、単純に名前のことだと思っていただいても構いません。 ただし、id は識別子ということなので、要素群の中から特定の要素を識別するための名前なので、 1 つのドキュメント内に同じ識別子があってはいけません。
HTML の文書内で一意の値でなければならない識別子。つまり ( ID ) というわけです。
これにより、CSS や script から特定の要素の参照ができるようになります。
この属性はグローバル属性です。
サンプルコードと実行結果
ここでは、2つの p 要素を題材にしました。
それぞれの p 要素に識別子を設定し、CSS で文字の色を変更しています。
サンプルコード: CSS
<style>
#idP1, #idP2{
font-size: 30px;
font-weight: bold;
}
#idP1{
color: ##blue;
}
#idP2{
color: ##green;
}
</style>
- 02-05: #idP1, #idP2{ CSS } (識別子が idP1 と idP2 の要素にスタイル付けします。)
- 03: font-size (文字の大きさの設定です。)
- 04: font-weight (文字の太さの設定です。)
- 06-08: #idP1{ CSS } (識別子が idP1 の要素にスタイル付けします。)
- 07: color (文字の色の設定です。)
サンプルコード: HTML
<head>
<style>...</style>
</head>
<body>
<p id="idP1"> サンプルテキスト1 </p>
<p id="idP2"> サンプルテキスト2 </p>
</body>
- 02: style (CSS のコードを記述している部分です。)
- 05: p id="idP1" (識別子に "idP1" をもつ要素です。)
- 06: p id="idP2" (識別子に "idP2" をもつ要素です。)
サンプルテキスト1
サンプルテキスト2