レッスン7：仕上げ——複数ページの小さなサイトを完成させる

このレッスンで学ぶこと

適切なフォルダ構成でファイルを整理できる
複数のHTMLファイル間で相対パスのリンクを張れる
共通CSSを複数ページで使い回せる
セマンティックなHTMLタグでページ構造を整える
自分の手で3ページ構成のサイトを完成させる

レッスン1から6で、HTMLとCSSの基本を実習しながら身につけてきました。最後のレッスンでは、これまでの知識をすべて使って、複数ページからなる小さなWebサイトを完成させます。「自己紹介」「作品紹介」「お問い合わせ」の3ページ構成で、ナビゲーションでつながるサイトです。

ステップ1：フォルダ構成を整える

これまで my-website フォルダにすべてのファイルを置いてきましたが、ファイルが増えると整理が難しくなります。実務では、種類ごとにサブフォルダを作って整理するのが定番です。

新しい構成として、my-website フォルダの中に以下のフォルダ・ファイルを用意します。

my-website/
├── index.html         （トップページ：自己紹介）
├── works.html         （作品紹介ページ）
├── contact.html       （お問い合わせページ）
└── assets/
    ├── css/
    │   └── style.css  （共通CSS）
    └── img/
        └── profile.jpg（プロフィール画像）

VSCodeのサイドバーで、my-website フォルダの中に新しいフォルダを作るには、フォルダ名にカーソルを当てたときに表示される「新しいフォルダー」アイコン（フォルダのマーク）をクリックします。

まず assets フォルダを作り、その中に css フォルダと img フォルダを作ります。次に、これまで my-website 直下にあった style.css を assets/css/ の中へ、profile.jpg を assets/img/ の中へ、それぞれドラッグして移動します。

💡 ポイント assets は「資産・素材」という意味で、画像・CSS・JavaScriptなどページを構成する素材ファイルを置くフォルダの慣例的な名前です。css/、img/、js/、fonts/ といったサブフォルダで種類別に分けるのが一般的です。

ステップ2：相対パスを修正する

ファイルを移動したので、index.html の中のパスも修正する必要があります。

index.html の <link> タグを、新しい場所に合わせて書き換えます。

<link rel="stylesheet" href="assets/css/style.css">

assets/css/style.css のように、フォルダを / で区切ってパスを書きます。これは「同じ場所にある assets フォルダの中の、css フォルダの中の、style.css」という意味です。

画像のパスも同じく書き換えます。

<img src="assets/img/profile.jpg" alt="森田 彩花のプロフィール写真">

保存してブラウザで再読み込みし、これまでと同じ表示になることを確認しましょう。CSSが当たっていない、画像が表示されない、といった場合は、パスの書き方を見直してください。

⚠️ 注意 パスは「いま編集しているHTMLファイルから見て」どこにあるかで書きます。ファイルを別フォルダに移動すると、すべてのパスを書き直す必要があります。最初は混乱しやすい点ですが、慣れると自然に書けるようになります。

ステップ3：works.htmlとcontact.htmlを作る

サイドバーで my-website 直下に新しいファイルを2つ作ります。works.html と contact.html です。

それぞれの中身は、index.html をコピーして部分的に書き換える形で作ります。共通の <head> 部分・ナビゲーション部分はどのページも同じにし、内容部分だけ変えます。

works.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作品紹介 - 森田 彩花</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <nav class="nav">
    <div class="nav-logo">My Website</div>
    <ul class="nav-menu">
      <li><a href="index.html">ホーム</a></li>
      <li><a href="works.html">作品紹介</a></li>
      <li><a href="contact.html">お問い合わせ</a></li>
    </ul>
  </nav>

  <main class="container">
    <h1>作品紹介</h1>
    <p class="lead">これまでに制作した作品の一部を紹介しています。</p>

    <div class="card-list">
      <div class="card">
        <h3>架空の和菓子店サイト</h3>
        <p>地域の老舗をイメージした、シンプルで落ち着いたデザイン。和モダンな配色を意識しました。</p>
      </div>
      <div class="card">
        <h3>登山ガイドのブログ</h3>
        <p>山ごとの紹介記事と、初心者向け装備リストをまとめたブログサイト。読みやすさを重視しました。</p>
      </div>
      <div class="card">
        <h3>カフェのメニュー紹介ページ</h3>
        <p>1ページ完結の小さなサイト。写真と短い説明を並べた、メニュー閲覧用のページです。</p>
      </div>
    </div>
  </main>

  <footer class="footer">
    <p>&copy; 2026 森田 彩花</p>
  </footer>
