初心者のためのWEBデザイナーの教科書

id属性とclass属性

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

id属性とは

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

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

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

CSSの記述


HTMLの記述


class属性とは

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

CSSの記述


HTMLの記述


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