6日でできる 新HTML&CSS入門｜4ページ構成のWebサイト制作

4つのページをつなげると、Webサイトらしさが見えてくる。
トップページ、紹介ページ、実績ページ、お問い合わせページを組み合わせて、実用的なWebサイトを作ろう。

これまでHTMLやCSSを学んできたら、次のステップとして取り組みたいのが、複数ページで構成されたWebサイト制作です。1ページだけのHTMLを作る練習も大切ですが、実際のWebサイトでは、トップページ、会社紹介、サービス紹介、制作実績、お問い合わせなど、複数のページを組み合わせて作ることが多くあります。

4ページ構成のWebサイトを作ると、ページ同士のリンク、共通ヘッダー、共通ナビゲーション、共通フッター、外部CSSの読み込み、画像フォルダーの管理など、実際の制作に近い考え方を学べます。HTMLだけでなく、ファイルやフォルダーの整理も重要になります。

今回作成するWebサイトでは、架空のクリエイティブ事務所を例にして、index.html、about.html、works.html、contact.htmlの4ページを用意します。デザインはcss/style.cssで一括管理し、どのページでも同じヘッダーやメニュー、フッターが表示されるようにします。

また、レスポンシブ対応も取り入れます。パソコンではナビゲーションを横並びにし、スマートフォンでは縦並びに切り替えることで、画面幅が狭い端末でも見やすく操作しやすいページにします。

この記事では、4ページ構成のWebサイトを作るためのフォルダー設計、共通CSSの考え方、各HTMLファイルの役割、トップページ、紹介ページ、制作実績ページ、お問い合わせページの作り方を、サンプルコードを使いながら分かりやすく解説していきます。

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

social-media-engagementダウンロード
ogp_bread_class.png

4ページ構成のWebサイトとは

4ページ構成のWebサイトとは、役割の異なる4つのHTMLファイルを組み合わせて作るサイトのことです。たとえば、トップページ、事務所紹介ページ、制作実績ページ、お問い合わせページを用意すると、シンプルながらも実用的なサイトになります。

1ページだけのWebページでは、すべての情報を1つのHTMLに入れることになります。しかし、情報が増えるとページが長くなり、目的の情報を探しにくくなります。そこで、内容ごとにページを分け、ナビゲーションメニューから移動できるようにします。

ファイル名ページの役割
index.htmlサイトの入口となるトップページ
about.html事務所やサービスの紹介ページ
works.html制作実績や活動内容を紹介するページ
contact.htmlお問い合わせフォームを置くページ
css/style.css全ページ共通のデザインを管理するCSS
img/top.pngトップページなどで使う画像

このようにページの役割を分けると、ユーザーは知りたい情報へ移動しやすくなります。制作側にとっても、ページごとに内容を整理しやすくなり、更新や管理がしやすくなります。

図1：4ページ構成のWebサイト全体像

この図から分かること

4ページ構成のWebサイトでは、それぞれのHTMLファイルが異なる役割を持ちます。トップページ、紹介ページ、実績ページ、お問い合わせページをナビゲーションでつなぎ、共通CSSで見た目をそろえます。ページを分けることで、情報が整理され、ユーザーが目的のページへ移動しやすくなります。

フォルダー構成を先に決める

Webサイト制作では、HTMLを書く前にフォルダー構成を決めておくと作業しやすくなります。どのファイルをどこに置くのかが整理されていないと、CSSや画像の読み込みパスを間違えやすくなります。

今回のサンプルでは、次のような構成にします。

creative-site
├─ index.html
├─ about.html
├─ works.html
├─ contact.html
├─ css
│  └─ style.css
└─ img
   └─ top.png

HTMLファイルはサイトの直下に置きます。CSSはcssフォルダーに入れ、画像はimgフォルダーに入れます。このように種類ごとにフォルダーを分けると、ファイルが増えても管理しやすくなります。

フォルダー・ファイル内容
creative-siteWebサイト全体を入れる親フォルダー
index.htmlトップページ
about.html事務所紹介ページ
works.html制作実績ページ
contact.htmlお問い合わせページ
css/style.css全ページ共通のCSS
img/top.pngトップ画像

