スポンサーサイト
新しい記事を書く事で広告が消せます。
レイアウトフリーなCSSの書き方（と、思う）
ブラウザにできる限り依存しないCSSレイアウトを模索している。
CSSにはボックスモデルの概念
http://msugai.fc2web.com/web/CSS/box.html
というのがあって、xhtml+CSSのレイアウトは基本的にこれを使っている。
ところが、このボックスモデルの解釈はブラウザによって異なる。
細かく挙げればキリがないが、大きくはIE6とその他ブラウザ（IE7、Firefox、Safari etc...）で解釈が違う事が多い。
これまたおおまかに説明すると
IE6では
width = ボックス幅（margin boader paddingはどんな数値を設定してもボックス幅に内包される）
であるのに対し
その他ブラウザでは
margin + boader + padding + width = ボックス幅
なのである。これ、CSSのバグ（というか仕様）基本中の基本。
では、よくある幅を固定した下図【例1】のようなレイアウトをしたいときはどうすればよいか。（CSSハックを使えば事は簡単だが、W3Cに嫌われる可能性があるので今回はハックを使わない事とする。）
【例1】
あくまで一つの例だが、こうだ。
上図【例1】の場合、ひとつのdiv要素でマージンとパディング等を設定していきたい所だが、それらを設定するとブラウザによっては大きくレイアウトが崩れる為、以下のようにする。説明に不要と思われるプロパティは省略している。
今回のターゲットブラウザは
IE6 IE7 Firefox2.x Safari3.x
■■■■■htmlより抜粋■■■■■
<div class="wrapper">
<div class="inner">
<div class=title>□□□□□□タイトル□□□□□</div>
<p>ここにはダミー文章が入ります。～中略～ります。</p>
</div>
</div>
■■■■■■■■■■■■■■■
■■■■■cssより抜粋■■■■■
.body{
text-align: center;
}
.wrapper {
width: 400px;/*←ボックス幅を固定*/
height: auto;/*←高さは内包要素に合わせるようにautoにする*/
text-align: center; /*←内包要素の中央ぞろえ*/
margin-right: auto; /*←Firefox用に左右マージンをautoにする*/
margin-left: auto; /*←Firefox用に左右マージンをautoにする*/
padding-top: 12px; /*←Firefox safari用にパディングを指定*/
padding-bottom: 12px; /*←Firefox safari用にパディングを指定*/
/*残りマージン・パディングをゼロにする*/
margin-top: 0px;
margin-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
/*今回の解説には関係ないプロパティ*/
background-color: #CCCCCC;
}
.inner {
width: 300px;/*←ボックス幅を固定*/
height: auto;/*←高さは内包要素に合わせるようにautoにする*/
text-align: center; /*←内包要素の中央ぞろえ*/
margin-right: auto; /*←Firefox用に左右マージンをautoにする*/
margin-left: auto; /*←Firefox用に左右マージンをautoにする*/
padding-top: 12px; /*←Firefox safari用にパディングを指定*/
padding-bottom: 12px; /*←Firefox safari用にパディングを指定*/
/*残りマージン・パディングをゼロにする*/
margin-top: 0px;
margin-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
/*今回の解説には関係ないプロパティ*/
background-color: #CCFFFF;
}
.title {
width: 280px;/*←ボックス幅を固定*/
height: 32px;/*←タイトルは一行と割り切り高さを固定*/
text-align: center; /*←内包要素の中央ぞろえ*/
line-height: 1.9em; /*←高さを固定するためline-heightで指定。*/
margin-right: auto; /*←Firefox用に左右マージンをautoにする*/
margin-left: auto; /*←Firefox用に左右マージンをautoにする*/
/*残りマージン・パディングをゼロにする*/
margin-top: 0px;
margin-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
/*今回の解説には関係ないプロパティ*/
background-color: #FFCCFF;
}
p {
width: 260px; /*←ボックス幅を固定*/
height: auto; /*←高さは内包要素に合わせるようにautoにする*/
text-align: left; /*テキストの右揃え*/
margin-right: auto; /*←Firefox用に左右マージンをautoにする*/
margin-left: auto; /*←Firefox用に左右マージンをautoにする*/
padding-top: 12px; /*←Firefox safari用にパディングを指定*/
padding-bottom: 12px; /*←Firefox safari用にパディングを指定*/
/*残りマージン・パディングをゼロにする*/
margin-top: 0px;
margin-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
}
■■■■■■■■■■■■■■■
つか、1コラムにこれだけの要素を指定しないとレイアウトフリーな環境を作れないってどうよ（汗
IE6が古くなって、切り捨てることができればもうすこし楽に指定できるようになるだろう。今は大変だが、レイアウトフリーの問題は時間が解決してくれそうである。
てかいい加減共通規格をもて。せっかくW3Cがあるんだから各社それに従ってくれ。特にマイクロソフトさんよぉ(ﾟДﾟ；)
でもIE6を切り捨てられるまで、どんだけかかるんだろ・・・。