CSS を書くときの自分ルール

CSS を書くとき、自分ルールに従って書くと分かりやすいよ、というお話。

改行やインデントのルール

改行やインデントのルールを決めておくだけでも、結構見やすくなる。僕は基本的にはこんな感じで書いている。

実際に書くと、こんな感じになる (このページでは Tab インデントを半角スペース4つ分で置き換えている)。

p {
    margin:30px 0;
}

h1,
h2,
h3 {
    color:#f00;
    font-weight:bold;
}

「:」や「;」の間にスペースを入れた方が見やすい、と思えば、そこは「自分ルール」なので、自由に決めると良いだろう。

最初に全称セレクタでデフォルトスタイルを消す

最初にデフォルトスタイルを消しておくことで、ブラウザごとの表示差異に悩まされる面倒をなくす。

セレクタは構造に関係ないものを先に書く

CSS は、後から書いたセレクタのスタイルが優先されるので、先に構造に関係のないもの (class や id を含まないもの) を書いてしまう。

こうすることで、後から書いた特殊なスタイルは、先に書かれた構造に関係のないものを上書きして適用される。

要素は XHTML Abstract Modules の順に書く

これは、特に class や id を付けていない要素を書くときの順番。XHTML Abstract Modules の順番に沿ってセレクタを記述していくと、統一性が出る。

いちいちページを見て確認するのは面倒なので、要素の順番をまとめた。これを基に、普段使わない要素は消して、自分用のリストを作っておくとよいだろう。

セレクタは HTML ファイルで出てくる順に細かく指定

class や id 付けがされているセレクタは、HTML ファイル内での出現順に、細かく指定していくと分かりやすい。

例えば以下のような HTML があったとしたら、

<html>
 <head>
  <title>Sample</title>
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <h1>Page Title</h1>
   </div>
   <div id="body">
    <h2>Section</h2>
    <p>Paragraph</p>
   </div>
   <div id="footer">
    <address>Address</address>
   </div>
  </div>
 </body>
</html>

CSS の方では、文脈セレクタを使って順に書いていく。

div#wrapper { }
div#wrapper div#header { }
div#wrapper div#header h1 { }
div#wrapper div#body { }
div#wrapper div#body h2 { }
div#wrapper div#body p { }
div#wrapper div#footer { }
div#wrapper div#footer address { }

他にも、CSS を HTML と同じ構造にインデントしてしまう方法もある。

div#wrapper { }
  div#header { }
    div#header h1 { }
  div#body { }
    div#body h2 { }
    div#body p { }
  div#footer { }
    div#footer address { }

プロパティは CSS2 Specification の順に書く

プロパティも、記述する順番が決まっていると分かりやすい。CSS2 Specification の順番に書くと分かりやすいだろう。

以下に全プロパティを並べた。自分が普段使わないプロパティは消して、自分用のリストを作っておくとよいだろう。

省略プロパティが使える場合は極力使う

これは全く逆の意見の人も多い。使っていて見やすい方で構わないだろう。僕は省略プロパティを使う派だw。

省略プロパティは記述のルールを忘れがちなので、よく使われるであろう省略プロパティの記述ルールをまとめた。margin と padding はよく使う。

margin・padding・border-width・border-color・border-style

これらのプロパティには4つの値の書き方がある。ここでは margin を例にして説明している。

margin:10px; (値の指定が1つ)

上下左右の4辺とも同じ値になる。

margin:10px 20px; (値の指定が2つ)

上下辺 (10px)、左右辺 (20px) という指定になる。値と値の間をスペースで区切りる。

margin:10px 20px 30px; (値の指定が3つ)

上辺 (10px)、左右辺 (20px)、下辺 (30px) という指定になる。

margin:10px 20px 30px 40px; (値の指定が4つ)

上、右、下、左、の「時計回り」の順で指定される。Top、Right、Bottom、Left という順番から、TRouBLEd (トラブルド) という覚え方もある。

border-top・border-right・border-bottom・border-left・border
  • border:[border-width] [border-color] [border-style];

どのプロパティでもルールは同じで、値は順不同、3つの値が指定されていれば OK。

list-style
  • list-style:[list-style-type] [list-style-image] [list-style-position];

値は順不同で、3つとも書く必要はない。書かなかった値はデフォルト値 (初期値) が指定されたものと見なされる。各値の初期値は以下のとおり。

  • list-style-type : disc (円形のマーカーを使う)
  • list-style-image : none (画像をマーカーとして使わない)
  • list-style-position : outside (マーカーをリストアイテムボックス外に配置)

また、none の値は list-style-type と list-style-image のどちらにもある値だが、list-style でこの値を指定すると、両方に none が指定されたものと見なされる。

background
  • backgorund:[backgorund-color] [backgorund-image] [backgorund-repeat] [backgorund-attachment] [backgorund-position];

値は順不同で、全てを指定する必要はない。書かなかった値はデフォルト値が適用される。つまり、

#foo {
    background-image:url("background.png");
    background:#fff repeat-x fixed top left;
    }

のように指定してしまうと、background-image の背景画像の指定は無効になってしまう。各値の初期値は以下のとおり。

  • backgorund-color : transparent (背景色を透過させる)
  • backgorund-image : none (背景画像を表示しない)
  • backgorund-repeat : repeat (背景画像を縦横方向に繰り返し)
  • backgorund-attachment : scroll (背景画像を固定しない)
  • backgorund-position : 0% 0% (背景画像を左上に配置)
font
  • font:[font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

font プロパティは、個人的には一番記述ルールが面倒な省略プロパティだと思う。

  • 1～3番目 [font-style] [font-variant] [font-weight] までの値は順不同
  • [font-size]/[line-height] は、間をスラッシュ「/」で区切って続けて書く
  • [font-size] と [font-family] 以外は省略化。省略した値はデフォルト値が適用される
  • font プロパティでは値を指定できないが、font-size-adjust・font-stretch の両プロパティにも初期値が適用される

というルールになっている。各値の初期値は以下のとおり。

  • font-style : normal (斜体にせず通常体で表示)
  • font-variant : normal (スモールキャピタルを使わない通常表示)
  • font-weight : normal (太字にせず400程度の標準で表示)
  • font-size : medium (標準サイズ・省略不可)
  • line-height : normal (標準の行間)
  • font-family : User-Agent の設定に依存 (省略不可)
  • font-size-adjust : none (フォントサイズ調整をしない)
  • font-stretch : normal (フォントの字幅を変えない)

リンクの擬似クラスの順番は「LoVe HA?」

覚え方は「LoVe / HAte」(ラブ / ヘイト) などの違う覚え方もあるようだが、要するに、リンクの擬似クラスは

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

という順番で書こう、ということ。これ以外の順番だと、スタイルがまともに動作しないことがある。

また、focus を使用する場合は、

  1. a:link
  2. a:visited
  3. a:hover
  4. a:focus
  5. a:active

という順番になる (LVHFA)。

値の数字について

値の数字について、「0」には単位をつける必要はない (どの単位でも 0 は 0 なので)。その他の数字には必ず単位をつけよう。

line-height は例外で、単位をつけずに数字だけで指定するべき。単位をつけてしまうと行ボックスの高さがおかしくなってしまう。

ガイドラインを作ってルールを統一する

これらを参考にして自分ルールを作ったら、きちんとまとめておこう。CSS のファイル内にコメントとして、ルールをメモしておくのが簡単な方法。

参考文献