画像素材を使う場合は、imgフォルダーを作成し、その中にtop.pngを保存します。HTMLから画像を読み込むときは、img/top.pngのようにフォルダー名を含めて指定します。

共通CSSでデザインを一括管理する

複数ページのWebサイトでは、全ページに共通するデザインを1つのCSSファイルで管理すると便利です。ヘッダー、ナビゲーション、フッター、本文エリア、テーブル、フォームなどの見た目をcss/style.cssにまとめておけば、各HTMLで同じCSSを読み込むだけで統一感のあるサイトになります。

HTML側では、head内に次のようなlinkを指定します。

指定役割
link rel="stylesheet"外部CSSを読み込む
href="css/style.css"cssフォルダー内のstyle.cssを指定する

共通CSSを使うメリットは、修正が簡単になることです。たとえば、ヘッダーの色を変更したい場合、4つのHTMLファイルをそれぞれ修正するのではなく、style.cssのheaderの指定を変更するだけで、全ページに反映できます。

共通化する部分内容
ヘッダーサイト名、背景色、余白
ナビゲーションメニューの並び、リンクの色、hover
メインエリア最大幅、余白、背景色
テーブル枠線、見出しセル、余白
フォーム入力欄、ボタン、フォーカス表示
フッターコピーライト、背景色

共通CSSを使うことで、見た目の統一だけでなく、保守性も高くなります。Webサイト制作では、HTMLはページごとの内容、CSSは共通デザインという役割分担を意識しましょう。

共通CSSを作成する

まず、全ページで使うCSSを作成します。ヘッダー、ナビゲーション、本文エリア、画像、テーブル、お問い合わせフォーム、フッター、レスポンシブ対応までをまとめて指定します。

ファイル名： css/style.css

@charset "utf-8";

body {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  background-color: #ffffff;
  color: #222222;
  line-height: 1.7;
}

header {
  background-color: #2f756d;
  color: #ffffff;
  text-align: center;
  padding: 1.5em 0 1em;
}

header h1 {
  margin: 0 0 0.6em;
  font-size: 2.1em;
  letter-spacing: 0.06em;
}

#menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#menu ul li {
  margin: 0 0.5em;
}

#menu ul li a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.7em 1.2em;
  display: block;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.2s;
}

#menu ul li a:hover {
  background-color: #1f5e57;
}

#contents {
  max-width: 840px;
  margin: 0 auto;
  padding: 1.6em 1em;
  background-color: #f8fbf8;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(70, 110, 100, 0.08);
}

.topimg {
  width: 100%;
  max-width: 820px;
  display: block;
  margin: 1em auto;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(30, 80, 80, 0.1);
}

h2 {
  font-size: 1.6em;
  color: #2f756d;
  margin-top: 0.5em;
  border-left: 7px solid #8bcfbd;
  padding-left: 0.5em;
  font-weight: bold;
}

h3 {
  font-size: 1.2em;
  margin-top: 1.6em;
  color: #1f5e57;
}

.tbl {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.8em;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(30, 60, 60, 0.05);
}

.tbl caption {
  font-weight: bold;
  font-size: 1.07em;
  padding: 10px 5px;
  background-color: #2f756d;
  color: #ffffff;
  border-radius: 6px 6px 0 0;
}

.tbl th,
.tbl td {
  border: 1px solid #d0dedb;
  padding: 10px 8px;
  text-align: left;
}

.tbl th {
  width: 30%;
  background-color: #ecf7f3;
  font-weight: bold;
  text-align: center;
}

.tbl ul {
  margin: 0;
  padding-left: 1.3em;
}

.tbl li {
  margin: 0.2em 0;
}

.ws,
.wl {
  width: 98%;
  padding: 8px;
  font-size: 1em;
  box-sizing: border-box;
  border: 1px solid #b7d8cf;
  border-radius: 5px;
  background-color: #fafcfa;
  margin-bottom: 0.4em;
  outline: none;
  transition: border-color 0.2s;
}

