SYNCER

SYNCER

id属性 - 要素のid

公開日:

id属性は、要素のidを設定するための属性です。スタイルシートのセレクタやJavaScriptで要素を取得するための値、ページ内リンクのアンカーなどになります。idはドキュメント全体で一意の文字列でなければいけません。

説明

id属性値に、id名を指定します。id名は、ドキュメント全体で重複してはいけません。また、空白文字(改行、タグなど)を含んではいけません。

HTML

<!-- idを付ける -->
<span id="foo">SYNCER</span>はウェブサイトです。

<!-- 重複してはいけない -->
<span id="foo">SYNCER</span>はウェブサイトです。
<span id="foo">ウサギ</span>は動物です。

idを持つ要素は、ページ内リンクのアンカーにできます。href属性に、先頭にハッシュ(#)を付けてidを指定します。

HTML

<!-- fooというidを持つ要素まで移動するリンク -->
<a href="#foo">1章に移動</a>

<!-- fooというidを持つ要素 -->
<h2 id="foo">1章</h2>

クラス名を付けた要素には、idセレクタを利用してスタイルシートを適用できます。

CSS

/* fooというidを持つ要素に適用 */
#foo {
	background-color: red ;
}

JavaScriptで要素を取得したい時にも、利用できます。

JavaScript

// fooというidを持つ要素を全て取得
var element = document.getElementById( "foo" ) ;

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】id属性 - 要素のid</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/id/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>id属性は、要素にidを付けるための属性です。</p>

<p><a href="#foo">1章に移動</a></p>

<h2 id="foo">1章</h2>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>

<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>

<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>
<p>ダミーテキスト。</p>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>