スタイルシートで段組レイアウト
一般コンピュータの方は、まず、このページの表示スタイルを「for Office(100％幅)」や「for 小画面(メニュー無)」に切り替えたり戻したりしてみて下さい。今からこの段組レイアウトの話をします。
「微ニ入ルソウル」はCSS（カスケーディング・スタイル・シート）を使ってページのデザインをしています。興味がある人もいると思うので、その仕組を説明しておきます。（2010年2月現在のデザインについて）
▲これが「微ニ入ル」の初期設定デザインです。
パート別に色分けしてみました。
- ヘッダ部分 … 「微ニ入ルソウル」というサイト名とメニュー、検索窓などが入ります。
- コンテンツ部分 … タイトルや本文、写真などが入ります。
- フッタ部分 … 広告、連絡先や(C)情報などが入ります。
§1 準備
htmlファイルを書く際に、各部分のidを<div id="header"></div>のように指定しておきます。
つまり、
<body>
<div id="header">
ヘッダ部分
</div>
<div id="contents">
コンテンツ部分
</div>
<div id="footer">
フッタ部分
</div>
</body>
のように書くわけです。
§2 初期設定レイアウト
微ニ入ルソウルの初期設定レイアウトは全ての部分が固定幅です。
ヘッダ部分162px、その右にコンテンツ部分580px幅、下段にフッタ部分750px幅。
これは簡単です。
body {width:760px;}
header {float:left; width:162px;}
contents {float:left; width:580px;}
footer {width:750px; clear:both;}
段組をスタイルシートで実現させるには通常floatを使います。float:leftを指定すると、そのブロックは左側に配置され、その次のブロックは右側に回り込みます。
フッタ部分は回り込んではいけないので、clear:left;（またはclear:both;）と書いて回り込みを解除します。
これをしておかないと、画面の広いモニターではフッタがコンテンツの右に来てしまいます。（まあ、body幅を指定しているので右に来ないとは思いますが、コンテンツの下に来たりもするので回り込みは解除しておくべき。）
§3 左ヘッダで100％幅
ヘッダ部分が162ピクセルで、残りの右側全てがコンテンツ部分になるレイアウト。
閲覧者がこのレイアウトを希望した場合は、§2の初期設定デザインのスタイルシートを読んだ後に選択スタイルシートを読ませます。あとから読んだ選択シートの設定内容が優先されます。
body {width:100%;}
header {float:left; width:162px;}
contents {float:none; margin-left:162px; width:auto;}
これでOKであるはずなのですが、コンテンツ部分に入れ子でfloatがある場合、floatの解除でいやな現象が発生します。
写真2枚とタイトルを並べる所をfloatで処理しているのですが、このfloatを解除する時、上のように、文章が始まるべき位置に文章が来ず、無意味な空間が生じてしまうのです。
§2の固定幅の時はこの現象は生じませんでした。なぜ§3の場合にこの現象が生じるのか謎ですが、そもそもfloatを使用する場合はブロックの幅を明確に指定しなければならないそうなので、コンテンツ部分でauto指定をしていることに無理があるのかもしれません。いずれにしてもこれはちょっとツライので、次の方法を使います。
§4 左ヘッダで100％幅：absoluteを使う方法
選択スタイルシート
body {width:100%;}
header{float:none; width:162px; position:absolute;}
contents{float:none; width:auto; margin-left:162px;}
footer{width:auto; clear:both;}
初期設定シートで設定した内容を打ち消して新しい設定を書きます。
ヘッダ部分をabsoluteにすると、ヘッダ部分とコンテンツ部分が同じ場所に配置されます。
文字がかぶらないようにcontentsの左にマージンをとります。
この§4の方法はある意味裏技的な方法なので変な所も出てます。例えばコンテンツ部分のある部分を範囲選択しようとすると次のようになってしまいます。（Chromeの場合です。IEは大丈夫のようです）
しかし、コピー＆ペーストは正常に出来るし、100％幅表示の魅力には勝てないので、この程度の不都合は我慢することにします。
§5 上段ヘッダ、100％幅
段組を使わず、全てのブロックを100％幅で並べるレイアウト。
閲覧者がこのスタイルを希望した場合は、§2の初期設定デザインのスタイルシートの次に選択スタイルシートを読ませます。
各部分を
body {width:100%;}
header {float:none; width:auto;}
contents {float:none; width:auto;}
footer {width:auto;}
の要領で指定すればOKです。
参考サイトなど
- CSSによる崩れない段組 … 私はこのページを参考に「左メニューで100%幅」のスタイルシートを作りました。
スタイルシートは何枚でも使えるので、次のようなことが出来ます。
基本はbase.cssで左メニューにしておいて、画面を左右に広く使いたいページではbase.cssの他にwide.cssというシートを読ませることにします。これで、左メニューを画面からなくしたり、上段メニューに変更することができます。背景色などはbase.cssに書かれているので、レイアウトが変わるだけでサイトの統一感は保たれるわけですね。
[2010-02]
【追記】SEO対策
SEO対策としては、本文を先に書いて、メニューは後に書いた方がいいそうなので、書き換えました。
メニューはヘッダ部分に入れていましたが、これをフッター部分に移します。
そして、スタイルシートを次の様に変更。
body {width:760px;}
header {float:left; width:162px;}
contents {float:right; width:580px;}
footerのうちメニュー部分 {float:right; width:162px;}
footerのうち広告、連絡先や(C)情報部分 {width:750px; clear:both;}
ヘッダファイル、フッタファイル、メインスタイルシートだけ直せばOK。但し、トップページはメニューを先に書くのでスタイルシートでトップページのメニュー部分、コンテンツ部分は{float:left;}に指定しておきます。[2010-03]
【追記】範囲選択を正常化
次のようにメニュー部分に
div#navigation{float:left;width:200px;margin-left:-100%}
と「float:left;」にしておいて「margin-left:-100%」を指定すると範囲選択が正常にできるそうですが、上手くいきませんでした（挙動が不安定）。
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#wrapper{float:left;width:100%}
div#content{margin-left:200px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{clear:left;width:100%}
出典：Layout31 [2011-12]
