グラビカ学習帳

スタイルシートでコーディングする時に、なんとなくいつも id と class の使い分けに迷ってしまいます。

そこで簡単にどう使い分けたらいいかを書いておこうと思います。
レイアウトを行うという点で考えるとこれだけでは分類しきれない場合も多いですが、参考にして下さい。

■id
「一意属性」とも呼ばれており、割り当てた値は唯一の名前を持つ事になります。
例えば料理のレシピを紹介しているサイトで「id="pasta"」や「id="cake"」とすることによって、それぞれが意味を持った情報の集まりになります。
要素に固有の値を持たせることがid属性の役割です。

■class
class属性は分類をあらわすもので、同じ意味を持つ意味を持つ情報をグループ化して明示する際に定義します。先ほどdivに「pasta」や「cake」と固有の値を定義したものは、それぞれにレシピに関する情報であるといえるので「class="recipe"」と定義することができます。

以前に雑誌に載っていた事ですが、便利そうなので載せてみます。

他の人が作成したCSSファイルを理解したり、自分が作成したファイルであっても、あまりにもスタイルが多くなってしまうとどこに書いたか探すのに時間がかかってしまったりします。
 そんな時に、冒頭に目次のように情報を整理して、見出しの書き方に少し工夫をしておけば探すのがとても楽になります。

 例えば

/*=====================================
=1 common
=2 header
=3 sub menu
=4 main menu
=5 left
=6 main
=7 right
=8 footer
=====================================*/

上記のように見出しを目次化しておき、
見出しは

/*=====================================
=4 main menu
=====================================*/

という感じで記述するようにする。
そうするとだいぶ下の方に書かれているmain menuも「=4」と検索しただけで見つける事ができます。

急ぎの仕事の時にはついつい怠ってしまいそうですが、規模の大きいサイトや更新が頻繁に入りそうなサイトの時にはとっても便利です。

梅津でした。