CSSを少しでも軽くする10のワザ

CSSはWebページのデザインを決める重要なファイルです。

近年のリッチなWebデザインを実現するために、CSSも肥大化の一途をたどっています。そこで、普段私が使っているCSSを軽くするちょっとしたワザをいくつか紹介します。

CSSを小さくすることはブラウザの読み込み、解読速度が上がることが期待できます。またお客様に収めた後、ふとCSSを見たときに「ムダのないきれいなCSSだな～。さすがプロ！」と思ってもらえるときが・・・あるかも！？

１、0.xの指定を小数点以下のみにする

0.5em、0.5pt、0.33%などなど。0.いくつかの指定は良く現れます。先頭の0は付いていなくても正しく読み取られます。

ということで

　0.5em > .5em

と置換してしまいましょう。

置換コマンドで、置換対象に「0.」、置換後に「.」と打てば変換できます。

２、2行以上の改行を１つに

２行以上の改行を１行のみにすることで、また少し減らすことができます。

NetBeansでしたら

「編集」 –> 「置換」を開き
検索対象に「\n{2,}」
置換対象に「\n」

と入力し、左下の「正規表現」にチェックを入れて「全てを置換」します。これだけで２行以上の改行が１行になります。
（改行の置換はそれぞれのエディタでクセがあります。\nが$nだったりします。また不可能なエディタもありますのでご注意ください）

３、使っていないコメントを消す

最初は注意するためにコメントをしたが、いまは特に見ていない・・・というコメントはありませんか？

ムダなコメントは消してしまいましょう。
（ただし、後のメンテナンスで必要になりそうなコメントまで消さないように・・・）

４、サイズ指定など、同じ数値が４つ並んでいるものをまとめる

　margin: 3px 3px 3px 3px;

な～んてなっている部分はありませんか？

　margin: 3px;

とまとめましょう。

また、上下、左右で同じ数字がある場合もまとめられますね。

　margin: 1em 2em 1em 2em;　＞　margin: 1em 2em;

５、色指定を見直す

#ffffff、#000000など同じ文字が６つの色指定は３文字にしても同じです。

　#ffffff > #fff

６、同じ意味の表現を何度も書いていないか見直す

これはチェックする時間がかかるので気づいたときだけやればいいと思います。

　body{
　　margin: 10px 0 10px;
　　background-color: #fff;
　　margin-bottom: 10px;
　}

という感じで違う表現で同じことを書いてある部分はありませんか？

ひとつにまとまるように削除しましょう。

７、２つ以上の空白を１つに

空白が２つ以上無意味に打っていある部分がよく現れます。たとえばこんな部分。

　margin: 2px     3px  3px    4px;

これをひとつにまとめましょう。

置換コマンドで
　置換対象に「空白を２つ」
　置換後に「空白を１つ」
書けばOKです。ただしこれでは空白３つの部分は空白２つになってしまいますので何度か繰り返すと良いでしょう。

NetBeansでは検索対象に「_{2,}」（赤下線の部分はスペースです）、検索後に空白１つを打てば、２つ以上のスペースが一気に１つになります。

８、一気に設定できるCSS表現をなるべく使う

プロパティの多い項目はよくあります。たとえば「background」などですね。

　.a{
　　　background-image: url(aaa.png);
　　　background-position: 0 0;
　　　background-color: #aaa;
　　　background-repeat: repeat-x;
　　}

なんてなっている部分はありませんか？

　.a{
　　　background: #aaa url(aaa.png) 0 0 repeat-x;
　　}

とまとめることで大幅に文字を削減できます。

９、まったく同じ設定の項目をまとめる

このワザはCSSの適用範囲が変わってしまう場合があるのでむやみに行わないように注意してください。

なるべく近くのCSSのみをまとめるようにしてください。

たとえば

　.a{
　　　font-size: 10px;
　　　margin: 10px;
　　　}

　.b{
　　　font-size: 10px;
　　　margin: 10px;
　　　}

となっていた場合、

.a, .b{
　　　font-size: 10px;
　　　margin: 10px;
　　　}

とすることで同じ設定を与えることができます。

10、0em、0pxなどを0にする

0em、0px、0ptなど、0の数字に単位をつけていませんか？

これは「0」だけでＯＫです。

　margin: 0px;　＞　margin: 0;

オマケ　１辺だけが違うボーダーの指定を変える

　.a{
　　　border-top: 1px solid #000;
　　　border-bottom: 1px solid #000;
　　　border-left: 1px solid #000;
　　　}

という右辺のみが不要なborder指定があった場合、以下のようにすることで減らせます。

　.a{
　　　border: 1px solid #000;  /* まず４辺すべてを指定 */
　　　border-right-width: 0;  /* 右辺のみを消去 */
　　　}

こんな風にまとめることができます。

いかがでしょうか？

私が普段使っている小技を紹介させていただきました。

もしあなたがさらに便利なワザをご存知でしたら、ぜひ下のコメント欄から教えてください！

お役に立てば幸いです。