【6日でできるHTML入門】ページレイアウトの作成①
ここからは、HTML5で導入された構造化用タグ（<header>、<nav>、<footer>など）とこれまで学んできた<div>タグ、CSSプロパティを組み合わせて、Webページ全体のレイアウトを作成する方法を解説します。特に「コンピュータの歴史」というテーマのサイトを例に、ページをウィンドウ中央に固定する手法から、ヘッダーやナビゲーション、メインコンテンツ、フッターを配置する流れを丁寧に追っていきます。
１．ページ全体を囲むコンテナの作成
素材のダウンロード
以下のリンクから画像素材をダウンロードできます。
| history-header.png |
|---|
 |
1.1. コンテナ用<div>の設置
<div id="container">…</div>でページ全体を囲む- HTMLコメントで構造を明示：
<!-- 全体を囲むdiv -->
1.2. CSSによるセンタリング
| プロパティ | 説明 |
|---|---|
| width | 固定横幅（例：700px）を指定 |
| margin:auto | 左右の外部余白を自動調整し中央配置を実現 |
| background-color | コンテナの背景色を指定（例：#FFFFFF） |
| border-left/right | 両サイドに装飾用の枠線を追加（例：5px solid #FF9933） |
#container{
width:700px;
margin:auto;
background-color:#fff;
border-left:5px solid #f93;
border-right:5px solid #f93;
}２．レイアウト用セマンティックタグの活用
2.1. HTML5タグによる領域分け
| タグ | 用途 |
|---|---|
| <header> | サイト／ページタイトル領域 |
| <nav> | ナビゲーションメニュー領域 |
| <aside> | サイドバーなど補助情報領域 |
| <footer> | フッター（著作権・連絡先等） |
2.2. <div>との使い分け
- レガシー環境では
<div class="header">などで代替 - HTML5対応時は意味的にタグ名を優先
<div id="container">
<header>…</header>
<nav>…</nav>
<div id="main">…</div>
<footer>…</footer>
</div>３．「コンピュータの歴史」サイト例
ここまでの手法をまとめ、ページ全体レイアウトのサンプルHTMLを示します。ヘッダーにはタイトル画像、ナビには主要年代へのリンク、メインには年表、フッターには著作権表記を配置しています。
ファイル名： lesson26.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>💻 コンピュータの歴史</title>
<style>
* { margin:0; padding:0; }
body { background:#ccc; }
#container {
width:800px; margin:auto;
background:#fff; border:3px solid #333;
}
header {
height:460px;
background:url("history-header.png") no-repeat center;
}
#title { padding:380px 20px 0; color:#fff; font-size:32pt; }
nav ul { list-style:none; background:#444; }
nav li { display:inline-block; }
nav a {
display:inline-block; padding:10px 15px;
color:#fff; text-decoration:none;
}
nav a:hover { background:#666; }
#main { padding:20px; line-height:1.6; }
footer {
background:#222; color:#aaa;
text-align:center; padding:10px;
}
</style>
</head>
<body>
<div id="container">
<header>
<div id="title">💻 コンピュータの歴史</div>
</header>
<nav>
<ul>
<li><a href="#index">TOPページ</a></li>
<li><a href="#1940s">1940年代</a></li>
<li><a href="#1960s">1960年代</a></li>
<li><a href="#1980s">1980年代</a></li>
<li><a href="#2000s">2000年代</a></li>
</ul>
</nav>
<div id="main">
<h2 id="1940s">1940年代</h2>
<p>…ENIACなど、初期の電子計算機が登場…</p>
<!-- 他年代のセクションが続く -->
</div>
<footer>
© 2025 Computer History Inc.
</footer>
</div>
</body>
</html>ブラウザの出力例
主要タブとCSS解説
- #container：ページ全体を固定幅にして中央揃え
- header：背景画像とテキストを内側余白で配置
- nav ul > li > a：インラインリストで横並び、ホバー時に背景色反転
- #main：メインコンテンツ領域。内側余白で読みやすく
- footer：暗めの背景＋中央揃えテキスト
以上が「ページレイアウトの作成①」の基本的な手順です。