※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*/
今日のランチは、サンドイッチです。

/*３つの果物がすべてred*/

バナナ
みかん
りんご


/*みかんだけがred*/

バナナ
みかん
りんご