6日でできる 新HTML&CSS入門｜Webサイトの基本レイアウト
Webサイトは、情報の置き場所を決めるところから始まる。
header、main、aside、footerを使って、見やすく整理された基本レイアウトを作ろう。
Webサイトを作るときは、文字や画像をただ上から順番に並べるだけでは、分かりやすいページにはなりません。大切なのは、「ページのどこに何を置くのか」「情報をどのようなまとまりで見せるのか」を考えることです。
たとえば、ページの上にはサイト名やメニューを置き、中央には一番伝えたい本文を配置し、横には関連情報や補足情報を置き、下には著作権表示やお問い合わせ情報を置く、というように役割ごとに場所を分けます。このような配置の考え方が、Webサイトの基本レイアウトです。
HTMLには、ページの構造を分かりやすく表すためのタグがあります。代表的なものが、<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>です。これらを使うと、ページのどの部分がヘッダーなのか、どこが本文なのか、どこが補助情報なのかを明確にできます。
見た目だけでなく、HTMLの構造を整えることはとても大切です。検索エンジンがページの内容を理解しやすくなり、スクリーンリーダーなどの補助技術でもページの構成が伝わりやすくなります。また、CSSで部分ごとにデザインを指定しやすくなるため、あとから修正するときにも管理しやすくなります。
この記事では、Webサイトの基本レイアウトを構成する主なタグの役割と、実際にHTMLでレイアウトを作る方法を、サンプルコードを使いながらやわらかく解説していきます。
Webページは役割ごとのブロックで考える
Webページは、いくつかの大きなブロックに分けて考えると分かりやすくなります。代表的な構成は、上からheader、main、footerです。さらに、mainの中にarticleやsectionを置いたり、補助情報としてasideを入れたりします。
| ブロック名 | 主な内容 | よく使うタグ |
|---|---|---|
| ヘッダー | サイト名、ロゴ、メニュー | <header>、<nav> |
| メイン | ページで一番伝えたい本文 | <main>、<article>、<section> |
| サイドバー・補助情報 | 関連リンク、補足情報、広告、案内 | <aside> |
| フッター | 著作権表示、連絡先、補助リンク | <footer>、<small> |
このように、ページ全体を意味のあるまとまりに分けることで、HTMLの読みやすさが上がります。CSSを書くときにも、headerにはこの背景色、mainにはこの余白、footerにはこの文字サイズ、というように、場所ごとにデザインを指定しやすくなります。
図1：Webページの基本レイアウト
この図から分かること
Webページは、header、main、aside、footerのように役割ごとのブロックで考えると整理しやすくなります。ページ上部にはサイト名やナビゲーション、中央には主要な内容、横や途中には補助情報、下部には著作権表示や関連リンクを配置します。構造を先に考えることで、読みやすく管理しやすいページを作りやすくなります。
headerはページ上部の情報をまとめる場所
<header>は、ページやセクションの上部情報をまとめるためのタグです。一般的には、サイト名、ロゴ、キャッチコピー、ナビゲーションメニューなどを入れます。
Webサイトを開いたとき、多くのユーザーが最初に見るのはページ上部です。ここにサイト名やメニューが分かりやすく配置されていると、ユーザーは「このサイトは何のサイトなのか」「どこへ移動できるのか」をすぐに理解できます。
よくあるheaderの内容は次のとおりです。
| 内容 | 役割 |
|---|---|
| サイト名 | Webサイトの名前を伝える |
| ロゴ | ブランドやサイトの印象を伝える |
| キャッチコピー | サイトの特徴を短く伝える |
| ナビゲーション | 主要ページへの移動手段を用意する |
headerは、ページ全体の入口のような役割を持っています。そのため、見た目だけでなく、情報の分かりやすさも大切です。
navはナビゲーションを表すタグ
<nav>は、Webサイト内の主要なリンクをまとめるためのタグです。グローバルメニュー、ページ内メニュー、フッターメニューなど、ユーザーが移動するためのリンクグループに使います。
たとえば、トップ、サービス、会社情報、お問い合わせのようなメニューは、<nav>の中に配置することが多いです。
<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>ナビゲーションは、ただリンクを並べるだけではなく、ユーザーが迷わず目的のページへ進むための道案内です。そのため、メニュー名は短く分かりやすくし、重要なページへすぐ移動できるようにすることが大切です。
mainはページの中心となる内容を入れる場所
<main>は、そのページで最も重要な内容を入れるためのタグです。ニュース記事なら記事本文、会社サイトならサービス紹介や会社情報、学習ページなら解説本文などがmainに入ります。
<main>は、基本的に1ページに1つだけ使います。理由は、ページの中心となる内容を明確にするためです。headerやfooterのように共通して表示される情報ではなく、そのページ固有の主役となる内容を入れる場所だと考えると分かりやすいです。
| mainに入れるもの | 例 |
|---|---|
| 記事本文 | ニュース記事、ブログ記事、学習記事 |
| サービス紹介 | サービス内容、料金、特徴 |
| 商品情報 | 商品説明、画像、仕様 |
| 学習コンテンツ | 解説文、図表、サンプルコード |
mainを正しく使うと、HTMLの中で「ここがこのページの中心です」と示せます。CSSで本文エリアの背景色や余白を整えるときにも扱いやすくなります。
articleとsectionで本文をさらに整理する
mainの中には、<article>や<section>を入れて、内容をさらに細かく整理できます。
<article>は、それだけで独立した内容として成り立つまとまりに使います。ブログ記事、ニュース記事、商品レビュー、コラムなどが例です。
<section>は、ページ内のテーマごとの区切りに使います。たとえば、サービス紹介ページの中で「特徴」「料金」「導入事例」のように内容を分けたい場合に使えます。
| タグ | 役割 | 使い方の例 |
|---|---|---|
| <article> | 独立した内容のまとまり | 記事、ニュース、レビュー |
| <section> | テーマごとの区切り | 特徴、料金、よくある質問 |
本文が長くなる場合は、sectionで適切に区切ると読みやすくなります。見出しと組み合わせて使うことで、ページ全体の流れも分かりやすくなります。
図2：mainの中をarticleとsectionで整理する
この図から分かること
mainにはページの中心となる内容を入れます。その中で、独立した記事や情報のまとまりにはarticleを使い、さらに内容をテーマごとに分けるときはsectionを使います。長いページでも、意味のある単位で分けることで、読みやすく管理しやすいHTMLになります。
asideは補助的な情報を入れる場所
<aside>は、ページの中心ではないけれど、本文に関連する補助的な情報を入れるためのタグです。サイドバー、関連リンク、広告、補足説明、お知らせなどに使われます。
たとえば、記事ページであれば、本文の横に関連する記事一覧を置くことがあります。学習ページであれば、補足メモや参考リンクをasideに入れることもできます。
| asideに入れる情報 | 例 |
|---|---|
| 関連リンク | 関連記事、参考ページ |
| 補足情報 | 用語説明、注意事項 |
| サイドバー | カテゴリ一覧、検索ボックス |
| 広告や案内 | バナー、キャンペーン案内 |
asideは、本文そのものではなく、本文を助ける情報を入れる場所です。メインの内容と区別しておくことで、ユーザーが情報を探しやすくなります。
footerはページ下部の情報をまとめる場所
<footer>は、ページやセクションの下部情報をまとめるためのタグです。Webサイト全体のフッターとして使う場合、著作権表示、連絡先、住所、補助リンク、利用規約、プライバシーポリシーなどを入れることが多いです。
ページの最後にあるfooterは、ユーザーが追加情報を確認したいときや、問い合わせ先を探したいときに役立ちます。
| footerに入れる内容 | 役割 |
|---|---|
| 著作権表示 | サイトの権利情報を示す |
| 連絡先 | 問い合わせ方法を示す |
| 住所 | 会社や店舗の所在地を示す |
| 補助リンク | 利用規約、プライバシーポリシーなど |
| small | 小さめの補足テキストや著作権表示に使う |
<small>は、著作権表示や補足説明のように、小さめに表示したいテキストに使われます。footer内でよく見かけるタグです。
基本レイアウトをHTMLで作る
ここでは、header、nav、main、article、section、aside、footerを使った基本的なWebページを作ります。CSSも入れて、各ブロックの範囲が分かりやすいように背景色と余白を設定します。
ファイル名： lesson36_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webサイトの基本レイアウト</title>
<style>
body {
margin: 0;
font-family: "Segoe UI", sans-serif;
background: #f5f7fa;
}
header,
footer {
background: #e3f2fd;
padding: 18px;
text-align: center;
}
header h1 {
margin: 0;
}
nav ul {
display: flex;
justify-content: center;
gap: 20px;
list-style: none;
padding: 0;
margin: 14px 0 0;
}
nav a {
color: #1565c0;
text-decoration: none;
}
main {
background: #fffde7;
padding: 24px 18px;
min-height: 240px;
}
article {
background: #ffffff;
padding: 18px;
border: 1px solid #e0e0e0;
}
section {
margin-bottom: 18px;
}
aside {
background: #f1f8e9;
padding: 14px;
margin-top: 18px;
font-size: 0.95em;
}
footer ul {
list-style: none;
padding: 0;
margin: 0 0 10px;
}
footer li {
display: inline-block;
margin: 0 8px;
}
small {
font-size: 0.85em;
color: #777;
}
</style>
</head>
<body>
<header>
<h1>まなびのWebデザイン</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">講座一覧</a></li>
<li><a href="#">制作事例</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<h2>はじめてのWeb制作</h2>
<p>このエリアには、ページで最も伝えたい内容を入れます。</p>
</section>
<section>
<h2>学習できる内容</h2>
<p>HTMLの構造、CSSの基本、レイアウトの考え方を順番に学べます。</p>
</section>
</article>
<aside>
補足情報：学習を始める前に、HTMLファイルとCSSの役割を確認しておくと理解しやすくなります。
</aside>
</main>
<footer>
<ul>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">利用規約</a></li>
</ul>
<p>所在地：東京都中央区サンプル2-3-4</p>
<small>Copyright © 2026 まなびのWebデザイン All rights reserved.</small>
</footer>
</body>
</html>ブラウザの表示例
このサンプルをブラウザで表示すると、ページ上部にheader、中央にmain、下部にfooterが表示されます。
headerには、サイト名とナビゲーションメニューが入っています。nav ulにdisplay: flex;を指定しているため、メニュー項目が横並びになります。justify-content: center;によって中央寄せになり、gapで項目同士の間隔を空けています。
mainには、ページの中心となる内容が入っています。articleの中に2つのsectionがあり、それぞれ見出しと本文を持っています。mainの下部にはasideがあり、本文に関連する補足情報を表示しています。
footerには、補助リンク、所在地、著作権表示が入っています。smallを使うことで、著作権表示を少し小さめの文字で表示しています。
サンプルで使っている主なタグ
サンプルで使っているHTMLタグの役割を整理してみましょう。
| タグ | 役割 | 使い方のポイント |
|---|---|---|
| <header> | ページ上部の情報をまとめる | サイト名、ロゴ、ナビゲーションなどを入れる |
| <nav> | ナビゲーションリンクをまとめる | 主要なメニューに使う |
| <main> | ページの主要コンテンツを表す | 基本的に1ページに1つ使う |
| <article> | 独立した内容のまとまりを表す | 記事やコラムのような内容に向いている |
| <section> | テーマごとの区切りを表す | 見出しと本文をセットで整理しやすい |
| <aside> | 補助的な情報を表す | 関連リンク、補足説明、サイドバーに使う |
| <footer> | ページ下部の情報をまとめる | 著作権表示、連絡先、補助リンクなどを入れる |
| <small> | 小さめの補足テキストを表す | 著作権表示や注記に使いやすい |
HTMLタグは、見た目を作るためだけでなく、情報の意味を伝えるためにも使います。どのタグを使うかを考えることで、ページ構造が分かりやすくなります。
図3：基本レイアウトをHTMLタグとCSSで形にする
この図から分かること
Webページは、HTMLで意味のある構造を作り、CSSで見た目を整えます。header、main、aside、footerなどのタグを使うと、ページの役割分担が分かりやすくなります。構造とデザインを分けて考えることで、保守しやすいWebページを作りやすくなります。
サンプルで使っているCSSの役割
このサンプルでは、ページの構造を見やすくするために、背景色、余白、横並び、最小高さなどを指定しています。
| CSSプロパティ | 役割 | サンプルでの使い方 |
|---|---|---|
| background | 背景色を指定する | header、main、footerなどの範囲を分かりやすくする |
| padding | 内側の余白を指定する | 各ブロックの中身が端にくっつかないようにする |
| text-align | 文字やインライン要素の配置を指定する | headerとfooterの文字を中央寄せにする |
| display | 要素の表示方法を指定する | nav ulをflexにしてメニューを横並びにする |
| justify-content | flex内の横方向配置を指定する | メニューを中央寄せにする |
| gap | flexやgrid内の間隔を指定する | メニュー項目同士の距離を作る |
| list-style | リストの記号を指定する | ナビゲーションの黒丸を消す |
| margin | 外側の余白を指定する | セクションやasideの間隔を整える |
| min-height | 最小の高さを指定する | mainの高さをある程度確保する |
| text-decoration | 文字装飾を指定する | リンクの下線を消す |
CSSでは、まず各ブロックの範囲が分かるように背景色を指定しています。学習中は、背景色や枠線を付けて構造を見えるようにすると理解しやすくなります。
なぜ基本レイアウトが大切なのか
Webサイトの基本レイアウトを整えることには、いくつかの大切なメリットがあります。
| 観点 | メリット |
|---|---|
| 読みやすさ | 情報の場所が分かりやすくなり、ユーザーが迷いにくい |
| 保守性 | header、main、footerなど部分ごとに修正しやすい |
| デザイン | ブロック単位でCSSを当てやすい |
| SEO | ページの構造や主要コンテンツを伝えやすい |
| アクセシビリティ | 補助技術がページ構造を理解しやすい |
Webページでは、見た目がきれいでも、情報の置き場所が分かりにくいと使いづらくなります。反対に、構造が整理されているページは、ユーザーが必要な情報を見つけやすくなります。
また、HTMLの構造が分かりやすいと、あとからCSSを変更したり、コンテンツを追加したりするときにも迷いにくくなります。チームで制作する場合にも、どこに何が書かれているのかを共有しやすくなります。
タグの意味を意識して使う
HTMLでは、見た目だけを考えてタグを選ぶのではなく、内容の意味に合ったタグを選ぶことが大切です。
たとえば、単に上にあるからheaderを使うのではなく、そこがページやセクションの上部情報である場合にheaderを使います。リンクがいくつか並んでいても、それが主要なナビゲーションでない場合は、必ずnavにする必要はありません。
| 考え方 | 例 |
|---|---|
| ページ上部の案内情報か | headerを使う |
| 主要な移動リンクか | navを使う |
| ページの中心となる内容か | mainを使う |
| 独立した記事や情報か | articleを使う |
| テーマごとの区切りか | sectionを使う |
| 補助的な内容か | asideを使う |
| ページ下部の情報か | footerを使う |
このように、タグの意味を意識して使うと、HTMLがただの見た目の並びではなく、情報構造として分かりやすくなります。
divだけで作る場合との違い
Webページのレイアウトは、<div>だけでも作ることはできます。たとえば、<div class="header">、<div class="main">、<div class="footer">のようにclass名を付ければ、見た目は同じように作れます。
しかし、<header>、<main>、<footer>のような意味を持つタグを使うと、HTMLを読んだときに構造がすぐ分かります。人間にも分かりやすく、検索エンジンや補助技術にも伝わりやすくなります。
| 作り方 | 特徴 |
|---|---|
| div中心 | 見た目は作れるが、タグ自体から意味が分かりにくい |
| 意味を持つタグを使う | どの部分が何の役割か分かりやすい |
もちろん、<div>が不要になるわけではありません。意味を持つタグでは表しにくい細かなグループ化や、CSSレイアウト用のラッパーには<div>もよく使います。大切なのは、意味を持つ部分には適切なタグを使い、補助的なグループ化には<div>を使うという考え方です。
基本レイアウトを作るときの確認ポイント
Webサイトの基本レイアウトを作るときは、次の点を確認すると整理しやすくなります。
| 確認すること | 見るポイント |
|---|---|
| ページ上部に必要な情報 | サイト名、ロゴ、ナビゲーションがあるか |
| mainの内容 | そのページで一番伝えたい内容が入っているか |
| sectionの分け方 | テーマごとに読みやすく区切れているか |
| asideの役割 | 本文の補足情報として自然か |
| footerの内容 | 著作権表示、連絡先、補助リンクが整理されているか |
| CSSの指定 | ブロックごとに余白や背景が分かりやすく指定されているか |
最初は、header、main、footerの3つを作るだけでも十分です。慣れてきたら、mainの中にarticleやsectionを入れたり、補助情報としてasideを追加したりすると、より実践的なページ構造になります。
Webサイトの構造を整えると制作が進めやすくなる
Webサイトの基本レイアウトを理解すると、ページ全体をどのように組み立てればよいかが見えてきます。ヘッダーにはサイト名とメニュー、メインには主要な内容、必要に応じて補助情報、そしてフッターには著作権表示や関連リンクを置く、という流れを押さえるだけでも、ページ作成がかなり進めやすくなります。
また、構造が整理されているHTMLは、CSSも書きやすくなります。headerには共通の背景色、navには横並びメニュー、mainには本文用の余白、footerには小さめの補足情報、というように、役割ごとにデザインを指定できます。
Web制作では、見た目を作る前に構造を考えることが大切です。どこに何を置くのかを決め、意味のあるHTMLタグで整理してからCSSで整えると、読みやすく、保守しやすく、ユーザーにも伝わりやすいWebページになります。