基本レイアウト

縦長レイアウト

説明

header
contents
footer

ページのタイトル・本文をそのまま下に記述していくレイアウト。構造を順番通りに書くことができるので、わかりやすく取り組みやすいです。トップページとしても使うこともできますが、各ページに使うことが多いでしょう。ちょうどこのページのようなレイアウトになります。

長所

わかりやすい。
構造を把握しやすい。
簡単にHTMLの構造を表せる。

短所

単一なレイアウトになりやすい。
情報がどこにあるかがわかりにくい。
コンテンツが多い場合、かなりの長さになってしまう。

補足

単純に要素を並べるだけでもよいのですが、CSSでデザインを整えやすくするために、ヘッダー部分・コンテンツ部分・フッター部分をdiv要素で囲むことが良く利用されます。それぞれを囲むことによって、背景を変更したり、文字の大きさを変えたりと違ったデザインに容易に変更することができます。

サンプル

サンプルページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 #header {width:640px; margin:0 auto; border:solid 2px #cccccc;}
 #contents {width:640px; margin:0 auto; border:solid 2px #cccccc;}
 #footer {width:640px; margin:0 auto; border:solid 2px #cccccc;}
 -->
 </style>
</head>

<body>
 <div id="header">
  <h1>サンプルページ</h1>
  <p><a href="lay01.html">トップページ</a> ＞ サンプルページ</p>
 </div>
 <div id="contents">
  <h2>コンテンツタイトル</h2>
  <h3>サブコンテンツタイトル</h3>
  <p>サブコンテンツタイトルについての説明。</p>
 </div>
 <div id="footer">
  <p>Copyright...</p>
 </div>
</body>

</html>