6日でできる 新HTML入門｜ページレイアウト作成の基本②

共通レイアウトを活かして、複数ページのサイトを効率よく作る。メインコンテンツとフッターを整えて、統一感のあるWebサイトに仕上げよう。

ページレイアウト作成の基本①では、ページ全体を囲むコンテナを作り、ヘッダー、ナビゲーション、メイン領域、フッターといった大きな構成を確認しました。今回は、その基本レイアウトをもとに、メインコンテンツとフッターを具体的に作り込み、複数ページで共通のデザインを使い回す方法を学習します。

Webサイトは、1つのページだけで完結することもありますが、多くの場合は、TOPページ、詳しい解説ページ、カテゴリ別ページ、問い合わせページなど、複数のページで構成されます。そのときに重要になるのが、共通部分と個別部分を分けて考えることです。

たとえば、ヘッダー、ナビゲーション、フッターは、サイト全体で同じデザインにすることが多い部分です。一方、メインコンテンツは、ページごとに内容が変わります。共通部分を同じ形でそろえ、メインコンテンツだけを書き換えるようにすると、統一感のあるサイトを効率よく作成できます。

ここでは、「コンピュータの歴史」をテーマにしたサイトを例に、TOPページ、1940年代、1960年代、1980年代、2000年代のページを作成します。各ページでは、同じヘッダー、ナビゲーション、フッターを使い、メインコンテンツだけを年代ごとに変更します。

素材のダウンロード

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

page-layout-creation2ダウンロード
computer-history-header.pngeniac-computer.pngpdp8-computer.pngibm-pc.pngsmartphone-history.png

共通テンプレートを使う考え方

複数ページのサイトを作るときは、最初に共通のテンプレートを作ると作業しやすくなります。テンプレートとは、ページ全体の基本構造をあらかじめ用意したものです。

たとえば、次のような構造を共通テンプレートとして考えます。

<div id="container">
  <header>サイトタイトル</header>
  <nav>ナビゲーション</nav>
  <div id="main">ページごとの内容</div>
  <footer>著作権表示</footer>
</div>

この構造では、header、nav、footerは各ページでほぼ共通です。ページごとに変えるのは、主にdiv id="main"の中身です。

共通部分と個別部分

領域内容ページごとの変更
headerサイトタイトルや背景画像基本的には共通
nav各ページへのリンク基本的には共通
div id="main"ページ本文、画像、見出しページごとに変更
footer著作権表示など基本的には共通

このように考えると、1つのページを完成させたあと、そのファイルをコピーして本文部分だけ差し替えることで、複数ページを効率よく作れます。

図1：共通テンプレートとメインコンテンツの差し替え

この図から分かること

複数ページのサイトでは、header、nav、footerを共通化し、mainの中身だけをページごとに変えると効率よく作成できます。共通テンプレートを用意しておくと、ページを追加するときもデザインの統一感を保ちやすくなります。

メインコンテンツ領域を作る

メインコンテンツは、ページの中心となる本文を表示する領域です。今回のサンプルでは、div id="main"を使って、各ページの本文や画像を配置します。

<div id="main">
  <h1>サイトの概要</h1>
  <p>ここに本文を入れます。</p>
</div>

CSSでは、#mainにpaddingやline-heightを指定します。paddingは内側の余白、line-heightは行間です。本文がコンテナの端にくっつかないように余白を作り、行間を広げることで読みやすくします。

#main {
  padding: 20px;
  line-height: 1.6;
}

レイアウト確認のために、一時的にheightを指定することもあります。ただし、実際のページでは本文量に応じて高さが変わるほうが自然なので、確認が終わったら固定のheightは削除するのが基本です。

#mainに指定しやすいCSS

CSS役割
padding本文領域の内側余白を作る
line-height行間を調整する
margin外側の余白を調整する
background-color本文領域の背景色を指定する
height高さを指定する。確認用として使うこともある

本文領域は、読みやすさがとても大切です。文字が詰まりすぎないようにpaddingとline-heightを調整しましょう。

メイン見出しを装飾する

メインコンテンツ内の見出しは、ページの内容を区切る大切な要素です。h1に背景色や文字色、余白、角丸、影を付けると、見出しとして目立たせることができます。

