HTML ID属性
HTMLid属性は、HTML要素の一意のIDを指定するために使用されます。
HTMLドキュメントに同じIDを持つ複数の要素を含めることはできません。
id属性の使用
id属性は、HTML要素の一意のIDを指定します。id属性の値は、HTMLドキュメント内で一意である必要があります。
id属性は、スタイルシート内の特定のスタイル宣言を指すために使用されます。また、JavaScriptが特定のIDを持つ要素にアクセスして操作するためにも使用されます。
idの構文は次のとおりです。ハッシュ文字(#)を書き、その後にid名を続けます。次に、中括弧{}内でCSSプロパティを定義します。
次の例では、ID名「myHeader」を指す<h1>要素があります。この<h1>要素は、headセクションの#myHeaderスタイル定義に従ってスタイル設定されます。
例
注：ID名は大文字と小文字が区別されます。
注：ID名には少なくとも1文字を含める必要があり、数字で始めることはできず、空白(スペース、タブなど)を含めることはできません。
クラスとIDの違い
クラス名は複数のHTML要素で使用できますが、ID名はページ内の1つのHTML要素でのみ使用する必要があります。
例
ヒント：CSSについては、CSSチュートリアルでさらに詳しく学ぶことができます。
IDとリンクを含むHTMLブックマーク
HTMLブックマークは、読者がWebページの特定の部分にジャンプできるようにするために使用されます。
ページが非常に長い場合、ブックマークが役立ちます。
ブックマークを使用するには、最初にブックマークを作成してからリンクを追加する必要があります。
次に、リンクをクリックすると、ページがブックマークのある場所にスクロールします。
例
まず、id属性でブックマークを作成します。
<h2 id="C4">第4章</h2>
次に、同じページ内からブックマークへのリンク(「第4章にジャンプ」)を追加します。
または、別のページからブックマークへのリンク(「第4章にジャンプ」)を追加します。
<a href="html_demo.html#C4">第4章にジャンプ</a>
JavaScriptでid属性を使用する
JavaScriptでid属性を使用して、特定の要素に対していくつかのタスクを実行することもできます。
JavaScriptはgetElementById()メソッドを使用して、特定のIDを持つ要素にアクセスできます。
例
id属性を使用して、JavaScriptでテキストを操作します。
ヒント： HTML JavaScriptの章、またはJavaScriptチュートリアルでJavaScriptを学習してください。
章のまとめ
・id属性は、HTML要素の一意のIDを指定するために使用されます
・id属性の値は、HTMLドキュメント内で一意である必要があります
・id属性は、特定の要素をスタイル設定/選択するためにCSSおよびJavaScriptによって使用されます
・id属性の値は大文字と小文字が区別されます
・id属性は、HTMLブックマークの作成にも使用されます
・JavaScriptはgetElementById()メソッドを使用して特定のIDを持つ要素にアクセスできます
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。