.ws:focus,
.wl:focus {
  border-color: #2f756d;
}

textarea.wl {
  min-height: 120px;
  resize: vertical;
}

.button_wrapper {
  text-align: center;
  margin-top: 1.4em;
}

.confirm {
  background-color: #2f756d;
  border: none;
  color: #ffffff;
  padding: 0.7em 2.3em;
  font-size: 1em;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s;
  cursor: pointer;
}

.confirm:hover {
  background-color: #1f5e57;
}

footer {
  background-color: #2f756d;
  color: #ffffff;
  text-align: center;
  padding: 1em 0;
  margin-top: 2em;
  font-size: 0.96em;
}

@media screen and (max-width: 700px) {
  header h1 {
    font-size: 1.6em;
  }

  #menu ul {
    flex-direction: column;
  }

  #menu ul li {
    margin: 0.2em 0;
  }

  #contents {
    padding: 1em 0.6em;
    border-radius: 0;
    box-shadow: none;
  }

  .topimg {
    max-width: 100%;
    border-radius: 0;
  }

  .tbl th,
  .tbl td {
    display: block;
    width: auto;
  }

  .tbl th {
    text-align: left;
  }
}

このCSSでは、全ページ共通の見た目をまとめています。bodyで基本フォントや文字色を指定し、headerとfooterでサイト全体の上下のデザインを整えています。

#menu ulにはdisplay: flexを指定し、パソコンではメニューが横並びになるようにしています。画面幅が700px以下の場合は、メディアクエリでflex-direction: columnを指定し、スマートフォンではメニューが縦並びになります。

また、.topimgにはwidth: 100%とmax-widthを指定しています。これにより、画像が画面幅に合わせて縮小され、スマートフォンでもはみ出しにくくなります。

共通パーツをそろえる考え方

4ページ構成のWebサイトでは、各ページの内容は違っても、ヘッダー、ナビゲーション、フッターは同じにすることが多いです。これにより、ユーザーはどのページに移動しても同じ感覚で操作できます。

共通パーツ役割
headerサイト名やロゴを表示する
nav各ページへのリンクをまとめる
mainページ固有の内容を入れる
footerコピーライトやサイト下部情報を表示する

共通パーツをそろえると、サイト全体に統一感が生まれます。ページを増やす場合も、同じヘッダーやフッターを使い回すことで、制作の手間を減らせます。

図2：共通CSSで4ページのデザインをそろえる

この図から分かること

複数ページのWebサイトでは、共通CSSを使うことで全ページのデザインをまとめて管理できます。ヘッダー、ナビゲーション、フッターなどを共通化すると、サイト全体の統一感が出ます。色や余白を変更したい場合も、CSSを修正するだけで全ページに反映しやすくなります。

トップページを作成する

トップページは、Webサイトの入口になるページです。サイト名、ナビゲーション、メイン画像、お知らせなどを配置し、サイト全体の雰囲気を伝えます。

ここでは、架空のWeb制作事務所「Studio Green Note」を例にします。CSSは先ほど作成したcss/style.cssを読み込みます。

ファイル名： index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Studio Green Note | トップページ</title>
<meta name="description" content="大阪のWeb制作事務所 Studio Green Noteの公式サイトです。Webサイト制作、デザイン、運用サポートを行っています。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Studio Green Note</h1>
    <nav id="menu">
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">事務所紹介</a></li>
        <li><a href="works.html">制作実績</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div id="contents">
      <img src="img/top.png" alt="Web制作事務所の明るい作業風景" class="topimg">

      <h2>お知らせ</h2>
      <article>
        <section>
          <h3>2026.07.10</h3>
          <p>中小企業向けWebサイト制作プランを公開しました。</p>
        </section>

        <section>
          <h3>2026.06.25</h3>
          <p>制作実績ページに新しいプロジェクトを追加しました。</p>
        </section>
      </article>
    </div>
  </main>

  <footer>
    <small>© Studio Green Note</small>
  </footer>
</body>
</html>