#main h1 {
  margin-bottom: 15px;
  padding: 8px 12px;
  background-color: #0055A4;
  color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 2px 2px 6px #888888;
  font-size: 20pt;
}

この指定では、h1に青い背景色を付け、文字を白にしています。paddingで内側に余白を作り、border-radiusで角を少し丸くし、box-shadowで影を付けています。

h1装飾で使う主なCSS

CSS役割
background-color見出しの背景色を指定する
color文字色を指定する
padding見出し内側の余白を作る
margin-bottom見出し下の余白を作る
border-radius角を丸くする
box-shadow影を付ける
font-size文字サイズを指定する

見出しの装飾は、ページ全体の印象を決める重要な部分です。背景色と文字色のコントラストをしっかり確保し、読みやすい見た目に整えましょう。

画像をメインコンテンツに配置する

コンピュータの歴史を紹介するページでは、年代を象徴する画像を本文中に入れると、内容が理解しやすくなります。

<img src="eniac-computer.png" alt="ENIACの計算機">

画像には、src属性で画像ファイル名を指定し、alt属性で画像の説明を書きます。altは、画像が表示されない場合や読み上げ環境で内容を伝えるために大切です。

CSSでは、画像の横幅、中央配置、枠線、角丸などを指定できます。

#main img {
  display: block;
  max-width: 100%;
  margin: 15px auto;
  border: solid 2px #333333;
  border-radius: 4px;
}

display: block;を指定すると、画像をブロック要素のように扱えます。margin: 15px auto;を組み合わせることで、画像を中央に配置できます。max-width: 100%;を指定しておくと、画像が親要素の幅を超えにくくなります。

図2：メインコンテンツに見出し・本文・画像を配置する

この図から分かること

メインコンテンツでは、見出し、本文、画像、リストを組み合わせてページの中心となる情報を表示します。#mainにpaddingやline-heightを指定すると、本文が読みやすくなります。画像にはmax-widthやmarginを指定して、本文領域に収まるように整えます。

フッター領域を作る

footerタグは、ページ下部の情報をまとめるために使います。著作権表示、サイト名、連絡先、補足リンクなどを入れることが多い領域です。

<footer>
  © 2026 Computer Archive. All rights reserved.
</footer>

CSSでは、背景色、文字色、中央揃え、余白、文字サイズを指定すると、フッターらしい見た目になります。

footer {
  background-color: #222222;
  color: #AAAAAA;
  text-align: center;
  padding: 10px;
  font-size: 10pt;
}

footerはページの一番下に置かれるため、本文とは違う背景色にすると、ページの終わりが分かりやすくなります。暗い背景に淡い文字を使うと、落ち着いた印象になります。

フッターに指定しやすいCSS

CSS役割
background-colorフッターの背景色を指定する
color文字色を指定する
text-align文字の横位置を指定する
padding内側の余白を指定する
font-size文字サイズを指定する

フッターは、目立ちすぎる必要はありませんが、ページの締めくくりとして分かりやすく整えておくことが大切です。

TOPページを作る

まずは、コンピュータの歴史サイトのTOPページを作成します。ここでは、サイト全体の概要を説明し、各年代ページへ進めるようにナビゲーションメニューを配置します。

