CSS デザインの定石

正しい表示のために最低限守るべきこと、というお話。

CSS デザインとクロスブラウザ

2007年現在、CSS を完璧に実装できているブラウザは存在しない。どのブラウザにも何かしらのバグがある。バグがあると、ブラウザごとに表示が違ってしまう。

そのブラウザのバグを避けて、どのブラウザでもきちんと表示されるように CSS を書いていくことが望ましい CSS となる。

CSS デザインの定石

ブラウザごとにたくさんあるバグの中で、よく引っかかりやすいもの、重要なものをまとめた。まずはこれらに注意してひととおり作ってしまい、実際の表示を見比べて細かい問題を解決していくとよいだろう。

NN4 に CSS を読み込ませない

NN4 の CSS の実装は最低だ。全くまともに表示してくれない。その他、IE4 などの古いブラウザもロクに CSS をサポートしていない。現在のブラウザのシェアから考えて、それらのブラウザのバグを避けて CSS を作るよりは、CSS を読み込ませないようにした方が楽だろう。

NN4 を含む古いブラウザに CSS を読み込ませない方法については、以下のページが参考になるだろう。

いくつか書き方はあるが、以下のようなやり方ではじくことができる。

  • link 要素の media 属性に、screen 以外の値を入れる (screen,tv など) ことで NN4 をはじく。
  • 外部 CSS で @import を使うことで IE3 をはじく。
  • @import で url () を使わずに書くことで IE4 をはじく。
ブラウザのデフォルトスタイルシートをリセットする

初めにブラウザのデフォルトスタイルをリセットすることで、ブラウザごとの表示差異を無くして、ページを作りやすくする。

一緒に画像の下の隙間をなくすための指定も行っておくとよいだろう。

line-height には単位を付けず数値のみ指定する

line-height に単位を付けてしまうと、行ボックスの高さがおかしくなってしまうことがあるので、単位は付けずに数値のみで指定しよう。ちなみに、最も読みやすいといわれる行間は、line-height:1.4; らしい。

width と左右 padding や、左右 border を同時に指定しない

width で幅を指定したときは、左右の padding や border を一緒に指定してはいけない。高さの場合は、上下の padding や border について、同じことがいえる。

ブラウザによって、ボックスの幅や高さを border まで含んで計算するかどうかが違い、それによってブラウザごとに幅や高さが変わってしまい、レイアウトが崩れてしまうことがあるからである。ちなみに CSS2 の仕様としては、幅や高さは padding や border を含めないで計算するようになっている。

対処法としては、width と左右 padding や border を別々の要素に別けて書くようにする。

div {
    width:200px;
    padding:10px;
    border:1px solid #000;
}

単にこのように書いてしまうと、ブラウザによって 200px で表示されたり 222px で表示されたりしてしまう (仕様どおりなのは 200px で表示されている方)。そのため、以下のような HTML にし、

<div class="border_box">
  <div class="content_box">
    本文
  </div>
</div>

CSS の方は以下のように指定することで、どのブラウザでも「border まで含んで幅 200px のボックス」という表示になる。

div.border_box {
    width:200px;
}

div.content_box {
    padding:10px;
    border:1px solid #000;
}
float した要素には width を必ず指定し margin は指定しない

float を指定した要素には、同時に width を必ず指定しよう。文法規則だ。

float した要素に margin を指定すると、IE で margin の値を2倍に計算して表示してしまうので、margin は指定しないようにしよう。

position:absolute; を指定した要素にはなるべく width も指定し、margin は指定しない

width と border・padding、float した要素に width、などと同じように、これもブラウザによって表示が異なってしまうことがある。width、padding、border、margin が絡んでくるデザインの指定には注意しよう。

overflow を指定した要素には width と height を指定する

overflow プロパティを使用する場合は、width と height を同時に指定しないと overflow の指定がうまく効かない。

また Mac IE5 では、div 要素以外に overflow を使うとその要素の内容が消えてしまうバグがある。overflow の使用には十分注意しよう。

仕様を理解し、このあたりに注意していればほぼ大丈夫であろう。その他の細かなバグなどは、実際にチェックして対処していこう。

参考文献

記事の中で紹介した以外に参考にしたページ。