CSS デザインの定石

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

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 の使用には十分注意しましょう。

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

参考文献

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