TOP ＞ スタイルシート基本知識 ＞ IDを使って要素を指定する
IDを使って要素を指定する
クラスと同じようにIDをHTML文書の要素に割り当てることで、スタイルシートの内容を反映させることが出来ます。
IDは本来、要素に割り当てることで、要素を区別する際に使用します。具体的に言うと、「<h1 id="a">・・・ <h1>」のように開始タグに 「id="ID名"」を挿入します。
このIDを利用して、特定のIDを指定した要素にのみ、スタイルシートを適用することが出来ます。
そのためには、スタイルシートにIDにかけたい内容を書き込んでおく必要があります。
IDを使って要素を指定する
【スタイルシート】
#ID名｛プロパティ：値; プロパティ：値; ・・・・｝
【HTML】
<要素名 id="ID名"> ・・・・ </要素名>
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>IDを使って要素を指定するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- #kyotyo{ background-color: yellow; border-bottom: 3px solid; } --> </style> </head> <body> <h1>HTML文書はIDを使って要素を区別できます。</h1> <br><br> <h1 id="kyotyo">スタイルシートでID"kyotyo"に背景色黄色・下線を設定して<h1>要素に適用しています。</h1> <p id="kyotyo">ID"kyotyo"を<p>要素に適用しても、同じようにスタイルシートの内容が適用されます。</p> </body> </html> |
[
スタイルシート基本知識 ]