ブラウザの表示例

トップページでは、titleとmeta descriptionを設定し、検索エンジンやSNSなどでページ内容が伝わりやすいようにしています。meta name="viewport"も入れているため、スマートフォン表示にも対応しやすくなります。

body内では、headerにサイト名とナビゲーションを置き、mainの中にトップ画像とお知らせを配置しています。画像にはalt属性を指定し、画像が表示されない場合でも内容が伝わるようにしています。

トップページのポイント

トップページは、サイト全体の印象を決める重要なページです。訪問者が最初に見る可能性が高いため、何のサイトなのか、どのページに移動できるのかが分かりやすい構成にします。

要素役割
h1サイト名を大きく表示する
nav各ページへのリンクを並べる
imgサイトの雰囲気を伝える画像を表示する
h2お知らせなどの大きな見出しを作る
article、sectionお知らせのまとまりを表す
footerコピーライトを表示する

トップページでは、画像のパスにも注意します。img/top.pngは、imgフォルダーの中にあるtop.pngを読み込む指定です。ファイル名やフォルダー名が違うと画像が表示されないため、実際の配置とHTMLの指定をそろえましょう。

事務所紹介ページを作成する

事務所紹介ページでは、事務所の特徴、所在地、事業内容などを掲載します。会社案内やプロフィールページのような役割を持つページです。

ファイル名： about.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Studio Green Note | 事務所紹介</title>
<meta name="description" content="Studio Green Noteの事務所紹介ページです。Web制作への考え方、所在地、事業内容をご案内します。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Studio Green Note</h1>
    <nav id="menu">
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">事務所紹介</a></li>
        <li><a href="works.html">制作実績</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div id="contents">
      <h2>事務所について</h2>

      <section>
        <p>
          Studio Green Noteは、大阪を拠点に活動するWeb制作事務所です。<br>
          小規模店舗や個人事業主、中小企業に向けて、見やすく更新しやすいWebサイトを制作しています。<br>
          デザインだけでなく、情報整理や運用しやすさも大切にしています。
        </p>
      </section>

      <h3>概要</h3>
      <table class="tbl">
        <caption>事務所情報</caption>
        <tr>
          <th>名称</th>
          <td>Studio Green Note</td>
        </tr>
        <tr>
          <th>代表</th>
          <td>森田 陽菜</td>
        </tr>
        <tr>
          <th>所在地</th>
          <td>大阪府大阪市北区梅田1-2-3</td>
        </tr>
        <tr>
          <th>設立</th>
          <td>2020年4月</td>
        </tr>
        <tr>
          <th>事業内容</th>
          <td>
            <ul>
              <li>Webサイト制作</li>
              <li>レスポンシブデザイン対応</li>
              <li>Webサイト運用サポート</li>
              <li>バナー・画像制作</li>
            </ul>
          </td>
        </tr>
      </table>
    </div>
  </main>

  <footer>
    <small>© Studio Green Note</small>
  </footer>
</body>
</html>

ブラウザの表示例

about.htmlでは、事務所の説明文と事務所情報の表を掲載しています。表にはtable、caption、tr、th、tdを使っています。事業内容のように複数項目を並べる部分では、ulとliを使うと整理しやすくなります。

事務所紹介ページのポイント

紹介ページでは、ユーザーが安心して問い合わせできるように、事務所の概要を分かりやすく伝えます。所在地、代表者、事業内容などを表にまとめると、情報が見やすくなります。

要素役割
h2ページの大きなテーマを示す
section事務所説明のまとまりを作る
table事務所情報を表形式で整理する
caption表のタイトルを付ける
th項目名を示す
td項目の内容を示す
ul、li事業内容を箇条書きで示す

複数ページサイトでは、ナビゲーションを各ページで同じ内容にしておくことが大切です。about.htmlからも、index.html、works.html、contact.htmlへ移動できるようにしておきます。

制作実績ページを作成する

制作実績ページでは、過去に取り組んだ仕事やプロジェクトを紹介します。ユーザーに「どのような制作ができるのか」を伝えるページです。

