実録！ホームページ制作者の声

具体的な例として以下のサンプルを見てください。

HTMLサンプル =========================================
<ul class="type1">
   <li>テキスト</li>
   <li>テキスト</li>
</ul>

<ul class="type2">
   <li>テキスト</li>
   <li>テキスト</li>
</ul>

<ul class="type3">
   <li>テキスト</li>
   <li>テキスト</li>
</ul>


CSSサンプル =========================================
ul.type1{
   font-size:80%;
   margin:10px;
   padding:10px;
   background:#333333;
}
ul.type1 li{
   margin:5px 0 0 0;
   padding:0;
}

ul.type2{
   font-size:80%;
   margin:10px;
   padding:10px;
   background:#666666;
}
ul.type2 li{
   margin:5px 0 0 0;
   padding:0;
}

ul.type3{
   font-size:80%;
   margin:10px;
   padding:10px;
   background:#999999;
}
ul.type3 li{
   margin:5px 0 0 0;
   padding:0;
}

似た設定ばかりでわかりずらい！この3つのリストは余白などの形式が同じですが、背景色だけ異なっています。背景色の記述だけが違うのに、ほかの共通要素も繰り返し設定しなければならず非常に面倒ですよね。それに、余白の修正をするときもそれぞれに手を加えなければならず、効率は非常に悪いといえます。

そんなときに共通要素と異なる要素を分ければ、ぐっとシンプルにわかりやすくなります。
このような感じです。

HTMLサンプル =========================================
<ul class="type1 bg1">
   <li>テキスト</li>
   <li>テキスト</li>
</ul>

<ul class="type1 bg2">
   <li>テキスト</li>
   <li>テキスト</li>
</ul>

<ul class="type1 bg3">
   <li>テキスト</li>
   <li>テキスト</li>
</ul>


CSSサンプル =========================================
ul.type1{
   font-size:80%;
   margin:10px;
   padding:10px;
   background:#333333;
}
ul.type1 li{
   margin:5px 0 0 0;
   padding:0;
}

ul.bg1{
   background:#333333;
}
ul.bg2{
   background:#666666;
}
ul.type3{
   background:#999999;
}


どうでしょうか。共通部分とそれぞれの背景色を分けているのでスタイルシートが分かりやすくメンテナンスもやりやすくなりました。そしてポイントはclassセレクタへ二つの要素を適用させていることです。

class="type1 bg1"

このように、classセレクタに半角スペースで区切って二つの要素を指定するのです。この記述方法は応用次第でもっと便利に活用することもできます。これを知っているのと知っていないのとでは、スタイルシートへの記述もガラリと変わってくるので是非使ってみてください。ただ、IDセレクタには使用できないのでご注意を。