ヘッダーとフッターを加えた段組レイアウト：シルバーアクセサリー屋の知ったかぶり

ヘッダーとフッターを加えたカラムレイアウト

メニューと本文だけではホームページのレイアウトとしては少し物足りないので、 ヘッダーとフッターをつけてホームページの見栄えをさらに良くしましょう。

図のようにメニューと本文を左右に分けて、上下にフッターとヘッダーをつけたものが ホームページの定番レイアウトの1つとして多くのサイトで採用されています。 ヘッダーやフッター部分に画像を用いたバナーなどを配置すれば、ホームページの見た目も華やかな印象になります。

HTMLのソースを簡略化すると、
<div id="head">ヘッダー</div>
<div id="menu">メニュー</div>
<div id="contents">本文</div>
<div id="foot">フッター</div>
となります。

スタイルシートは
#head{height:(ヘッダーの高さ);}
#menu{position:absolute; top:(ヘッダーの高さ); left:0px; width:(メニュー幅);}
#contents{margin-left:(メニュー幅);}
となります。

こうしてソースだけ見ると、ややこしい感じがするかもしれませんが、 スタイルシートを使わなくても、ヘッダー、本文、フッターの並び順は上から下へとなっているわけですから、 基本的に触る必要はないわけです。 要は、スタイルシートを使ってメニューの位置を本文の左へ移動させているだけです。 スタイルシートを書き換えれば、HTMLを書き換えずともメニューを本文の右側へ持ってくることも出来るわけです。

absoluteを使うと絶対位置での指定ですから、HTMLソース内のメニューの位置はどこでもいいわけです。 パソコンではスタイルシートを使えば常にメニューは左側に表示されますが、 スタイルシートに対応していない携帯電話などでアクセスすると、 ページを移動するたびに毎回メニューを見せられますから煩わしかったりします。

absoluteを使うことでメニューをHTML内の本文の下や、フッターの下へも置けるわけです。 検索エンジンの中には、HTML内の上部にあるテキストをより重視するものもあるので、 本文をHTML内のより上部へ置くことは多少なりとも検索エンジンへのアピールにも繋がるわけです。

ただ、absoluteを使う上で1つだけ気をつけなければならないのは、 メニューが本文よりも縦に長くなってしまった場合は、 メニューの下の部分がフッターに重なってしまいます。 その場合は、行間やマージンなどを調節して本文をメニューより長くするか、 いっそのことフッターを無くしてしまうのも1つの手です。

スタイルシートを使えば、 ユーザビリティや検索エンジンへの効果、シンプルなHTMLソースとメンテナンスのしやすさも実現できるわけです。 スタイルシートを使ったホームページのレイアウトと、HTMLのテーブルやフレームを使ったレイアウト、 あなたはどちらでホームページのレイアウトをしますか？
スタイルシートの本

<<段組レイアウトの基本

ホームページ作成のテツガクは、シルバーアクセサリー屋XIPが趣味で作ったサイトです。(c)2006