SoraKazeBlog -今日も風は空を舞う-

今回、参照としたサイトがこちら→IEでもFirefoxでも崩れないレイアウト :: TextOcean

で、こちらが今回改良したサンプルページです。
Pegasus' Wingのリンクページ

まず、最初にこの一文を記述します。

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd" >

これをhtmlファイルの先頭に記述します。
上の参照のページに書いてるんですが、これを記述することでIEやOperaをFirefoxでのCSS解釈で表示させる、つまりIEやOperaをFirefox化してしまうことが出来るみたいなんですね。
なぜこういうことをさせるのかは後で書くとして・・・。

まず、ここが基本のソースとなります。

< CENTER>
< DIV class="block_main">

< DIV class="block_left">
< A href="http://www.sh.rim.or.jp/~kazunori/" target="_blank">
< IMG src="http://www.sh.rim.or.jp/~kazunori/banner.gif" border="0" width="200" height="40" class="link_left">
</A></DIV>

< DIV class="block_center"> < P class ="link_center"> [mak] < BR>
< A href="http://www.sh.rim.or.jp/~kazunori/"> Pegasus' Wing </A> </P> </DIV>

< DIV class="block_right"> < P class ="link_center"> キッチン大往生(STG) < BR>
易☆☆☆★☆☆☆難 </P> </DIV>

< DIV class="block_bottom"> < P class ="link_left">(ここにコメントが入ります） </P> </DIV>

</DIV>
</CENTER>

えー、この前と比べて変わったのは、
1，まず< CENTER >タグが一番外側についた。
2，< IMG>タグの中にclass ="link_left"を追加。
3，文章に< P class ="link_center"> 、< P class ="link_left"> を追加。
この3点です。もちろん、前回書いたタグの内容も変わってます。

*************************************************************************************
で、各内容ですが、まずはblock_leftから

.block_left{
width : 250px;
height : 44px;
float : left;
background-color : white;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-top-color : gray;
border-right-color : silver;
border-bottom-color : silver;
border-left-color : gray;
margin-right : 2px;
margin-bottom : 2px;
}

さて、一番の大きな違いはpaddingを記述してないということです。
これは上の参照ページにも書いてますがpadding（内側の余白） + border（枠線の幅）+ height（箱の高さ） = 結果的なheightと計算するのがFirefoxであり、padding + border + 内容 = heightとするのがIEです。
で、Firefox式CSS解釈でいこうとすると、この場合実際の枠の一番外(枠線も含めた)の高さは46pxとなります。まず、paddingは0px(記述されてないので)、borderは1px*2、heightは44px(箱の高さ)、というので計46px(結果的なheight)となります。
つまり、このblock_left内でpaddingを記述しないで中のコンテンツに対してpaddingと逆のmarginを記述しないといけないのがFirefoxなんですね。(padding・・・内側への余白　margin・・・外側への余白)

では、中のコンテンツである、< IMG>タグの中にclass ="link_left"はどうなっているかというと、

.link_left{
margin-top : 2px;
margin-bottom : 2px;
}

至って普通ですが、画像の上下に2pxの余白を設定してます。もともとの高さ、heightが44pxなのでちょうど真ん中に画像が来たことになります。これでFirefoxではきれいに表示されますが、IEでは変な画面になります、それを修正するのがhtmlファイルの先頭のあの1文となります。

それと、少し話が前後しますが、block_left内にmargin-right、margin-bottomが記述されています。margin-rightで右にある枠との間に隙間を作り、margin-bottomで下の枠との間に隙間を作成します。
参照ページに書いてある通り、floatの方向にmarginを書くと表示がへんになる、この場合だとfloatの方向がleftなのでmargin-leftと書くと表示がへんになります。その解決策として、前はblock_centerに書いてたmargin-leftを消して、block_left内にmargin-rightを記述します。

*************************************************************************************

さて、以下これを繰り返していけばいいのです。お次はblock_center。

.block_center{
width : 185px;
height : 44px;
float : left;
background-color : white;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-top-color : gray;
border-right-color : silver;
border-bottom-color : silver;
border-left-color : gray;
margin-right : 1px;
text-align : center;
font-size : 12px;
}

基本はleftと同じですが、margin-bottomが書いてません。まぁ書いてもいいのですが省略しても表示に影響は出ません。それとFirefox式CSS解釈で一番重要なのはheightを揃えるということです。上に書いてるleftとheightが同じです。これをしないとFirefoxでは同じ高さの枠を表示しれくれません。
後、font-sizeも指定しています。まあ単純に見た目をきれいにするためです。
それとmargin-rightは上のleftと同じく左への隙間を作る為のものです。

ここのコンテンツに対するmarginの指定ですが、

.link_center{
margin-top : 9px;
}

まあ前と同じで上から9px下げて文字を置いてます(バランス的に9px下げた方がきれいに見えるので)

で、お次はright

.block_right{
width : 165px;
height : 44px;
float : left;
background-color : white;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-top-color : gray;
border-right-color : silver;
border-bottom-color : silver;
border-left-color : gray;
text-align : center;
font-size : 12px;
}

基本的にcenterと同じです。centerと違うのはmargin-rightが必要ないところぐらいです。

*************************************************************************************
さて、これで3つの枠ができあがりました。この3つの枠を並べると何pxになるでしょうか。Firefox式CSS解釈でお答え下さい・・・・。

答えは、608pxとなります。
まず、leftが250pxですが上に書いた様にborderを考慮すると+2px、そしてmargin-rightで1px。
次にcenterで185px+borderで2px、さらにmargin-rightで1px。
そしてrightで165px+borderで2px。
合計すると250+2+1+185+2+1+165+2=608pxです。

ではbottomの幅を608pxと書けばいいのかというと、またここでさっきの式を思い出しましょう。初めからbottomではborderが指定されています。つまり左右のborder分2pxをここから引かなければなりません。よってbottomのwidthには606pxと書く必要があります。

ではbottomです。

.block_bottom{
width : 606px;
clear : both;
background-color : aqua;
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-top-color : gray;
border-right-color : silver;
border-bottom-color : silver;
border-left-color : gray;
text-align : center;
font-size : 12px;
}

というわけで、widthは606pxに。それ以外はcenterやrightと基本的に一緒です。
あと、ここの文章にはclass ="link_left"というのをつけてます。これはIMGタグについてたもので上下に余白を2pxとります。まぁ、流用ですね。

でもってお次は一番外の枠、mainです。

.block_main{
width : 608px;
background-color : white;
border-style : solid solid solid solid;
border-color : silver gray gray silver;
border-width : 1px 1px 1px 1px;
padding-top : 1px;
padding-left : 1px;
padding-right : 1px;
padding-bottom : 1px;
}

なぜかここでpaddingを使ってます。これ以外にうまい解決法が見つからなかったので。でも結局これでうまく表示されます、なんでかはもうわかりません。
で、ここでの幅が608pxになります。おわかりのようにこのwidthは内容、つまりこの例で言うところのbottom、あるいは上の3つの枠の全体の大きさです。

これだけだと、なぜかFirefoxでは中央に表示されないので全体を強制的に中央に持ってくる為に< CENTER >タグを利用しました。

*************************************************************************************
長々と書きましたが、これでPegasus' Wingのリンクページの様な表が出来上がります。しかもFirefoxでもきちんと表示されます。まだまだ工夫をすれば多段の表や縦のぶち抜きの表なども可能だとは思うんですが、正直Firefox式CSS解釈を取り入れるとめちゃくちゃややこしいことになりそうです。いい加減早く統一というか一元化してほしいものです。

なんかめちゃくちゃ疲れた～～～～。