エレガントでスマートなCSSの書き方

スタイルシートを記述する際、そのコードがグダグダであったとしても、コーディングさえ正しければ、実際のサイトの表示には影響がありません。コードがきれいなことと、そのコードで表示されるウェブデザインがきれいなこととは無関係ですので、あえてエレガントで芸術的なコードを記述する意味はどこにもないといえます。

そのような無駄な努力をあえてしようというのが当サイトの趣旨です。

まず、基本的なこととして以下のポイントを抑えておくとよいでしょう。

①ショートハンド

②フォーマット

②重複表示の簡略化

■ショートハンドとは何か？

ショートハンドというのは、いわゆる簡略化した書き方のことです。簡略化にもレベルがありますが、ショートハンドは大きな簡略化ではなく、ちいさなレベルでの簡略化にあたります。

例えば、以下のようなCSSのコードがあったとします。

#example {padding: 0px 0px 0px 0px;}

これは、以下のように簡略化して書くことができます。

#example {padding: 0;}

これがショートハンドとよばれるものです。

一方で、以下のようなコードがあったとします。

#example {padding: 0px 0px 0px 0px;}
#example2 {padding: 0px 0px 0px 0px;}

これも簡略化することができ、カンマで区切って繋げて以下のように記述することができます。

#example, #example2 {padding: 0px 0px 0px 0px;}

これはショートハンドといえるのでしょうか？

私にはわかりませんが、CSSの簡略化にも上記のように２通りの意味があると私は認識しております。正確には３通りあること考えておりますが、それはまた別の機会でご紹介させていただきます。

いずれにしても、#example {padding: 0px 0px 0px 0px;}などと書くのはがさつで、決してエレガントとは言えません。

部屋がちらかっていると気になってしょうがない人がいるように、コードも冗長だと修正したくてたまらなくなってしまう人もいるものです。CSSに芸術性を求めるコーディナーの場合、修正せずにはいられない衝動を覚えることでしょう。

■フォーマットとは何か？

フォーマットというのは、いわゆるソースの整形ということです。空白や改行の調整のみですので、こちらも実際の表示には何ら影響がありません。

上記の例でいえば、以下のように整形することがフォーマットということになります。

#example {
　　　　　　padding: 0;
　　　　　　}

こうすることによって、ソースコードが見やすくなります。この整形には、改行と空白スペースを入れることでできますが、空白にタブを使う人もいれば、単に半角スペースを入れるだけという人もいます。当サイト運営者は半角スペースの方がエレガントだと考えておりますが、正直、どちらでもよいと思います。

■重複表示の簡略化

コードを記述する際、冗長になるのは避け、できるだけシンプルに書くのが基本です。

例えば、以下のようなコードがあったとします。

.sample {padding:10px 0;
　　　　　background-color: #cccccc;
　　　　　}

.sample2 {
　　　　　　padding:9px 4px;
　　　　　　background-color: #cccccc;
　　　　　　}

この場合、background-color: #cccccc;の部分が同一ですので、これだけ切り離して書くと簡略化できます。

.sample {padding:10px 0;}
sample2 {padding:9px 4px;}
.sample3 {background-color: #cccccc;}

htmlソースには、半角を開けて以下のように記述します。

このように、CSSコードはできるだけシンプルに記述することが、スマートなスタイルシートを書く際の基本になります。