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; らしいです。

参考 : Lucky Bag Blog - line-height の値には単位なしが良いとされる理由

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

幅を指定した時は、左右の padding や border を一緒に指定してはいけません。高さの場合は、上下の padding や border について、同じことがいえます。

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

参考 : 「CSS バグ辞典スレッド」の要約 - ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう

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

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

単にこのように書いてしまうと、ブラウザによって 200px で表示されたり 222px で表示されたりしてしまいます。なので、このような HTML にし、

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

CSS の方は、

div.border_box {
    width:200px;
    }

div.content_box {
    padding:10px;
    border:1px solid #000;
    }

という風に指定すれば、どのブラウザでも「border まで含んで、幅 200px のボックス」という表示になります。

float した要素には width を必ず指定し margin は指定しない

float を指定した要素には、同時に width を必ず指定しましょう。文法規則です。

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

参考 : 「CSS バグ辞典スレッド」の要約 - フロートの左右マージンが指定値より大きくなる

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

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

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

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

又 MacIE5 では、div 要素以外に overflow を使うと、その要素の内容が消えてしまうバグがあります。overflow の使用には十分注意しましょう。

参考 : 「CSS バグ辞典スレッド」の要約 - 幅と高さが明示されていない要素への overflow:hidden; 指定が完全に反映されない

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

参考文献

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