id属性

id属性は、要素に固有のIDを割り当てるグローバル属性。

固有のIDを割り当ることで、スタイルシートのセレクターとして使ったり、JavaScriptでDOM操作したりできる。

ブラウザ対応

構文

<element id="ID名">
ID名
文字列で指定。
この文字列にスペースを含めることはできない。

要点

  • 要素に固有のIDを割り当てる。
  • ID名にスペースは使えない。
  • 主に、スタイルシートのセレクターとして使用する。
  • JavaScriptでDOM操作するときにも便利だ。
  • 全てのHTML要素で使用できるグローバル属性である。

サンプルコード

<p id="sampleId">テキスト</p>

サンプル

HTMLソースコード

<p>
	<span id="sampleId-H">Ｈ</span>
	<span id="sampleId-T">Ｔ</span>
	<span id="sampleId-M">Ｍ</span>
	<span id="sampleId-L">Ｌ</span>
	<span id="sampleId-5">５</span>
</p>
<style scoped="scoped">
	span#sampleId-H {
		background-color: pink;
		font-size: 32px;
		border-radius: 6px;
		vertical-align: middle;
	}
	span#sampleId-T {
		background-color: blue;
		color: white;
		font-size: 48px;
		border-radius: 6px;
		vertical-align: bottom;
		position: relative;
		left: -20px;
	}
	span#sampleId-M {
		background-color: lightgreen;
		font-size: 64px;
		border-radius: 6px;
		vertical-align: middle;
		position: relative;
		left: -40px;
	}
	span#sampleId-L {
		background-color: red;
		color: white;
		font-size: 80px;
		border-radius: 6px;
		vertical-align: top;
		position: relative;
		left: -60px;
	}
	span#sampleId-5 {
		background-color: lightblue;
		font-size: 96px;
		border-radius: 6px;
		vertical-align: middle;
		position: relative;
		left: -80px;
	}
	span#sampleId-H,
	span#sampleId-T,
	span#sampleId-M,
	span#sampleId-L,
	span#sampleId-5 {
		display: inline-block;
		padding: 0 0.5em;
		opacity: 0.75;
	}
</style>

実際の表示

Ｈ Ｔ Ｍ Ｌ ５