</body>
</html>

contact.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせ - 森田 彩花</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <nav class="nav">
    <div class="nav-logo">My Website</div>
    <ul class="nav-menu">
      <li><a href="index.html">ホーム</a></li>
      <li><a href="works.html">作品紹介</a></li>
      <li><a href="contact.html">お問い合わせ</a></li>
    </ul>
  </nav>

  <main class="container">
    <h1>お問い合わせ</h1>
    <p class="lead">ご質問やお仕事のご相談は、以下のメールアドレスまでお願いします。</p>

    <div class="card">
      <h3>メールアドレス</h3>
      <p><a href="mailto:example@example.com">example@example.com</a></p>
      <p>原則として、3営業日以内にご返信いたします。</p>
    </div>
  </main>

  <footer class="footer">
    <p>&copy; 2026 森田 彩花</p>
  </footer>
</body>
</html>

ステップ4：index.htmlを整える

index.html も、新しい構成に合わせて整えます。これまでの内容に、ナビゲーションとフッターを追加し、構造を <main> タグでまとめます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>森田 彩花のプロフィール</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <nav class="nav">
    <div class="nav-logo">My Website</div>
    <ul class="nav-menu">
      <li><a href="index.html">ホーム</a></li>
      <li><a href="works.html">作品紹介</a></li>
      <li><a href="contact.html">お問い合わせ</a></li>
    </ul>
  </nav>

  <main class="container">
    <h1>森田 彩花のページ</h1>

    <img src="assets/img/profile.jpg" alt="森田 彩花のプロフィール写真" class="profile-img">

    <p class="lead">このページでは、わたしの自己紹介と趣味、よく見ているWebサイトを紹介しています。</p>

    <h2>自己紹介</h2>
    <p>はじめまして。森田 彩花と申します。Web制作の現場で7年ほど働いたあと、現在はプログラミングスクールで初学者向けの講師をしています。</p>

    <h2>趣味の紹介</h2>
    <div class="card-list">
      <div class="card">
        <h3>登山</h3>
        <p>休日は近隣の山に登りに行きます。最近のお気に入りは高尾山です。</p>
      </div>
      <div class="card">
        <h3>映画鑑賞</h3>
        <p>ジャンルを問わず、月に5本ほど映画を見ます。最近はドキュメンタリーが好みです。</p>
      </div>
      <div class="card">
        <h3>パン作り</h3>
        <p>休日の朝はパンを焼きます。シンプルなフランスパンが定番です。</p>
      </div>
    </div>
  </main>

  <footer class="footer">
    <p>&copy; 2026 森田 彩花</p>
  </footer>
</body>
</html>

新しいタグが2つ出てきました。

<main> は、ページのメインコンテンツを表すタグです。1ページに1つだけ書くのがルールです。

<footer> は、ページの下部に表示する情報（コピーライト・連絡先など）を表すタグです。

これらは「セマンティックなタグ」と呼ばれ、ページのどこが何の役割かをブラウザや検索エンジンに伝えます。レッスン2で出てきた <nav> も同じ仲間です。

📝 補足 セマンティックなタグには、ほかに <header>（ページ上部の領域）、<article>（独立した記事）、<section>（テーマでまとまった区画）、<aside>（補足情報）などがあります。本コースでは深掘りしませんが、「div」だけで済ますより、適切なセマンティックタグを使う方が品質の高いHTMLになります。

ステップ5：共通レイアウト用のCSSを追加する

<main class="container"> と <footer class="footer"> のスタイルを style.css に追加します。style.css の最後に、次のCSSを書き足してください。

.container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.profile-img {
  border-radius: 50%;
  width: 160px;
  height: 160px;
  object-fit: cover;
  display: block;
  margin: 0 auto 20px;
}

