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>