※Webクリエイター能力認定スタンダードテキスト資料 P.54参照
id属性とは
範囲指定（グループ化）された範囲や、特定の位置に「命名する（名前をつける）」ことで、その範囲を指定することができます。id属性は、1つのHTMLドキュメントにつき一度しか使用できないのが特徴です。
【id属性名の注意点】
id名は、基本的には自由に命名する（好きな名前をつけることが可能）ことができますが、半角スペースを含めたり、数字一桁やアルファベット1つなど適当すぎるid名などエラーの元になりますので注意しましょう。また、共同作業をすることを視野に入れ、あまり適当なid名をつけてしまうと、後で分からなくなってしまったり理解しづらいCSSになってしまうので、ある程度、推測されやすいid名をつけることが好ましいと考えます。
頭文字に「#(シャープ)」を付けてCSSで記述します。HTMLには「#」は含めません。
別々に記述してもCSSとHTMLは連動し合っています。連動することで、レイアウトやデザインを整えることが可能となるのです。HTMLとCSSを操る場面で混乱しがちになりますが、反映する楽しさを味わいながら練習しましょう。
CSSの記述
|
1 2 3 |
/* コンテナ全体の横幅を980pxにする */ #container{width:980px;} |
HTMLの記述
|
1 2 3 |
<div id="container"> この中に要素(内容)を入れる </div> |
class属性とは
id属性と同じく範囲指定（グループ化）された範囲や、特定の位置に「命名する（名前をつける）」ことで、その範囲を指定することができます。id属性との違いは、1つのHTMLドキュメントにつき何度でも使用することができます。また、半角スペースで区切ることで複数のclassスタイルを幾つも充てることが可能な点が大きな特徴です。
【class属性名の注意点】
大まかに、命名に関する注意点はid属性と同じです。
頭文字に「.(ドット)」を付けてCSSで記述します。HTMLには「.」は含めません。
CSSの記述
|
1 2 |
/* 文字の色を赤にする */ .red{color:#ff0000;} |
HTMLの記述
|
1 2 3 |
<div class="red"> この中の要素(内容)は、文字がすべて赤色になります。 </div> |
クラス属性は、いろんなタグにスタイルを充てることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*見出しがred*/ <h1 class="red">森のくまさん</h1> /*段落がred*/ <p class="red">今日のランチは、サンドイッチです。</p> /*３つの果物がすべてred*/ <ul class="red"> <li>バナナ</li> <li>みかん</li> <li>りんご</li> </ul> /*みかんだけがred*/ <ul> <li>バナナ</li> <li class="red">みかん</li> <li>りんご</li> </ul> |