ファイル名： works.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Studio Green Note | 制作実績</title>
<meta name="description" content="Studio Green Noteが制作したWebサイト、バナー、運用サポートなどの実績を紹介します。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Studio Green Note</h1>
    <nav id="menu">
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">事務所紹介</a></li>
        <li><a href="works.html">制作実績</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div id="contents">
      <h2>制作実績</h2>

      <section>
        <h3>Webサイト制作</h3>
        <ul>
          <li>ベーカリー「Sunny Bread」公式サイト（2026年）</li>
          <li>美容室「Hair Room Aoba」予約案内サイト（2025年）</li>
          <li>雑貨店「Little Garden」オンラインショップ（2024年）</li>
        </ul>
      </section>

      <section>
        <h3>デザイン・運用サポート</h3>
        <ul>
          <li>カフェ向けキャンペーンバナー制作（2026年）</li>
          <li>地域イベント告知ページ制作（2025年）</li>
          <li>企業サイトの更新代行とアクセス改善サポート（2024年）</li>
        </ul>
      </section>

      <p>掲載していない実績についても、ご相談内容に合わせてご案内できます。</p>
    </div>
  </main>

  <footer>
    <small>© Studio Green Note</small>
  </footer>
</body>
</html>

ブラウザの表示例

works.htmlでは、制作実績をカテゴリごとに分けています。Webサイト制作とデザイン・運用サポートのようにh3で分類し、それぞれの実績をulとliで一覧表示しています。

制作実績ページのポイント

制作実績ページでは、実績をただ並べるだけでなく、種類ごとに整理すると読みやすくなります。Webサイト制作、デザイン制作、運用サポートなど、カテゴリを分けることで、ユーザーは自分の目的に近い実績を見つけやすくなります。

要素役割
h2ページの主題を示す
h3実績のカテゴリを示す
ul、li実績を一覧として整理する
p補足説明や案内文を入れる

実績ページは、信頼感を伝えるためのページでもあります。制作年や案件の種類を入れると、どのような仕事をしてきたのかが伝わりやすくなります。

図3：ページごとに役割を分けて情報を整理する

この図から分かること

4ページ構成のWebサイトでは、各ページに役割を持たせることが大切です。トップページは入口、紹介ページは信頼感、実績ページは制作内容、お問い合わせページは連絡手段を担当します。役割を分けることで、ユーザーが知りたい情報にたどり着きやすくなります。

お問い合わせページを作成する

お問い合わせページでは、ユーザーが名前、メールアドレス、相談内容を入力できるフォームを用意します。実際の運用では、送信先としてメール送信プログラムやサーバー側の処理を指定します。

ファイル名： contact.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Studio Green Note | お問い合わせ</title>
<meta name="description" content="Studio Green Noteへのお問い合わせページです。Webサイト制作や運用サポートのご相談はこちらからご連絡ください。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Studio Green Note</h1>
    <nav id="menu">
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">事務所紹介</a></li>
        <li><a href="works.html">制作実績</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div id="contents">
      <h2>お問い合わせ</h2>

      <form action="#" method="post">
        <table class="tbl">
          <caption>Web制作や運用のご相談はこちらからお送りください</caption>
          <tr>
            <th>お名前</th>
            <td>
              <input type="text" name="name" class="ws" placeholder="例）田中花子">
            </td>
          </tr>
          <tr>
            <th>メールアドレス</th>
            <td>
              <input type="email" name="email" class="ws" placeholder="例）hanako@example.com">
            </td>
          </tr>
          <tr>
            <th>ご相談内容</th>
            <td>
              <textarea name="message" cols="30" rows="7" class="wl" placeholder="ご相談内容をご記入ください"></textarea>
            </td>
          </tr>
        </table>

        <div class="button_wrapper">
          <button type="submit" class="confirm">送信する</button>
        </div>
      </form>
    </div>
  </main>

  <footer>
    <small>© Studio Green Note</small>
  </footer>
</body>
</html>

ブラウザの表示例

