Webデザイン |
Lesson 4 | ウィンドウの幅にあわせて 可変するリキッドレイアウト |
制作・文 | 境 裕司 | |||
> | To Use | CSS | ||
> | Browser | IE 7over | Firefox 3over | Safari 4over |
リキッドレイアウト(Liquid Layout)は、ページの幅をピクセル値などで固定せず、ウィンドウの幅にあわせてテキストや画像を柔軟に再レイアウトする仕組みだ。 |
01
【1-1】
【1-2】
【1-3】サンプルの構成は、ヘッダ+コンテンツ(サブコンテンツ+メインコンテンツ)+フッタ
02
【2-1】
【2-2】
【2-1】【2-2】コンテンツ全体の幅を80%、サブコンテンツの幅を25%(さらにfloatの指定)、メインコンテンツの左マージンを28%にする
03
【3-1】
【3-2】
【3-1】【3-2】サブコンテンツ(#leftColumn)とメインコンテンツ(#content)のCSSソース
04
【4-1】
【4-2】
【4-1】【4-2】フロート処理を解除するための記述(ここでは、br要素を使用)
【4-3】
【4-4】
【4-3】【4-4】サンプルのブラウザ表示。ウィンドウの可変に対応してコンテンツの幅も調整される
05
【5-1】
【5-2】
【5-3】
【5-1】【5-2】【5-3】3段組みの場合は、ヘッダ+コンテンツ(左のサブコンテンツ+右のサブコンテンツ+メインコンテンツ)+フッタで構成する
06
【6-1】左から、左側のサブコンテンツ(#leftColumn)、右側のサブコンテンツ(#rightColumn)、メインコンテンツ(#content)のCSS ソース
【6-2】
【6-3】
【6-2】【6-3】フロート処理を解除するための記述とブラウザによるプレビュー