ファイル名： Lesson27-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンピュータの歴史</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #CCCCCC;
      font-family: sans-serif;
    }

    #container {
      width: 800px;
      margin: auto;
      background-color: #FFFFFF;
      border: solid 3px #333333;
    }

    header {
      height: 430px;
      background: url("computer-history-header.png") no-repeat center;
      background-size: cover;
    }

    #title {
      padding: 350px 20px 0;
      color: #FFFFFF;
      font-size: 32pt;
      font-weight: bold;
      text-shadow: 2px 2px 6px #000000;
    }

    nav ul {
      list-style: none;
      background-color: #444444;
      text-align: center;
    }

    nav li {
      display: inline-block;
    }

    nav a {
      display: inline-block;
      padding: 10px 15px;
      color: #FFFFFF;
      text-decoration: none;
      font-weight: bold;
    }

    nav a:hover {
      background-color: #666666;
    }

    #main {
      padding: 20px;
      line-height: 1.6;
    }

    #main h1 {
      margin-bottom: 15px;
      padding: 8px 12px;
      background-color: #0055A4;
      color: #FFFFFF;
      border-radius: 4px;
      border-left: solid 6px #002D72;
      border-right: solid 6px #002D72;
      box-shadow: 2px 2px 6px #888888;
      font-size: 20pt;
    }

    #main p {
      margin-bottom: 15px;
    }

    #main img {
      display: block;
      max-width: 100%;
      margin: 15px auto;
      border: solid 2px #333333;
      border-radius: 4px;
    }

    #main ul {
      margin-left: 24px;
      list-style: disc;
    }

    footer {
      background-color: #222222;
      color: #AAAAAA;
      text-align: center;
      padding: 10px;
      font-size: 10pt;
    }
  </style>
</head>
<body>
  <div id="container">
    <header>
      <div id="title">コンピュータの歴史</div>
    </header>

    <nav>
      <ul>
        <li><a href="Lesson27-1.html">TOPページ</a></li>
        <li><a href="Lesson27-2.html">1940年代</a></li>
        <li><a href="Lesson27-3.html">1960年代</a></li>
        <li><a href="Lesson27-4.html">1980年代</a></li>
        <li><a href="Lesson27-5.html">2000年代</a></li>
      </ul>
    </nav>

    <div id="main">
      <h1>サイトの概要</h1>
      <p>
        コンピュータの歴史は、巨大な電子計算機から、個人が手元で使える小型端末へと発展してきた流れを紹介するサイトです。
        各年代の代表的な技術や機器を、写真と文章で分かりやすく整理します。
      </p>

      <img src="eniac-computer.png" alt="初期の電子計算機">

      <p>
        1940年代の真空管式計算機、1960年代のミニコンピュータ、1980年代のパーソナルコンピュータ、
        2000年代のスマートフォンまで、コンピュータは時代とともに使われ方を大きく変えてきました。
      </p>

      <h1>このサイトで学べること</h1>
      <ul>
        <li>コンピュータが大型機から小型端末へ発展した流れ</li>
        <li>各年代を代表する機器や技術の特徴</li>
        <li>社会や生活に与えた影響</li>
      </ul>
    </div>

    <footer>
      © 2026 Computer Archive. All rights reserved.
    </footer>
  </div>
</body>
</html>

ブラウザの表示例

このTOPページでは、サイト全体の共通レイアウトを完成させています。containerでページ全体を中央に配置し、headerに背景画像とタイトルを入れています。

navには、TOPページ、1940年代、1960年代、1980年代、2000年代へのリンクを並べています。各リンクのhrefには、Lesson27-1.htmlからLesson27-5.htmlまでのファイル名を指定しています。

#mainには、サイトの概要、画像、箇条書きリストを入れています。#main h1に装飾を指定しているため、見出しが青い帯のように表示されます。

footerには、著作権表示を入れています。フッターは各ページで共通にすることで、サイト全体の統一感が出ます。

1940年代ページを作る

次に、TOPページの構造をもとに、1940年代ページを作ります。共通部分はそのまま使い、title、header内のタイトル、#mainの内容を1940年代向けに変更します。