contact.htmlでは、form、input、textarea、buttonを使ってお問い合わせフォームを作っています。input type="text"は名前入力、input type="email"はメールアドレス入力、textareaは相談内容の入力に使います。

formのaction="#"は、学習用の仮指定です。実際のWebサイトで運用する場合は、メール送信プログラムやフォーム処理サービスなど、送信内容を受け取る仕組みに変更します。

お問い合わせページのポイント

お問い合わせページでは、ユーザーが迷わず入力できることが大切です。項目名、入力欄、placeholder、送信ボタンを分かりやすく配置します。

要素役割
form入力欄全体をまとめる
input type="text"名前などの1行入力欄を作る
input type="email"メールアドレス入力欄を作る
textarea複数行の相談内容を入力する
button type="submit"フォームを送信する
name送信時のデータ名になる
placeholder入力前の案内文を表示する

お問い合わせフォームは、Webサイトの成果につながる重要なページです。入力欄が多すぎるとユーザーの負担になりやすいため、最初は必要最低限の項目にすると使いやすくなります。

共通ナビゲーションでページをつなぐ

4ページ構成のWebサイトでは、各ページのナビゲーションに同じリンクを入れておきます。これにより、ユーザーはどのページにいても、他のページへ移動できます。

リンク先役割
index.htmlトップページへ戻る
about.html事務所紹介を見る
works.html制作実績を見る
contact.html問い合わせる

ナビゲーションは、Webサイトの案内板のような役割を持ちます。各ページに共通して配置することで、ユーザーは迷わずサイト内を移動できます。

リンク先のファイル名を間違えるとページが開けなくなるため、HTMLファイル名とaタグのhrefの指定を必ずそろえましょう。

外部CSSの読み込みパスに注意する

各HTMLでは、CSSを次のように読み込みます。

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

この指定は、HTMLファイルと同じ階層にcssフォルダーがあり、その中にstyle.cssがある場合に使えます。今回の構成では、index.html、about.html、works.html、contact.htmlがすべてサイト直下にあるため、どのページでも同じ指定でCSSを読み込めます。

状況CSSの指定例
HTMLとcssフォルダーが同じ階層css/style.css
HTMLが下層フォルダーにある../css/style.cssのように戻る指定が必要
CSSファイル名が違う実際のファイル名に合わせて変更する

外部CSSが読み込まれないと、ページの見た目が崩れます。CSSが効かない場合は、まずhrefのパス、フォルダー名、ファイル名を確認しましょう。

画像の読み込みパスに注意する

トップページでは、次のように画像を読み込んでいます。

<img src="img/top.png" alt="Web制作事務所の明るい作業風景" class="topimg">

これは、HTMLファイルと同じ階層にimgフォルダーがあり、その中にtop.pngがある場合の指定です。画像が表示されない場合は、ファイル名、拡張子、フォルダー名を確認します。

確認すること内容
フォルダー名imgになっているか
ファイル名top.pngになっているか
拡張子png、jpgなどが一致しているか
パスHTMLから見た位置が正しいか
alt画像の説明が入っているか

画像にはalt属性も指定します。altは、画像が表示されない場合やスクリーンリーダーで読み上げる場合に役立ちます。画像の内容が分かる短い説明を入れておきましょう。

レスポンシブ対応のポイント

今回の共通CSSでは、画面幅が700px以下になったときに、ナビゲーションが縦並びになるようにしています。

@media screen and (max-width: 700px) {
  #menu ul {
    flex-direction: column;
  }
}

パソコンでは横幅に余裕があるため、メニューを横並びにすると見やすくなります。一方、スマートフォンでは横幅が狭いため、横並びのままだとメニューが詰まりやすくなります。そこで、メディアクエリを使って縦並びに切り替えます。

表示環境メニューの見え方
パソコン横並び
スマートフォン縦並び
タブレット幅に応じて折り返しや縦並びを検討

また、.topimgにはwidth: 100%とmax-widthを指定しているため、画像も画面幅に合わせて縮小されます。レスポンシブ対応では、メニューだけでなく、画像、表、フォームも画面からはみ出さないように調整することが大切です。

