ywork2020.com

Title

要素に唯一無二の識別子を付ける

目次 (INDEX)

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

目次に戻る

関連のあるページ
参考になるサイト