忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[9] [8] [7] [6] [5] [4] [3] [2

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

3段組(メインコンテンツ・リキッド)レイアウトの作り方

このブログは3段組で、メインコンテンツの幅が可変のレイアウトになっています。
下記のサイトを参考にさせていただいて、このブログで用いているレイアウトの解説をしたいと思います。

参考サイト:CSS-EBLOG

2008/6/8 追記
IE6標準モードでは表示がうまくいかない可能性があります。
詳細はこちらで。


1.ボックスを作ります。

3段組にしたいので、幅が可変のメインコンテンツボックスと、両端の幅固定メニューボックスを作ります。(全部で3つ)

メインコンテンツを入れるボックスです。
←左側のメニューになるボックスです。
右側のメニューになるボックスです。→

この状態だと、すべてのボックスがウィンドウサイズに応じて伸び縮みしますね。
ボックスに中身を入れていない場合、高さを指定しないとボックスの存在が分かりにくくなるので、height: 100pxを指定しています。
これは解説するために指定したものなので、本来は必要ありません。



2.メニュー用のボックスに幅を指定します。

ここでは例として幅200pxに指定しています。

メインコンテンツを入れるボックスです。
←左側のメニューになるボックスです。
右側のメニューになるボックスです。→

メニュー用のボックス(下二つ)は、幅が固定されています。ウィンドウサイズを変えても変化なし。



3.floatを使って、コンテンツを回り込ませます。

3つのボックス全てにfloat: left;を指定しました。

メインコンテンツを入れるボックスです。
←左側のメニューになるボックスです。
右側のメニューになるボックスです。→
 

clear: both;でfloatを解除するのもお忘れなく。
メインコンテンツ(ピンク色)が押しつぶされていますね。幅が固定になってしまいました。
floatプロパティを使う際は、一緒にwidth(幅)の値も指定しないと、動作がおかしくなってしまいます。
でも、幅を指定したらリキッドレイアウトは不可能になってしまいます。ああ、悲しきジレンマ。

ここであきらめてはいけません。次で解消法をご紹介します。



4.メインコンテンツを、新たなボックスで囲みます。

メインコンテンツを、divでさらに囲み、囲んだボックスに対して、幅100%ととfloatを指定します。
メインコンテンツのfloat:leftは消します。

メインコンテンツを入れるボックスです。
←左側のメニューになるボックスです。
右側のメニューになるボックスです。→
 

floatの意味がなくなってるじゃないか!幅100%にしたら、回り込んでくれないじゃないか!
そのとおりですね。分かってます。焦らず次に進みましょう。



5.メニューコンテンツにマージンを指定します。

これがいわゆる魔法のマージン。左メニューには、margin-left: -100%;を(この数値は固定です。)、
右メニューには margin-left: -200px;(これは、右側のメニューで指定した幅と同じ)を指定します。
マイナスで指定するマージンなので、ネガティブマージンと呼ばれることもあります。

メインコンテンツを入れるボックスです。
←左側のメニューになるボックスです。
右側のメニューになるボックスです。→
 

いかがでしょうか。3段組で表示されてますか?
「メインコンテンツを入れるボックスです」の文字が、左メニューのボックスの後ろに隠れています。最後にここを直しましょう。



6.メインコンテンツにマージンを指定します。

両側のメニューコンテンツと表示が重ならないよう、左右にメニューと同じ幅のマージンを取ります。

メインコンテンツを入れるボックスです。
←左側のメニューになるボックスです。
右側のメニューになるボックスです。→
 

いかがでしょうか。これで完成です!
唯一の欠点は、IE6の場合に両端のメニューの幅よりもウィンドウが小さくなるとレイアウトが致命的に崩壊することです。
最小幅、最大幅をcontentに指定しても良いかもしれませんね。

2008/6/8 追記
itochan様によりこの表現の間違い・語弊が発覚。
最小幅・最大幅は、この完成したリキッドレイアウト部分を新しいdiv要素で囲み、そこにCSSでmin-widhとmax-widthを指定してください。
IE6以下ではmin-widhとmax-widthに対応していませんので、minmax.jsというJavascriptを使います。これを使うと、最大幅・最小幅を指定することができます。(IE5,6確認済み)
ただし、IE6標準モードでは表示がうまくいかない可能性があります。
詳細はこちらで。


以上、3カラムリキッドレイアウトをお送りいたしました。

 

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
最小幅、最大幅
>最小幅、最大幅をcontentに指定しても良いかもしれませんね。

やりかたがわかるのであれば、ぜひ教えてください。
(もちろんInternetExplorerを含む。)
itochan URL 2008/06/08(Sun)04:10:49 編集
RE:最小幅、最大幅
>itochan様
コメントありがとうございます。
最大値・最小値を指定することは可能です。

方法としましては、
リキッドレイアウトのコンテンツ全体をDivで囲み、min-widthとmax-widthを指定します。

IE6ではmin-widthとmax-widthに対応していませんので、Javascriptを使って制御します。
わたしはminmax.js、というJavascriptを使っています。
すさまじく簡略化して書くと、

<html>
<head>
<script type="text/javascript" src="minmax.js"></script>
</head>
<body>
<div style=" min-width: 700px; max-width: 900px;">
<div class="content">
<div class="main">
メインコンテンツを入れるボックスです。
</div>
</div>
<div class="left">
←左側のメニューになるボックスです。
</div>
<div class="right">
右側のメニューになるボックスです。→
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>

というふうになります。
例示のHTMLを作って、そこへリンクを貼るようにしておきますね。

また、最後になってしまいますが
>最小幅、最大幅をcontentに指定しても良いかもしれませんね。
という文章は間違いでしたね…。申し訳ありません。すぐに修正させていただきます。

さらに追加になってしまうんですが、
Javascriptを指定しても、IE6の標準モードだと表示がうまくいかないようです。
yu-ri 2008/06/08(Sun)08:52:05 編集
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
04« 2017/05 »06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
ブログ内検索
忍者ブログ [PR]