『マージンの相殺』:CSS2の正しい処方!/ブラウザ間の表示差を無くす

現在、某WEBスクールで講師をしています。
そこで講義している内容から、CSSの正しい処方について解説しようと思います。
趣旨はブラウザ間の表示を一つのスタイルシートで同じにする(特にIE6-7と、Firefoxなどのモダンブラウザの表示差)・・・です。
各例題のソースをダウンロードして実際にやってみるとよく理解できると思います。
ちなみに手法など全て私のオリジナルです。

まずWEB開発で最初にするべきことは
検証用のブラウザをIEからFirefoxへ変える、です。
IE6,7はCSSを独自解釈していますので害があります。
またFirefoxはCSSを正しく解釈し、開発用に優れたアドオンがたくさんあります。
いつも使用しているアドオンは『Firebug』と『web developer』です。
二つとも日本語版があります。

さて、
まずはもっとも初歩の問題『マージンの相殺』。
IE6/IE7とFirefox/Opera/GoogleChrome/Safariの両方で表示を見比べてみてください。


■例題[ 1 ]マージンの相殺■

■症状[ 1 ]マージンの相殺■


どうしたらこういう場合の表示を同じにできるか?
これの正しい処方解説は下記へ。

Date : 2008/12/13 18:25

Posted by valley | | 編集/Edit

マージン(margin)の相殺:CSS2の正しい処方

外側と内側のBOXの余白はmarginではなく、
外側BOXのpaddingで空けます。
これですべてのブラウザで同じ表示が実現できます。

■CSS2の処方[ 1 ]マージンの相殺■

/*↓処方CSSソース↓************/

.base //外側BOX
{
margin:10px auto;
padding:10px;
width:200px;
height:100px;
background: #aaa256;
}

.base div //内側BOX
{
padding:5px;
width:120px;
height:55px;
background:#fffce2;
}


/*↓症状CSS↓************/


.base //外側BOX
{
margin:10px auto;
width:200px;
height:100px;
background: #aaa256;
}

.base div //内側BOX
{
margin:10px;
padding:5px;
width:120px;
height:55px;
background:#fffce2;
}

Date : 2008/12/18 02:35

Posted by valley | | 編集/Edit

マージン(margin)の相殺:CSS2の正しい処方

たとえば、タンスのような構造もこの方法を使い
簡単に構築できます。

■縦並びBOX サンプル■

この場合のポイントは
内容物のBOXには下方向のマージンだけを指定して
BOXどうしの間隔を設定します。
一番最後のBOXはすでに外側BOXのパディングで間隔が設定してありますのでマージンをすべて0に設定します。

.base3{
margin:10px auto;
padding:10px;

width:200px;
height:275px;
background: #aaa256;
}

.boxStd {
margin:0 0 5px 0;
padding:5px;
width:190px;
height:55px;
background:#aafce2;
}

.boxBtm {
margin:0;
padding:5px;
width:190px;
height:55px;
background:#fffce2;
}


※重要なことは、間違ってもマージンの相殺の仕様を利用しようとしないこと。こういう仕様ではデザインはできませんので、上記の手法で回避します。

Date : 2009/01/21 12:01

Posted by valley | | 編集/Edit