CSSでIDを指定するにはどうすればいいですか？
HTML要素に個別にスタイルを適用したい場合、IDを使用してCSSで指定します。この記事では、CSSでIDを指定する方法について、具体例を交えて解説します。
IDの指定方法
上記のIDに対して、CSSでの指定方法は以下の通り。 要素名の後に#（シャープ）を書き、続いてid名を指定するとそのid名の要素に対してCSSを記述できる。
<style>
#target-id {
/* このidを持つ要素に適用されるスタイル */
color: red;
font-size: 24px;
}
</style>
上記CSSでは、#target-id でIDが target-id の要素を指定し、文字色を赤、フォントサイズを24pxに設定しています。
HTMLでのIDの使用方法
HTMLでは、要素に id 属性を追加することでIDを指定します。
<h2 id="target-id">この見出しにCSSを適用</h2>
上記HTMLでは、h2 要素に id="target-id" を記述することで、この要素に target-id というIDを割り当てています。先ほどのCSSと組み合わせることで、この h2 要素の文字色が赤、フォントサイズが24pxになります。
ID指定のメリット
ID指定には、以下のようなメリットがあります。
| メリット | 説明 |
|---|---|
| 要素を特定できる | IDはページ内で一意である必要があるため、特定の要素だけを狙ってスタイルを適用できます。 |
| JavaScriptとの連携 | JavaScriptでもIDを使って要素を取得できるため、動的な処理を実装する際に便利です。 |
注意点
- IDはページ内で一意である必要があります。同じIDを複数の要素に割り当てると、CSSやJavaScriptが正しく動作しない可能性があります。
- ID名は英数字、ハイフン、アンダースコアのみを使用できます。スペースや日本語などの特殊文字は使用できません。
参考資料
よくある質問
Q1. IDとクラスの違いは何ですか？
A1. IDはページ内で一意の要素に付与する識別子で、クラスは複数の要素に共通のスタイルを適用するために使用します。詳細はクラス - HTML: HyperText Markup Language | MDNをご覧ください。
Q2. JavaScriptでIDを使って要素を取得するにはどうすればいいですか？
A2. document.getElementById("id名") を使用します。例えば、IDが target-id の要素を取得するには、document.getElementById("target-id") と記述します。
Q3. ID名に日本語は使えますか？
A3. いいえ、ID名には英数字、ハイフン、アンダースコアのみ使用可能です。日本語などの特殊文字は使用できません。
その他の参考記事:jquery id 取得