.footer {
  background-color: #2c3e50;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

新しい指定を3つ確認しましょう。

margin: 40px auto は、上下40pxの余白に加え、左右を auto にすることで「中央寄せ」にしています。max-width と組み合わせると、画面幅が広いときも要素がページ中央にきれいに収まります。

border-radius: 50% は、四角形を完全な円にする指定です。width と height が同じ正方形の画像に当てると、円形のプロフィール写真になります。

object-fit: cover は、画像を指定したサイズに「埋め尽くす」ように切り取って表示します。元画像の縦横比が違っても、はみ出した部分が切り取られて、円が崩れずに表示されます。

ステップ6：表示確認とリンクの動作確認

すべてのファイルを保存したら、ブラウザで index.html を開いてみましょう。今度はナビゲーションのメニューが「ホーム / 作品紹介 / お問い合わせ」の3項目になっています。

「作品紹介」をクリックすると works.html に、「お問い合わせ」をクリックすると contact.html に移動します。各ページからもナビゲーションでホームに戻れます。これで、3ページ構成の小さなサイトの完成です。

💡 ポイント 同じCSSファイルを3つのページが共有しているため、例えばボタンの色を変えたいときは style.css を1か所変えるだけで、3ページすべてに反映されます。これが「外部CSSの使い回し」の威力です。

ステップ7：最後の仕上げ——リファクタリング

サイトが動くようになったら、もう一度CSSと開発者ツールを使って細部を確認しましょう。次の点をチェックする習慣をつけると、品質がぐんと上がります。

ブラウザの幅を狭めてレスポンシブが正しく動くか確認する
開発者ツールで、ボックスサイズや余白に違和感がないか見る
ナビゲーションのリンクがすべて正しいページに飛ぶか確認する
各ページの <title> がページごとに変わっていることを確認する
画像の alt 属性に意味のある説明が入っているか確認する

問題を見つけたら、直してから次へ進みます。一度で完璧に書ける人はいません。何度も書いて、確認して、直して、を繰り返すのがWeb制作の現実です。

このコースの先へ——次のステップ

これでHTML・CSS入門コースは終わりです。お疲れさまでした。手元には、自分で作った3ページのWebサイトが残っているはずです。これは大きな到達点です。

ここから先、Web制作をさらに深めるために、次のような領域に進むことができます。

JavaScriptに進む：HTMLが構造、CSSが装飾を担うのに対し、JavaScriptはWebページに「動き」と「対話」を加える言語です。フォームの入力チェック、メニューの開閉、画像のスライドショーなど、動的な処理が書けるようになります。

より洗練されたレイアウト技術：CSS Gridや、CSSのカスタムプロパティ（変数）、アニメーションなど、より高度なCSSの使い方があります。

サイトを世界に公開する：自分のサイトを実際にインターネットに公開するには、レンタルサーバーやサービス（GitHub Pages・Netlify・Vercelなど）を使います。

フレームワークを使ったWeb制作：React・Vue・Astroといったフレームワークを使うと、より大規模なサイトを効率よく作れるようになります。これらは応用編なので、まずは素のHTML・CSS・JavaScriptをしっかり身につけてから挑戦しましょう。

🔰 初学者の方へ 焦って次々と新しい技術に手を出す必要はありません。本コースで学んだHTML・CSSの知識は、どんなフレームワークを使うときも土台になります。まずは、いま作ったサイトに自分らしい変更を加えてみたり、別のテーマでもう1つサイトを作ってみたりして、手を動かす経験を増やすのがおすすめです。

まとめ

このレッスンでは、以下のことを学びました。

実用的なフォルダ構成（assets/css/・assets/img/ など）の整え方
相対パスを使った複数ファイル間のリンク
共通CSSを複数ページで使い回す利点
<main>・<footer> などセマンティックなタグの使い方
中央寄せ・円形画像・フッターなど、サイトを仕上げるための定番テクニック

そして、自分の手で3ページ構成のWebサイトを完成させました。HTML・CSSの入門コースとしては、ここまで進めれば十分な到達点です。次は総復習テストで、コース全体の理解を確認しましょう。

確認クイズ

このレッスンの理解度をチェックしましょう。