> >

３段組ブログサイトのレシピ。

サイト改造進行中のJunです。

３段組レイアウトをCSSで実現しようと他ブログサイトの情報収集に当たっていたところ、あちらこちで「HINAGATA 」さんのバナー発見。参考になりそうな３段組テンプレート「HINAGATA-3column」を配布していたので早速入手。（現在は本家サイトでの配布休止。インターネットマガジン から入手可能）

このテンプレートを使ったブログサイト、SarariなどのMac用ブラウザで見たとき、ある条件でレイアウト崩れます。
Win環境を持っていないので確認できないのですが、同様の問題があるかも知れません。

悩みに悩んだ末、（多分）うまくいく方法を編み出しました。
このエントリーでは、３段組ブログサイトのレシピを伝授しましょう。
HINAGATA-3columnを利用中の方、そして３段組のレイアウトをお勉強したいアナタ、必見です。


HINAGATA-3columnの基本中の基本
（サンプル１→ ）
image （キャプチャー画像１）

HINAGATA-3columnが３段組を実現する方法を忠実に守りつつ、テンプレートを絞りに絞って作ったサンプルです。上部と下部にバナー(banner)とフッター（footer）、中央に３段組（左から順にleft, center, rightの各カラム）が配置されている典型的な３段組ブログサイトのレイアウトをCSSで実現しています。
なお、このエントリーでは、オリジナルテンプレートと異なる（分かりやすい）スタイル名称を使用して解説しています。

サンプル１では、全体の幅が600px、left, center, rightの各カラムの幅が200pxになるようにCSSを設定しています。
簡単に仕組みを説明すると、全体で幅600pxのブロックを作り、200px幅のleftを左にフロートさせ、200px幅のrightを右にフロートさせ、左右のブロックの隙間（幅200px）にcenterが入り込むように、centerの左右のmarginを各200pxずつ取っています。
なお、このようにCSSを設定した場合、各カラムのHTMLコードを読み込む順番に制約があります。必ずcenterの部分のHTMLコードを３番目に読み込まなければなりません。つまり、left, right, center、あるいはright, left, centerの順番です。
#all {
background: white;
margin-right: auto;
margin-left: auto;
width: 600px;
}

#left {
background: yellow;
float: left;
margin: 0px;
width: 200px;
}

#right {
background: lime;
float: right;
width: 200px;
margin: 0px;
}

#center {
background: olive;
margin-left: 200px;
margin-right: 200px;
}

サンプル１は、（おそらく）どのブラウザで見てもキャプチャー画像１のようにきれいな３段組レイアウトを保っていると思います。
（もしダメなブラウザがあるのであれば教えてください。）



レイアウトが崩れる条件
（サンプル２→ ）
image （キャプチャー画像２）

centerの部分に複数のエントリーを配置するのがブログサイトの典型的なパターンだと思います。
画像を貼り付けたエントリーを作成するとき、画像を左右に寄せてテキストを回り込ませるケースがありませんか？
そして、回り込みを解除するために、次のタグを記述することがありませんか？
このタグを使ったエントリーを投稿してcenter部分で表示させると、キャプチャー画像２のようにレイアウトが崩れるMac用ブラウザをいくつか確認しています。
＜br clear="all" /＞　または　＜br style="clear: both;" /＞

レイアウトの崩れを検証するために上記のタグをサンプル２の中に埋め込みました。
サンプル１とサンプル２では、唯一、line: C3の所のソースが次のように異なります。
サンプル１
line C3＜br /＞

サンプル２
line C3＜br clear="all" /＞

レイアウトの崩れを検証したブラウザ（全てMac用）です。
◎は影響を受けないブラウザ、×はレイアウトが崩れるブラウザです。
× Safari 1.2
◎ Netscape 7.1
◎ Firefox 0.8
× Internet Explorer 5.2
× Opera 7.5

状況から判断して、clearの扱いがブラウザによって異なるようです。
影響を受けないブラウザは、行の左右端がmarginの内側（幅200px）であると解釈するようです。
レイアウトが崩れるブラウザは行の左右端がmarginの外側（幅600px）であると解釈するようです。
CSSの規格について、残念ながら全く知識を持ち合わせていないため、どちらが正しいのか分かりません。
ご存じの方は是非教えてください。

このようなブラウザの解釈の違いから、HINAGATA-3columnを使ったブログサイトで回り込み解除タグを使用すると、見る側のブラウザによってはレイアウトが崩れてしまいます。leftまたはrightが縦に長ければ長いほど、centerにムダな空間が出来てしまうのです。



問題解決方法
（サンプル3→ ）

ブラウザの癖がでないように対策してみます。
そもそも、centerの左右にあるmarginがブラウザ毎の解釈の違いを引き起こしています。そこで、左右のmarginを無くしつつ、centerがうまくleftとrightの間に配置されるようCSSを変更します。
#center {
background: olive;
float: left;
width: 200px;
}

なお、このようにCSSを設定した場合、各カラムのHTMLコードを読み込む順番に制約があります。centerの部分のHTMLコードはleftの部分のHTMLコードよりも後に読み込まなければなりません。つまり、left, center, right、または left, right, center、または rignt, left, centerの順番です。

以上の対策を取ったところ、少なくとも上記のMac用ブラウザでは全てレイアウトの崩れが無くなりました。
しかし、Win用ブラウザに関しては全く検証していません。
（多分OKだと思うのですが．．．違う原因で崩れる可能性があるから100%断言できませんけど。）

ユーザ数が多いと思われるIE６を使っている皆さんにお願いです。サンプル３の表示はOKでしょうか？
その他のWin用のブラウザについても情報をいただければうれしいです。



追伸
インターネットマガジン に２段組テンプレート「HINAGATA-2column」が同時に掲載されています。ちらっとCSSを見てみたところ、やっぱりmarginを使ったスタイルで２段組を実現しているようです。ということは、同じような問題を生じるかも知れません。ただし未確認です。

［このエントリーのURL］
Posted: 2004年 4月 5日 (月) at 09:25 PM | | |