2005年2月13日
IEでもFirefoxでも崩れない段組みを作ろう
というわけでこの前書いた、CSSで段組みを作ろう
の続きというか、改良です。
いやー、Firefox対応となると難易度がバカみたいに上がりました。
今回、参照としたサイトがこちら→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解釈を取り入れるとめちゃくちゃややこしいことになりそうです。いい加減早く統一というか一元化してほしいものです。
なんかめちゃくちゃ疲れた～～～～。
投稿者 mak : 15:15 | コメント (3) | トラックバック
2005年1月16日
CSSで段組みを作ろう
というわけでtableを一切使わずにCSSだけで表を作ろうということです。
基本はこちらを参照してください。
スタイルシートだけで段組を作る - ［ホームページ作成］All About
で、こちらが今回作ったサンプルページです。
Pegasus' Wingのリンクページ
基本となるソースは以下の部分です。
<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">
</A></DIV>< DIV class="block_center">[mak] < BR>
< A href="http://www.sh.rim.or.jp/~kazunori/"> Pegasus' Wing </A> </DIV>< DIV class="block_right">キッチン大往生(STG) < BR>
易☆☆☆★☆☆☆難</DIV>< DIV class="block_bottom">(ここにコメントが入ります）</DIV>
</DIV>
サンプルとして俺のページを
えーっと、大外は< DIV class="block_main">で、その中に< DIV class="block_left">、< DIV class="block_center">、< DIV class="block_right">、< DIV class="block_bottom">とあります。
*************************************************************************************
で、各内容ですが、まずはblock_leftから
.block_left{
width : 250px;
height : 40px;
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;
padding-top : 2px;
padding-bottom : 2px;
}
Leftはバナーを貼り付ける所なので基本的に高さを40pxとします。で、周りを太さ1pxの線で囲み、色をつけます。このとき、topとleft、bottomとrightに同じ色を付けると立体的に見えます。
後、背景色、 background-colorは白にしておきます。ここで色を指定しないとhtml自体の背景画像が透過します。で、paddingですがこれは線の内側の余白の太さを指定します。これは元の高さ(40px)に余裕が無いときは加算されます。つまりここでpadding-left :2pxと書いても左右には余裕がある為、実質なんの役にも立ちません。
つまり、この状態では一番外の枠は幅が250px、高さは46px(画像40px+余白2×2px+線2×1px)となります。
なお、floatについては上のページを参照の事。
続いてblock_center
.block_center{
width : 185px;
height : 46px;
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;
padding-top : 8px;
margin-left : 1px;
margin-right : 1px;
text-align : center;
}
基本的にはleftと同じですが、ちょっと違うのが高さが46pxと初めから指定してあること。ここは基本的に文字しか入らないのであらかじめ高さを固定しておきます。
あと、ここでのpadding-topの意味は上から8px下げて文字を置け、ということです。これがないとかなりバランス悪いので。
でもって、marginですが、これはpaddingと逆で、線の外側の余白となります。この場合左右にそれぞれ1pxずつ余白を指定しています。
で、text-alignはテキストを左詰め、右詰め、センタリングに指定するものです。
ここでは一番外の枠は幅が185px、高さは46pxとなります。
で、お次はright
.block_right{
width : 165px;
height : 46px;
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;
padding-top : 8px;
text-align : center;
}
基本的にcenterと全く同じです。これで一番外の枠は幅が165px、高さは46pxとなります。
さて、この3つの枠を並べると何pxになるでしょうか?
250+185+165=600!!! と思った人・・・・、残念!!!!
正しくは250+185+165+2=602となります。この2とは、centerで指定した余白部分です。
*************************************************************************************
まだまだ行きますよ、次はbottomです。
.block_bottom{
width : 602px;
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;
margin-top : 1px;
padding-top : 2px;
padding-bottom : 2px;
}
今まで書いたことが大体出てきてますねぇ。
まず幅は上で書いたように602px。clearは一番上の参照ページを見て下さい。margin、つまり余白は上に1pxです。後、paddingを上下に設定することで上と下に余裕を持たせてます。
これで完成ですが、欠点が1つ。< CENTER>タグで真ん中に持ってきたいと思っても上の3つの枠がうまく真ん中にこないんですねぇ。
そこで解決法、もう一つ大きな枠でこの4つの枠を囲もう、ということで作ったのがこのmainです。
.block_main{
width : 606px;
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;
}
えー、幅を606pxとします。で次に上下左右にpaddingを設定します。で背景を白にします。
そもそもの枠の幅は先ほど書いたように602pxで、さらにそれに余白を左右に1pxづつ、加えて枠の線がそれぞれ1pxで計606pxとなります。
ただ単に< CENTER>タグを有効にしたいだけならおそらくwidthとborder-width: 0px 0px 0px 0px;で十分だと思います。
*************************************************************************************
長々と書きましたが、これでPegasus' Wingのリンクページの様な表が出来上がります。まだまだ工夫をすれば多段の表や縦のぶち抜きの表なども可能です。それについてはまた各自で調べて下さい。
htmlもかなりみやすくなったし、よかったよかった。
疲れた～～～～。