ファイル名： Lesson27-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンピュータの歴史 1940年代</title>
  <style>
    * { margin: 0; padding: 0; }
    body { background-color: #CCCCCC; font-family: sans-serif; }
    #container { width: 800px; margin: auto; background-color: #FFFFFF; border: solid 3px #333333; }
    header { height: 430px; background: url("computer-history-header.png") no-repeat center; background-size: cover; }
    #title { padding: 350px 20px 0; color: #FFFFFF; font-size: 32pt; font-weight: bold; text-shadow: 2px 2px 6px #000000; }
    nav ul { list-style: none; background-color: #444444; text-align: center; }
    nav li { display: inline-block; }
    nav a { display: inline-block; padding: 10px 15px; color: #FFFFFF; text-decoration: none; font-weight: bold; }
    nav a:hover { background-color: #666666; }
    #main { padding: 20px; line-height: 1.6; }
    #main h1 { margin-bottom: 15px; padding: 8px 12px; background-color: #0055A4; color: #FFFFFF; border-radius: 4px; border-left: solid 6px #002D72; border-right: solid 6px #002D72; box-shadow: 2px 2px 6px #888888; font-size: 20pt; }
    #main p { margin-bottom: 15px; }
    #main img { display: block; max-width: 100%; margin: 15px auto; border: solid 2px #333333; border-radius: 4px; }
    footer { background-color: #222222; color: #AAAAAA; text-align: center; padding: 10px; font-size: 10pt; }
  </style>
</head>
<body>
  <div id="container">
    <header>
      <div id="title">コンピュータの歴史 1940年代</div>
    </header>

    <nav>
      <ul>
        <li><a href="Lesson27-1.html">TOPページ</a></li>
        <li><a href="Lesson27-2.html">1940年代</a></li>
        <li><a href="Lesson27-3.html">1960年代</a></li>
        <li><a href="Lesson27-4.html">1980年代</a></li>
        <li><a href="Lesson27-5.html">2000年代</a></li>
      </ul>
    </nav>

    <div id="main">
      <h1>1940年代</h1>
      <p>
        1940年代は、電子計算機の基礎が大きく発展した時代です。
        真空管を使った大型計算機が登場し、それまで人の手で行っていた複雑な計算を高速に処理できるようになりました。
      </p>

      <img src="eniac-computer.png" alt="ENIACの計算機">

      <p>
        ENIACは、初期の代表的な電子計算機として知られています。
        現在のコンピュータと比べると非常に大きな装置でしたが、計算処理の自動化という点で大きな意味を持っていました。
      </p>
    </div>

    <footer>
      © 2026 Computer Archive. All rights reserved.
    </footer>
  </div>
</body>
</html>

ブラウザの表示例

このページでは、#mainの内容を1940年代の説明に変更しています。ヘッダー、ナビゲーション、フッターはTOPページと同じ構造です。

複数ページを作るときは、このように共通部分を保ちながら、必要な本文と画像だけを差し替えると効率よく作業できます。

1960年代ページを作る

1960年代ページでは、ミニコンピュータの普及をテーマにします。TOPページや1940年代ページと同じレイアウトを使い、#mainだけを書き換えます。

ファイル名： Lesson27-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンピュータの歴史 1960年代</title>
  <style>
    * { margin: 0; padding: 0; }
    body { background-color: #CCCCCC; font-family: sans-serif; }
    #container { width: 800px; margin: auto; background-color: #FFFFFF; border: solid 3px #333333; }
    header { height: 430px; background: url("computer-history-header.png") no-repeat center; background-size: cover; }
    #title { padding: 350px 20px 0; color: #FFFFFF; font-size: 32pt; font-weight: bold; text-shadow: 2px 2px 6px #000000; }
    nav ul { list-style: none; background-color: #444444; text-align: center; }
    nav li { display: inline-block; }
    nav a { display: inline-block; padding: 10px 15px; color: #FFFFFF; text-decoration: none; font-weight: bold; }
    nav a:hover { background-color: #666666; }
    #main { padding: 20px; line-height: 1.6; }
    #main h1 { margin-bottom: 15px; padding: 8px 12px; background-color: #0055A4; color: #FFFFFF; border-radius: 4px; border-left: solid 6px #002D72; border-right: solid 6px #002D72; box-shadow: 2px 2px 6px #888888; font-size: 20pt; }
    #main p { margin-bottom: 15px; }
    #main img { display: block; max-width: 100%; margin: 15px auto; border: solid 2px #333333; border-radius: 4px; }
    footer { background-color: #222222; color: #AAAAAA; text-align: center; padding: 10px; font-size: 10pt; }
  </style>
</head>
<body>
  <div id="container">
    <header>
      <div id="title">コンピュータの歴史 1960年代</div>
    </header>

    <nav>
      <ul>
        <li><a href="Lesson27-1.html">TOPページ</a></li>
        <li><a href="Lesson27-2.html">1940年代</a></li>
        <li><a href="Lesson27-3.html">1960年代</a></li>
        <li><a href="Lesson27-4.html">1980年代</a></li>
        <li><a href="Lesson27-5.html">2000年代</a></li>
      </ul>
    </nav>

    <div id="main">
      <h1>1960年代</h1>
      <p>
        1960年代には、研究機関や大学で使いやすい小型のコンピュータが注目されるようになりました。
        大型コンピュータよりも導入しやすい機器が登場し、利用できる場所が広がっていきました。
      </p>

      <img src="pdp8-computer.png" alt="PDP-8ミニコンピュータ">

      <p>
        PDP-8は、ミニコンピュータの代表的な機種として知られています。
        小型で比較的低価格だったため、教育や研究の現場でもコンピュータを活用しやすくなりました。
      </p>
    </div>

    <footer>
      © 2026 Computer Archive. All rights reserved.
    </footer>
  </div>
</body>
</html>

ブラウザの表示例

このページでは、画像ファイル名をpdp8-computer.pngにしています。HTMLの内容に合うファイル名を付けることで、あとから見たときに何の画像か分かりやすくなります。

1980年代ページを作る

1980年代ページでは、パーソナルコンピュータの普及をテーマにします。個人やオフィスでコンピュータが使われるようになった時代を紹介します。

ファイル名： Lesson27-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンピュータの歴史 1980年代</title>
  <style>
    * { margin: 0; padding: 0; }
    body { background-color: #CCCCCC; font-family: sans-serif; }
    #container { width: 800px; margin: auto; background-color: #FFFFFF; border: solid 3px #333333; }
    header { height: 430px; background: url("computer-history-header.png") no-repeat center; background-size: cover; }
    #title { padding: 350px 20px 0; color: #FFFFFF; font-size: 32pt; font-weight: bold; text-shadow: 2px 2px 6px #000000; }
    nav ul { list-style: none; background-color: #444444; text-align: center; }
    nav li { display: inline-block; }
    nav a { display: inline-block; padding: 10px 15px; color: #FFFFFF; text-decoration: none; font-weight: bold; }
    nav a:hover { background-color: #666666; }
    #main { padding: 20px; line-height: 1.6; }
    #main h1 { margin-bottom: 15px; padding: 8px 12px; background-color: #0055A4; color: #FFFFFF; border-radius: 4px; border-left: solid 6px #002D72; border-right: solid 6px #002D72; box-shadow: 2px 2px 6px #888888; font-size: 20pt; }
    #main p { margin-bottom: 15px; }
    #main img { display: block; max-width: 100%; margin: 15px auto; border: solid 2px #333333; border-radius: 4px; }
    footer { background-color: #222222; color: #AAAAAA; text-align: center; padding: 10px; font-size: 10pt; }
  </style>
</head>
<body>
  <div id="container">
    <header>
      <div id="title">コンピュータの歴史 1980年代</div>
    </header>

    <nav>
      <ul>
        <li><a href="Lesson27-1.html">TOPページ</a></li>
        <li><a href="Lesson27-2.html">1940年代</a></li>
        <li><a href="Lesson27-3.html">1960年代</a></li>
        <li><a href="Lesson27-4.html">1980年代</a></li>
        <li><a href="Lesson27-5.html">2000年代</a></li>
      </ul>
    </nav>

    <div id="main">
      <h1>1980年代</h1>
      <p>
        1980年代は、パーソナルコンピュータが広く普及し始めた時代です。
        それまで専門機関や企業で使われることが多かったコンピュータが、個人や小規模なオフィスでも使われるようになりました。
      </p>

      <img src="ibm-pc.png" alt="IBM PC">

      <p>
        IBM PCの登場は、パーソナルコンピュータ市場に大きな影響を与えました。
        仕事、学習、文書作成、表計算など、さまざまな用途でコンピュータが身近な道具になっていきました。
      </p>
    </div>

    <footer>
      © 2026 Computer Archive. All rights reserved.
    </footer>
  </div>
</body>
</html>

ブラウザの表示例

このページでも、共通レイアウトは変えずに、mainの見出し、本文、画像だけを1980年代向けに変更しています。

複数ページを作るときは、変更する場所を決めておくと、修正ミスを減らせます。title、#title、#mainのh1、本文、画像のsrcとaltを確認するとよいでしょう。

2000年代ページを作る

2000年代ページでは、スマートフォンの登場とモバイルコンピューティングの広がりをテーマにします。

ファイル名： Lesson27-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コンピュータの歴史 2000年代</title>
  <style>
    * { margin: 0; padding: 0; }
    body { background-color: #CCCCCC; font-family: sans-serif; }
    #container { width: 800px; margin: auto; background-color: #FFFFFF; border: solid 3px #333333; }
    header { height: 430px; background: url("computer-history-header.png") no-repeat center; background-size: cover; }
    #title { padding: 350px 20px 0; color: #FFFFFF; font-size: 32pt; font-weight: bold; text-shadow: 2px 2px 6px #000000; }
    nav ul { list-style: none; background-color: #444444; text-align: center; }
    nav li { display: inline-block; }
    nav a { display: inline-block; padding: 10px 15px; color: #FFFFFF; text-decoration: none; font-weight: bold; }
    nav a:hover { background-color: #666666; }
    #main { padding: 20px; line-height: 1.6; }
    #main h1 { margin-bottom: 15px; padding: 8px 12px; background-color: #0055A4; color: #FFFFFF; border-radius: 4px; border-left: solid 6px #002D72; border-right: solid 6px #002D72; box-shadow: 2px 2px 6px #888888; font-size: 20pt; }
    #main p { margin-bottom: 15px; }
    #main img { display: block; max-width: 100%; margin: 15px auto; border: solid 2px #333333; border-radius: 4px; }
    footer { background-color: #222222; color: #AAAAAA; text-align: center; padding: 10px; font-size: 10pt; }
  </style>
</head>
<body>
  <div id="container">
    <header>
      <div id="title">コンピュータの歴史 2000年代</div>
    </header>

    <nav>
      <ul>
        <li><a href="Lesson27-1.html">TOPページ</a></li>
        <li><a href="Lesson27-2.html">1940年代</a></li>
        <li><a href="Lesson27-3.html">1960年代</a></li>
        <li><a href="Lesson27-4.html">1980年代</a></li>
        <li><a href="Lesson27-5.html">2000年代</a></li>
      </ul>
    </nav>

    <div id="main">
      <h1>2000年代</h1>
      <p>
        2000年代には、インターネットが生活の中にさらに深く入り込み、スマートフォンの登場によってコンピュータの使い方が大きく変わりました。
        持ち歩ける端末で、情報検索、メール、写真、動画、地図、買い物などが行えるようになりました。
      </p>

      <img src="smartphone-history.png" alt="スマートフォン">

      <p>
        スマートフォンは、電話とコンピュータの機能を組み合わせた身近な情報端末です。
        いつでもどこでもインターネットに接続できるようになり、コンピュータは机の上だけでなく、日常生活の中で使われる道具になりました。
      </p>
    </div>

    <footer>
      © 2026 Computer Archive. All rights reserved.
    </footer>
  </div>
</body>
</html>

ブラウザの表示例

このページでは、2000年代の内容に合わせてsmartphone-history.pngを使っています。画像ファイル名は、内容が分かるように具体的な名前にしています。

複数ページを効率よく作る手順

複数ページのサイトを作るときは、次のような流れで進めると分かりやすくなります。

手順内容
1TOPページで基本レイアウトを完成させる
2TOPページをコピーして年代別ページを作る
3titleとheader内のタイトルを書き換える
4div id="main"の中身をページごとの内容に変更する
5画像のsrcとaltを内容に合わせて変更する
6navのリンク先が正しいか確認する
7ブラウザで各ページを開いて表示を確認する

ページをコピーして作る場合は、共通部分を不用意に変更しないように注意します。ヘッダーやナビゲーションを各ページでそろえることで、サイト全体に統一感が出ます。

図3：複数ページサイトは共通部分と個別部分で管理する

この図から分かること

複数ページのサイトでは、header、nav、footerを共通にし、mainだけをページごとに変更すると管理しやすくなります。1つの完成したページをテンプレートとして複製し、必要な部分だけを書き換えることで、統一感のあるサイトを効率よく作れます。

共通CSSを外部ファイルにまとめる考え方

今回のサンプルでは、各HTMLファイルのstyleタグ内に同じCSSを書いています。学習用としては、1つのファイル内でHTMLとCSSの関係を確認しやすい方法です。

ただし、実際のWebサイトでは、同じCSSを複数ページに何度も書くと、修正が大変になります。たとえば、ナビゲーションの背景色を変更したい場合、5つのHTMLファイルすべてを修正しなければなりません。

そのようなときは、CSSを外部ファイルにまとめる方法が便利です。

<link rel="stylesheet" href="history-style.css">

外部CSSファイルを使えば、history-style.cssを1か所修正するだけで、すべてのページに同じ変更を反映できます。複数ページのサイトでは、外部CSSを使うと保守しやすくなります。

使用タグ一覧と解説

この学習で登場した主なHTMLタグを整理します。

タグ用途
htmlHTML文書全体を表す
head文字コード、タイトル、CSSなどの情報を書く
meta文字コードを指定する
titleブラウザのタブに表示されるタイトルを指定する
styleHTML内にCSSを書く
bodyブラウザに表示される内容を書く
div id="container"ページ全体を囲むコンテナを作る
headerページ上部のヘッダー領域を作る
div id="title"ヘッダー内のタイトル文字を表示する
navナビゲーション領域を作る
ulメニュー項目のまとまりを作る
liメニューの各項目を作る
aリンクを作る
div id="main"ページごとのメインコンテンツを作る
h1メインコンテンツ内の見出しを作る
p本文の段落を作る
img画像を表示する
footerページ下部のフッター領域を作る

div id="container"は、ページ全体を囲む大きな箱として使います。header、nav、div id="main"、footerは、その中に入る主要な領域です。

navの中では、ul、li、aを組み合わせてリンクメニューを作ります。div id="main"の中身は、ページごとに変更する中心的な内容です。footerには著作権表示など、ページ下部に共通して表示したい情報を入れます。

使用CSS一覧と解説

今回のサンプルで使っている主なCSSを整理します。

CSS用途
margin外側の余白を指定する
padding内側の余白を指定する
widthページ本体や画像の横幅を指定する
background-color背景色を指定する
background背景画像や表示方法を指定する
background-size背景画像の大きさを調整する
color文字色を指定する
font-familyフォントの種類を指定する
font-size文字サイズを指定する
font-weight文字の太さを指定する
text-align文字やメニューの揃えを指定する
text-decorationリンクの下線を調整する
text-shadow文字に影を付ける
line-height行間を指定する
border枠線を指定する
border-left左側の枠線を指定する
border-right右側の枠線を指定する
border-radius角を丸くする
box-shadow影を付ける
display要素の表示方法を指定する
max-width最大横幅を指定する
list-styleリストマーカーを指定する

ページレイアウトでは、containerにwidthとmarginを指定して中央に配置し、header、nav、main、footerを順番に並べる流れが基本です。メインコンテンツではpaddingとline-heightを使って読みやすくし、画像にはmax-widthとmarginを指定して中央に配置します。

ページレイアウト作成②で意識したいこと

複数ページのサイトを作るときは、最初に1つの完成形を作り、それをテンプレートとして使うと効率的です。header、nav、footerを共通にし、mainだけを差し替えるようにすると、デザインの統一感を保ちながらページを増やせます。

TOPページではサイト全体の紹介を行い、年代別ページではそれぞれの時代に合わせた本文と画像を配置します。各ページのnavには同じリンクを用意しておくことで、どのページからでも別の年代ページへ移動できます。

学習段階では、CSSを各HTMLファイル内に書いても問題ありません。ただし、実際の制作では、共通CSSを外部ファイルにまとめると修正が楽になります。ページ数が増えるほど、共通部分をどのように管理するかが大切になります。

ページレイアウト作成②では、単に1ページを作るだけでなく、同じデザインを複数ページへ展開する考え方を身につけることが重要です。共通テンプレートを作り、メインコンテンツを差し替えながらページを増やす流れを理解すると、まとまりのあるWebサイトを作りやすくなります。