CSSのちょっと高度な書き方

CSSになれてくると、記述量が多くなったり、バグに悩まされる機会が増えてきます。 ここではCSSのスマートな書き方をちょっとだけ紹介します。

Before

.sample{
    margin-top:10px;
    margin-bottom:20px;
    margin-left:30px;
    margin-right:40px;
}

After

.sample{
    margin:10px 40px 20px 30px;/*上、右、下、左*/
}

まとめて書いたら、なんと一行ですみました。値の書き方を変えることで様々な対応が出来ます。

margin:10px;/*上下左右*/
margin:10px 20px;/*上下、左右*/
margin:10px 20px 30px;/*上、左右、下*/

このようなまとめ書き（ショートハンドといいます）ができるプロパティは以下のもの

margin,padding,border,background,font

実際にまとめて書くとこんな感じ

.sample{
    margin:10px 20px 30px;
    padding: 20px 30px;
    border:#006699 solid 2px;
    background:#003366 url(./back.gif) no-repeat right bottom;
    font:style variant weight size/height family の順
}

気をつける点は、backgroundのbackground-positionに当たる値は横軸→縦軸の順で書くことと、 fontプロパティの書く順番です。sizeとfamilyの値は必須なので忘れないでください。
fontのショートハンドはややこしいので、個人的にはあまりおすすめしません。

Before

h1{
    color:#993300;
    font-size:large;
}
h2{
    color:#993300;
    font-size:medium;
}
h3{
    color:#993300;
    font-size:small;
}

After

h1,h2,h3{
    color:#993300;
}
h1{
    font-size:large;
}
h2{
    font-size:medium;
}
h3{
    font-size:small;
}

,(コンマ)でセレクタを区切ることで、複数のセレクタに同じプロパティを指定できます。
記述量はあまり減っていないように見えますが、まとめて指定するプロパティの数が多ければ記述量は減りますし、値を変更したくなったときも一カ所変えるだけで、一気に変更することが出来ます。

Before

ul#menu{
    color:#993300;
    border:#006699 solid 2px;
}
li.co-menu{
    font-size:medium;
}

<ul; id="menu">
<li class="co-menu">Before</li>
<li class="co-menu">Before</li>
<li class="co-menu">Before</li>
</ul>

After

ul#menu{
    color:#993300;
    border:#006699 solid 2px;
}
#menu li{
    font-size:medium;
}

<ul; id="menu">
<li>After</li>
<li>After</li>
<li>After</li>
</ul>

セレクタを半角スペースで区切りながら並べることで、Aの中にあるBに対するスタイルを指定できます。 今回の場合はID="menu"の中にある（子孫要素である）liに対するスタイルを指定。

これによりclassの数を減らすことができ、HTMLソースを軽く、見やすくすることができます。

Aの中にあるBの中にあるCに対するスタイルの指定も可能なので、非常に便利なのですが、CSSの優先順位に注意しないと上手くスタイルが適用されないのが欠点です。

ほかにも色々な書き方がありますがIE6で使えないため、今回はここまでです。
今回紹介したのは、どれも便利なものばかりですので、是非ものにしてください。

---