Webクリエイター【初級/前編】,  ◎ CSSの基礎

id属性とclass属性

※Webクリエイター能力認定スタンダードテキスト資料 P.54参照

id属性とは

範囲指定(グループ化)された範囲や、特定の位置に「命名する(名前をつける)」ことで、その範囲を指定することができます。id属性は、1つのHTMLドキュメントにつき一度しか使用できないのが特徴です。

【id属性名の注意点】
id名は、基本的には自由に命名する(好きな名前をつけることが可能)ことができますが、半角スペースを含めたり、数字一桁やアルファベット1つなど適当すぎるid名などエラーの元になりますので注意しましょう。また、共同作業をすることを視野に入れ、あまり適当なid名をつけてしまうと、後で分からなくなってしまったり理解しづらいCSSになってしまうので、ある程度、推測されやすいid名をつけることが好ましいと考えます。
頭文字に「#(シャープ)」を付けてCSSで記述します。HTMLには「#」は含めません。

別々に記述してもCSSとHTMLは連動し合っています。連動することで、レイアウトやデザインを整えることが可能となるのです。HTMLとCSSを操る場面で混乱しがちになりますが、反映する楽しさを味わいながら練習しましょう。

CSSの記述

/* コンテナ全体の横幅を980pxにする */
#container{width:980px;}

HTMLの記述
この中に要素(内容)を入れる

class属性とは

id属性と同じく範囲指定(グループ化)された範囲や、特定の位置に「命名する(名前をつける)」ことで、その範囲を指定することができます。id属性との違いは、1つのHTMLドキュメントにつき何度でも使用することができます。また、半角スペースで区切ることで複数のclassスタイルを幾つも充てることが可能な点が大きな特徴です。
【class属性名の注意点】
大まかに、命名に関する注意点はid属性と同じです。
頭文字に「.(ドット)」を付けてCSSで記述します。HTMLには「.」は含めません。

CSSの記述
/* 文字の色を赤にする */
.red{color:#ff0000;}

HTMLの記述
この中の要素(内容)は、文字がすべて赤色になります。

クラス属性は、いろんなタグにスタイルを充てることができます。

/*見出しがred*/

森のくまさん

/*段落がred*/

今日のランチは、サンドイッチです。

/*3つの果物がすべてred*/
  • バナナ
  • みかん
  • りんご
/*みかんだけがred*/
  • バナナ
  • みかん
  • りんご