【6日でできるHTML＆CSS入門】Webページの基本構造を構築する
Webページを実際に作る際には、「どのようにページ全体を構成し、情報を整理するか」がとても重要です。
Webページの基本構造を構築するとは、見出し・ナビゲーション・メインコンテンツ・補足情報・フッタなど、ページをいくつかの役割ごとに分けてHTMLとCSSでレイアウトを整えることを指します。
ここでは、HTMLファイルとCSSファイルを分けて管理し、効率的にWebページ全体の構造を構築する方法を具体例とともに解説します。
１．基本構造を分けて設計する
1.1. HTMLとCSSの役割分担
Webページの作成では、HTMLは「構造や意味」を、CSSは「見た目やデザイン」を担当します。
HTMLファイルとCSSファイルを分離することで、デザインの修正やページの管理がしやすくなります。
| ファイル種別 | 主な役割 | 拡張子 |
|---|---|---|
| HTMLファイル | 構造・意味の定義 | .html |
| CSSファイル | デザイン・レイアウトの指定 | .css |
例：外部CSSファイルの読み込み
<link rel="stylesheet" href="style.css">HTMLの<head>内でCSSファイルを読み込み、HTML全体のスタイルを指定できます。
1.2. ページ主要ブロックの設計
Webページの基本構造は、主に以下のブロックで構成されます。
| 領域 | 役割 | 主なタグ |
|---|---|---|
| ヘッダ | サイト名やナビゲーション | <header>, <nav> |
| メイン | 主な記事・補足情報 | <main>, <article>, <section>, <aside> |
| フッタ | 著作権、会社情報など | <footer> |
２．HTMLとCSSで構造を構築する
2.1. HTMLサンプル（基本構造）
次のHTMLは、見出し、ナビゲーション、補足情報、記事、フッタを持つ構成例です。
ファイル名： lesson37_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ構造サンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ヘッダ -->
<header id="header">
<h1>My Web Design</h1>
<nav id="menu">
<ul class="clearfix">
<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>
</header>
<!-- メインコンテンツ -->
<main>
<div id="contents" class="clearfix">
<!-- 補足情報 -->
<aside class="clearfix">
<section>
<h2>サイド情報</h2>
<p>ここに補足情報を記載します。</p>
</section>
</aside>
<!-- 記事 -->
<article>
<section>
<h3>2025.06.21</h3>
<p>新しい記事を公開しました。</p>
</section>
<section>
<h3>2025.06.10</h3>
<p>サイトのデザインを更新しました。</p>
</section>
</article>
</div>
</main>
<!-- フッタ -->
<footer id="footer">
<small>© 2024 My Web Design. All rights reserved.</small>
</footer>
</body>
</html>2.2. CSSサンプル（デザイン指定）
以下は、上記HTMLを装飾するためのstyle.css例です。
ファイル名： style.css
@charset "utf-8";
/* clearfix */
.clearfix:after {
content: "";
display: block;
clear: both;
}
/* 本体 */
body {
margin: 0;
padding: 0;
background: #f6f8fa;
font-family: sans-serif;
line-height: 1.5;
}
/* ヘッダ */
header {
text-align: center;
color: #fff;
background-color: #2949d3;
padding: 0.5em 0 0.3em 0;
}
header h1 {
font-size: 2em;
margin: 0;
padding: 0.3em 0;
}
/* ナビゲーション */
#menu {
background-color: #2949d3;
}
#menu ul {
max-width: 800px;
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
}
#menu ul li {
width: 150px;
line-height: 2.7em;
color: #fff;
border-right: 1px solid #fff;
text-align: center;
}
#menu ul li:last-child {
border-right: none;
}
#menu ul li a {
color: #fff;
text-decoration: none;
display: block;
}
#menu ul li:hover {
background-color: #193083;
}
/* コンテンツ */
#contents {
width: 800px;
margin: 1em auto;
display: flex;
gap: 2em;
}
aside section {
width: 170px;
background: #2949d3;
color: #fff;
padding: 1em 0.5em;
border-radius: 6px;
min-height: 120px;
margin-bottom: 1em;
}
article {
flex: 1;
}
article section {
background: #fff;
margin-bottom: 1.2em;
padding: 1em;
border-bottom: 1px solid #ccc;
border-radius: 5px;
}
/* フッタ */
footer {
width: 100%;
background: #e3e7f9;
text-align: center;
padding: 1em 0 0.8em;
color: #5a5a5a;
}
small {
font-size: 0.93em;
}３．構造とデザインの工夫・詳細解説
| タグ/プロパティ | 解説例 |
|---|---|
<header> | サイト名・ナビをまとめる最上部の領域 |
<nav> | メニューのリストをグループ化する領域 |
<main> | ページの主な内容（1ページに1つが基本） |
<aside> | サイド情報や補足説明（mainの一部、またはmainの隣に配置） |
<article> | 記事ブロック（複数の記事やブログにも使える） |
<section> | 内容のまとまり。記事内の区切りなど |
<footer> | ページ下部の情報、著作権表示、問い合わせ |
.clearfix:after | 回り込み解除の定番テクニック。floatの影響をリセットする |
４．よくあるポイント・工夫
- 外部CSS読み込みでデザインと構造を分け、再利用性を高める。
- idやclassで領域ごとに細かく制御し、メンテナンスしやすくする。
- メニューのリストはul/liで記述し、各メニューの装飾やホバー効果もCSSで実装。
まとめ
Webページの基本構造は「HTMLで領域ごとに意味付け」「CSSでデザイン分離」が基本です。
外部CSSファイルを活用し、ブロックごとに整理してコーディングすることで、見やすく管理しやすいWebサイトを効率的に構築できます。
より見やすく、レスポンシブな（スマホ対応の）デザインを作る工夫についても、さらに発展させて学んでみてください。