Lesson 07 ヘッダーとフッターの位置固定 - Webデザイン表現&技法の新・スタンダード・レイアウト編

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

Lesson 7

ヘッダーとフッターの 位置固定

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

Webページはウィンドウ幅の変化によって一部が隠れたり、空白ができてしまうことがある。特にフッターの下部は、コンテンツ量が少ないと余白が生まれがちだ。これは絶対配置のテクニックを使うと回避できる。

Webページは、紙媒体のように1つのフォーマットで完結しないため、柔軟なデザイン設計が必要になる。XGA（1024×768ピクセル）ディスプレイとUXGA（1600×1200ピクセル）ディスプレイでは、1ページに表示できる情報量がまったく異なる。ブラウザのウィンドウを広げたり、狭めることで調整できるが、ページのデザインにも工夫が必要だ。ここではフッタ ーの固定配置とヘッダー領域で表現する柔軟性の高い見出しについて解説する。まず、デフォルト表示のページを見てほしい。大見出し、中見出し、小見出しそれぞれに画像を使用している【1-1】。


【1-1】ヘッダー領域内の大見出し（eBookstore）、中見出し（commonstyle）、小見出し（BOOKSTORECONTENTS）は画像で表現されている

このWebページは、ヘッダー領域（id名はheader）、コンテンツ領域（id名はcontentGroup）、フッター領域（footer）の3つで構造化されており、ヘッダー領域に3レベルの見出し画像が配置されている。大見出しと中見出しの画像は、アルファチャンネル付き透過PNG形式で半透明になっている（パターン背景の上に配置すると下のパターンが透けて見える）【2-1】【2-2】。


【2-1】

【2-2】

【2-1】【2-2】div要素（<div id="header">～</div>）で、h1要素、h2要素、h3要素（マークアップされた見出し画像）をグループ化

ヘッダー領域、コンテンツ領域、フッター領域は、<div id=" outerGroup">～</div>でグループ化されている。ここで、全体の幅を650ピクセルに指定する（width:650pxを記述）【3-1】【3-2】。


【3-1】

【3-2】

【3-1】【3-2】構成要素全体のグループ（outerGroup）に対して、width:650pxを指定して幅を固定している

body 要素に背景画像を指定しておく（background- image:url(11_back.jpg)）。ページの上部中央にリピートなしで配置する。大見出しと中見出しの画像が透けているのが確認できる【4-1】【4-2】。


【4-1】

【4-2】

【4-1】【4-2】body要素に背景画像（background）を指定。透過PNG形式の画像は、Adobe Photoshopなどの画像処理ソフトで作成できる

中見出し、小見出しの画像の間隔は、上方向のマージン（margin-top）で指定。ポイントは、マイナス値のマージン「ネガティブマージン」を使用する点だ。中見出しに対しては、margin-top:-60px（マイナス60ピクセル）【5-1】、小見出しにはmargintop:-34px（マイナス34ピクセル）を指定している【5-2】【5-3】。


【5-1】

【5-2】

【5-3】

【5-1】【5-2】【5-3】マージン（margin）にマイナス値を指定するネガティブマージンを利用することで、構成要素同士の重なりを表現できる

ネガティブマージンを使うメリットは、画像の重なりを表現できることだ【6-1】【6-2】。
なお、テキストズーム機能で文字サイズを小さくするとページのコンテンツ領域は縮小し、ページ下部に空白ができることがある。この場合はネガティブマージンをem単位で指定すると（margin-top:-6emなど）、見出しの間隔が広がり、コンテンツ領域を下に押し出す。文字サイズが小さくなってもページ全体の高さはあまり変わらないので、ページの内容によっては有効だ。


【6-1】

【6-2】

【6-1】【6-2】argin-top:-110pxを指定して画像を重ねたところ。また、「margin-top:-6em」のように単位をemに変えて指定すると、ブラウザのテキストズーム（文字サイズの変更）と連動して、間隔が調整される

フッター領域をページの最下部に固定するテクニックも効果的だ。フッター領域が絶対配置によって常にページの下に表示されるため、下部に空白ができる心配がなくな る。ただし、少々複雑なスタイルを記述す ることになる。Webページのメンテナンス 性は低下してしまうので、採用する場合は 十分検討しておこう【7-1】【7-2】。


【7-1】

【7-2】

【7-1】【7-2】まずhtml、body要素に「height:100%; overflow:auto;」を指定して高さの値を変更。コンテンツ全体の領域（outerGroup）で「position:relative;」を記述して座標の基点を設定、フッター領域で絶対配置「position:absolute;」を指定する

フッター領域が常にページの最下部に固定される。前述した見出し画像の間隔をネガティブマージン（em指定）で調整可能にするテクニックも併用すると、柔軟性の高いページになる【8-1】【8-2】。


【8-1】

【8-2】

【8-1】【8-2】パソコンのディスプレイはワイド画面が増えているため、横長のページレイアウトが適しているが、モバイルデバイスなどは縦向きが主流なので、どうしても柔軟な設計が必要になってくる