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

で、こちらが今回作ったサンプルページです。
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もかなりみやすくなったし、よかったよかった。
疲れた～～～～。