Lesson 08 構成要素の位置を固定するレイアウトテクニック - Webデザイン表現&技法の新・スタンダード・レイアウト編

2011.6.23 THU

Webデザイン
表現&技法の
新・スタンダード

Lesson 8

構成要素の位置を固定する
レイアウトテクニック

	制作・文	境　裕司
＞	To Use	CSS
＞	Browser	IE 7over \| Firefox 3over \| Safari 4over

ブラウザのウィンドウに表示されるWebページはスクロールしながら閲覧する巻き物に近い。通常は、背景画像も記事と同じようにスライドするが、positionプロパティを利用すれば固定配置が可能になる。

01

CSSを使ったページレイアウトは、フロート処理（floatプロパティによる要素の浮動化）と絶対配置（positionプロパティで座標値を指定する方法）に大別することができる。コラージュするように要素を任意の位置に配置するフリーレイアウトは後者の方法を使う。ここでは「固定配置」と「絶対配置」のテクニックを紹介しよう。サンプルページは、標準的な「ヘッダー領域（header）＋コンテンツ領域（contentGroup）＋フッター領域（footer）」で構造化され、すべての要素は＜div id="outerGroup"＞〜＜/div＞でグループ化している【1-1】【1-2】。

【1-1】

【1-2】

【1-1】【1-2】サンプルページはテキストだけで構成、画像は使用していない（装飾として配置される背景画像は使用している）

02

要素全体をまとめているdiv要素（id名：outerGroup）に対して、width:48%;margin:0 0 0 40%;を指定。左マージン40%、コンテンツ領域全体の幅48%に設定される。ブラウザのウィンドウ幅を変えても、相対的な位置は変わらない。このような可変対応のレイアウトを「動的なレイアウト」と呼ぶ【2-1】【2-2】。

【2-1】コンテンツ領域は、ページの左端から40%の位置に表示されており、コンテンツ全体の幅は、ページ幅の48%になっている

【2-2】

03

h1要素でマークアップされた大見出し（BOOKSTORE. EBOOK STRATEGY）を絶対配置する。

「position:absolute;top:16px; left:20px;」と記述。デフォルトでは表示領域の左上が基点になるため、上から16ピクセル、左から20ピクセルの位置に大見出しがレイアウトされる【3-1】【3-2】。

【3-1】

【3-2】

【3-1】【3-2】配置したい要素の親要素に対して「position: relative」を指定すれば、親要素の基点から相対的に配置す
ることが可能。サンプルの場合は何も指定していないので、デフォルト（ページの左上が基点）が適用され
ている

04

コンテンツ領域全体の基本デザインも指定しておく。絶対配置した大見出しは独立した存在になっているため、後続の要素に影響を与えない、まったく別のレイヤー上に表示されていると考えてよいだろう。ウィンドウの幅を狭めてみると、大見出しが記事の上に重なるはずだ。通常の並列的な配置ではなく、前面に表示されているイメージだ（Photoshopなどの画像処理ソフトに搭載されているレイヤーと同様）【4-1】【4-2】。

【4-1】コンテンツ領域内の見出し、本文、区切り線、リンクなどのフォント、カラー（基本デザイン）を指定

【4-2】contentボックス（画像、2つの段落、address要素を含む）の幅を760ピクセルに固定
【4-2】

05

次は、背景画像を表示領域の左下にロックする。positionプロパティの「固定配置」を使って背景画像を左下に固定し、ウィンドウの可変に対応させる。背景画像の大きさは、右上に配置されているコンテンツ領域とのバランスで決める。コンテンツの情報量が多い場合は、背景との重なりが深くなるので、見栄えはよくない。逆に情報量が少ない場合は、背景のビジュアルを広く取ったほうがバランスが良くなる【5-1】。

【5-1】サンプルで使用している背景画像の大きさは800x600ピクセル、データサイズは84KBである

06

背景画像は、body 要素に対してbackground プロパティを指定すればよい。固定配置の指定は「backgroundattachment:fixed」である。background-position:left bottomは、背景画像を左下に配置する指定だ【6-1】【6-2】。

【6-1】IE 8（左）とSafari 5（右）の表示結果。縦書き、横書き、どちらでも閲覧できるようにデザインしておくことが重要