ブラウザの表示例

主要タグとCSSの役割

今回の4ページ構成サイトで使う主なタグやCSSを整理しておきます。

タグ・CSS説明・ポイント
headerサイト上部のまとまりを作る
footerサイト下部のまとまりを作る
navナビゲーションメニューを作る
ul、liメニューや実績一覧をリストで整理する
aページ同士をリンクでつなぐ
mainページの主要コンテンツを表す
section内容のまとまりを作る
articleお知らせなど独立した内容を表す
img画像を表示する
alt画像の代替テキストを指定する
link rel="stylesheet"外部CSSを読み込む
table事務所情報やフォーム項目を表形式で整理する
formお問い合わせフォーム全体をまとめる
input1行入力欄を作る
textarea複数行の入力欄を作る
button送信ボタンを作る
@media画面幅に応じてCSSを切り替える
font-family使用するフォントを指定する
max-width横幅が広がりすぎないようにする
margin: auto要素を中央寄せにする

これらのタグやCSSは、これまで学んできたHTMLとCSSの基本を組み合わせたものです。4ページ構成のWebサイトでは、単独のタグを覚えるだけでなく、ページ全体の構造としてどう組み合わせるかが大切になります。

4ページ構成サイトを作るときの確認ポイント

Webサイトが完成したら、ブラウザで表示しながら動作確認を行います。4ページ構成では、見た目だけでなく、リンクやファイルパスも確認しましょう。

確認することチェック内容
ナビゲーション4ページすべてに移動できるか
CSS読み込み全ページで同じデザインが反映されているか
画像表示top.pngが正しく表示されているか
レスポンシブ表示スマートフォン幅でメニューや画像が崩れないか
titleページごとに適切なタイトルになっているか
descriptionページ内容に合った説明文になっているか
フォーム入力欄と送信ボタンが表示されているか
ファイル名HTML、CSS、画像の名前がリンクと一致しているか

特にリンクの確認は大切です。index.htmlからabout.htmlへ移動できても、works.htmlやcontact.htmlから戻れない場合があります。すべてのページでメニューをクリックし、正しくページが開くか確認しましょう。

サイト全体を設計してから作ることが大切

4ページ構成のWebサイトを作るときは、いきなりHTMLを書き始めるよりも、最初に全体設計を考えるとスムーズです。

まず、どのページを作るのかを決めます。次に、各ページにどの情報を入れるのかを整理します。その後、フォルダー構成を決め、共通CSSを作り、各HTMLファイルを作成していきます。

手順内容
ページ構成を決めるindex、about、works、contactなどを決める
フォルダー構成を決めるcss、imgなどを分ける
共通パーツを決めるheader、nav、footerをそろえる
共通CSSを作る全ページのデザインを一括管理する
各HTMLを作るページごとの内容を記述する
表示確認をするリンク、画像、レスポンシブ表示を確認する

この流れで進めると、制作途中でファイルが迷子になりにくくなります。Webサイト制作では、コードを書く力だけでなく、情報を整理して設計する力も大切です。

4ページ構成で学べる実践的な力

4ページ構成のWebサイト制作では、HTMLとCSSの基本を総合的に使います。ページ構造、リンク、画像、テーブル、フォーム、外部CSS、レスポンシブ対応など、多くの要素が組み合わさります。

トップページではサイトの入口を作り、事務所紹介ページでは情報を表で整理し、制作実績ページではリストで実績を見せ、お問い合わせページではフォームを作ります。さらに、共通CSSを使って全ページの見た目をそろえます。

このように、複数ページを作ることで、Webサイト全体を構築する感覚が身につきます。単体のHTML練習から一歩進んで、実際に使えるWebサイトを作る力を育てることができます。

4ページ構成は、学習にも実務の練習にも取り組みやすい規模です。まずはシンプルな構成から作り、慣れてきたらサービス紹介ページ、よくある質問ページ、ブログ一覧ページなどを追加していくと、より本格的なWebサイトへ発展させられます。