HTML: HTMLレイアウト
ウェブページのレイアウトは、ページが「どのように見えるか」を決定します ― ヘッダーの位置、ナビゲーションバーの配置、コンテンツエリアとサイドバーの配置などです。良いレイアウトはページを明確で読みやすくし、さまざまな画面に適応させます。
1. HTMLレイアウトとは
HTMLレイアウトはウェブページをいくつかの機能エリアに分割します：ヘッダー、ナビゲーションバー（nav）、メインコンテンツエリア（main）、サイドバー（aside）、フッター。初期の頃は <div> とCSSを組み合わせてレイアウトを実現するのが一般的でした。
▶ サンプル
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
.nav { background: #333; color: #fff; padding: 10px; text-align: center; }
.nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
.main { flex: 3; padding: 20px; background: #f4f4f4; }
.sidebar { flex: 1; padding: 20px; background: #e4e4e4; }
.footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<div class="header"><h1>マイウェブサイト</h1></div>
<div class="nav">
<a href="#">ホーム</a>
<a href="#">会社概要</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>
</div>
<div class="container">
<div class="main"><h2>メインコンテンツ</h2><p>ページのメインコンテンツエリアです。</p></div>
<div class="sidebar"><h3>サイドバー</h3><p>広告や関連リンクをここに配置します。</p></div>
</div>
<div class="footer">© 2025 マイウェブサイト</div>
</body>
</html>
上の例は <div> と class および style を使って、古典的な「ヘッダー-コンテンツ-フッター」レイアウトを実装しています。中央部分はさらにメインコンテンツエリアとサイドバーに分かれています。このアプローチの欠点は、HTMLタグ自体が各エリアの意味を表現できないことです ― すべてのセクションが <div> を使用しているため、意味が不明確です。
2. 意味論的レイアウト
HTML5では意味論的タグが導入され、<div> を意味のあるタグに置き換えました。
<header>― ヘッダーエリア<nav>― ナビゲーションバー<main>― メインコンテンツ<section>― コンテンツセクション<aside>― サイドバー<footer>― フッターエリア
▶ サンプル
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
nav { background: #333; color: #fff; padding: 10px; text-align: center; }
nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
main { flex: 3; padding: 20px; background: #f4f4f4; }
aside { flex: 1; padding: 20px; background: #e4e4e4; }
footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<header><h1>マイウェブサイト</h1></header>
<nav>
<a href="#">ホーム</a>
<a href="#">会社概要</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>
</nav>
<div class="container">
<main>
<section>
<h2>最新記事</h2>
<p>記事の内容です。</p>
</section>
</main>
<aside>
<h3>関連リンク</h3>
<p>サイドバーのコンテンツ。</p>
</aside>
</div>
<footer>© 2025 マイウェブサイト</footer>
</body>
</html>
💡 意味論的レイアウト vs Divレイアウト：意味論的タグは検索エンジン（SEO）や支援技術（スクリーンリーダー）にとってより親切です。検索エンジンは
<main> 内のコンテンツを優先的に分析し、スクリーンリーダーは <nav> に直接ジャンプできます。コードもより明確で、タグ名を見るだけで各エリアの役割がわかり、クラス名から推測する必要がありません。
3. Flexbox入門
display: flex はCSS3が提供する柔軟なレイアウトモデルで、子要素を自動的に水平または垂直に整列させます。コンテナに display: flex を設定するだけで、子要素が自動的に「並びます」。以下はFlexboxで作った水平ナビゲーションバーです。
▶ サンプル
HTML
<!DOCTYPE html>
<html>
<head>
<style>
nav ul {
display: flex;
list-style: none;
padding: 0;
background: #333;
}
nav ul li a {
display: block;
padding: 14px 24px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background: #575757;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</body>
</html>
💡 FlexboxとGridは現代CSSレイアウトの核です。Flexboxは1次元の配置（水平または垂直）に優れ、Gridは2次元レイアウト（行と列を同時に制御）に優れています。HTMLを学んだ後は、CSSチュートリアルでこれら2つの強力なツールを体系的に学ぶことをおすすめします。
よく使われるFlexboxプロパティには、justify-content（水平方向の配置）、align-items（垂直方向の配置）、gap（間隔）があります。上のナビゲーションバーでは、display: flex のたった1行でリスト項目を縦並びから横並びに変えています。とても簡潔です。
❓ よくある質問
Q
<div>と意味論的タグ（<header>、<nav>など）の違いは何ですか？A
<div>は汎用コンテナで、意味論的な意味はなく、コンテンツを囲むだけです。意味論的タグはコンテンツの目的を明確に表現します。<header>はページヘッダー、<nav>はナビゲーション、<main>はコアコンテンツ、<aside>はサイドバー、<footer>はページフッターです。利点：1）コードの可読性が向上；2）検索エンジンがページ構造をよりよく理解；3）スクリーンリーダーユーザーが特定のエリアに素早くジャンプできる。Q FlexboxとGridはいつ使うのですか？
A Flexboxは1次元で、単一の軸に沿った要素の配置に最適です（水平または垂直）。ナビゲーションバー、カードリスト、ボタングループなどに適しています。Gridは2次元で、行と列を同時に制御するのに最適です。ページレイアウト、ダッシュボード、画像ギャラリーなどに適しています。シンプルなルール：1行または1列だけを制御する場合はFlexboxを使い、複数の行と列を制御する場合はGridを使います。両者を組み合わせることもできます。
Q 3カラムレイアウト（左-中央-右）はどうやって作りますか？
A 最もシンプルな方法はFlexboxです。外側のコンテナに
display: flexを設定し、左右のカラムに固定幅（width: 200pxなど）を与え、中央のカラムにflex: 1を設定して残りのスペースを埋めます。コード：<div style="display: flex"><div style="width: 200px">左</div><div style="flex: 1">中央</div><div style="width: 200px">右</div></div>。レスポンシブデザインでは、flex-wrap: wrapを使用してカラムを自動的に折り返させます。Q なぜ
<div>の代わりに意味論的タグを使うべきですか？A 意味論的タグの核心的価値は「自己文書化されたコード」です。利点：1）開発者は
<nav>を見るとナビゲーションであることが、<aside>を見るとサイドバーであることがわかり、クラス名から推測する必要がない；2）検索エンジンが意味論的タグにより高い重み付けをし、SEOが向上；3）スクリーンリーダーユーザーが意味論的タグでナビゲーションできる（「メインコンテンツにスキップ」など）；4）将来のメンテナンス時にページ構造がより理解しやすい。📖 まとめ
- HTMLレイアウトはページをヘッダー、ナビゲーション、コンテンツ、サイドバー、フッターエリアに分割する
<div>+ CSS で任意のレイアウトを実現できる- 意味論的タグ（
<header>、<nav>、<main>、<aside>、<footer>）が<div>を置き換え、可読性とSEOを向上 display: flexは子要素を水平に整列させ、ナビゲーションバーやカードリストなどに最適
📝 練習問題
- 個人ホームページのレイアウト： 意味論的タグを使って個人ホームページを構築してください。ヘッダー（サイトタイトル）、nav（ナビゲーションリンク）、main（自己紹介＋ポートフォリオセクション）、aside（連絡先情報）、footer（著作権表示）を含めます。
display: flexを使ってナビゲーションバーを水平にしてください。 - 3カラムレイアウト：
<div>を使って左-中央-右の3カラムレイアウトを実装してください。中央のカラムは可変で、左右のカラムは200px固定にします。（ヒント：Flexboxのflexプロパティで比率を制御）
