【6日でできるHTML入門】ページレイアウトの作成②

　ここでは、前コンテンツで作成した「コンピュータの歴史」サイトの基本レイアウト（ヘッダー・ナビゲーション・コンテナー）をベースに、メインコンテンツ領域とフッター領域を実装する手順を解説します。

  • ページ全体のテンプレートを流用して効率的に作業を進める方法
  • メインコンテンツの埋め込みと CSS による装飾
  • フッター領域の作成とナビゲーション先ページの複製

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

creating-page-layout2ダウンロード
eniac.pngpdp8.pngibmpc.pngiphone.png

１．メインコンテンツの作成

1.1. コンテナー内に <div id="main"> を配置

CSS 例：

セレクタプロパティ説明
#mainpadding:30px;周囲に内側余白を設定
height:500px;（一時的）レイアウト確認用の高さ（後で削除）
line-height:1.6;行間を調整

1.2. 見出しと本文の装飾

h1 タグ装飾例：

プロパティ例説明
background-color#FF3333背景色
border-radius5px角丸
box-shadow4px 4px 10px #999影の指定
padding,margin5px 7px / margin-bottom:20px内側余白・下余白
font-size,color14pt / #FFF文字サイズ・文字色

1.3. 画像配置とレイアウト

  • <img> タグで 1940 年代の計算機写真を挿入
  • クラス名を付与して幅・高さ・配置を指定

２．フッター領域の作成

2.1. <footer> タグの設置

HTML 例：

<footer>
  © 2025 Computer History Inc. All rights reserved.
</footer>

2.2. CSS 装飾例

プロパティ例説明
background-color#222背景色
color#aaa文字色
text-aligncenter中央揃え
padding10px 0上下内側余白
font-size10pt文字サイズ

３．リンク先ページの複製と調整

3.1. テンプレートの複製

1940s.html をベースに 1960s.html、1980s.html、2000s.html を作成

3.2. メインコンテンツ書き換え

<div id="main">…</div> 内だけを各年代コンテンツに差し替え

４．メインコンテンツの実装

4.1. TOPページの HTML（index.html）

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

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

    /* ページ全体のコンテナ */
    #container {
      width:800px;
      margin:auto;
      background:#fff;
      border:3px solid #333;
    }

    /* ヘッダー */
    header {
      height:460px;
      background: url("history-header.png") no-repeat center;
    }
    #title {
      padding:380px 20px 0;
      color:#fff;
      font-size:32pt;
      font-weight:bold;
    }

    /* ナビゲーション */
    nav ul {
      list-style:none;
      background:#444;
      text-align:center;
    }
    nav li {
      display:inline-block;
    }
    nav a {
      display:inline-block;
      padding:10px 15px;
      color:#fff;
      text-decoration:none;
    }
    nav a:hover {
      background:#666;
    }

    /* メインコンテンツ */
    #main {
      padding:20px;
      line-height:1.6;
    }
    #main h1 {
      margin-bottom:15px;
      padding:8px 12px;
      background:#0055A4;
      color:#fff;
      border-radius:4px;
      border-left:6px solid #002d72;
      border-right:6px solid #002d72;
      box-shadow:2px 2px 6px #888;
      font-size:20pt;
    }
    #main p {
      margin-bottom:15px;
    }
    #main img {
      display:block;
      max-width:100%;
      margin:15px auto;
      border:2px solid #333;
      border-radius:4px;
    }
    #main ul {
      margin-left:20px;
      list-style: disc;
    }

    /* フッター */
    footer {
      background:#222;
      color:#aaa;
      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="index.html">TOPページ</a></li>
        <li><a href="1940s.html">1940年代</a></li>
        <li><a href="1960s.html">1960年代</a></li>
        <li><a href="1980s.html">1980年代</a></li>
        <li><a href="2000s.html">2000年代</a></li>
      </ul>
    </nav>

    <div id="main">
      <h1>サイトの概要</h1>
      <p>
        「コンピュータの歴史」は、電子計算機の誕生から現代の小型デバイスまで、  
        70年以上にわたる技術の発展を年代ごとに振り返るサイトです。  
        各年代の代表的なマシンや開発者、社会への影響を、写真や解説とともにご紹介します。
      </p>
      <img src="eniac.png" alt="ENIAC 計算機">
      <p>
        1940年代の巨大な真空管式から、1960年代のミニコンピュータ、  
        1980年代のパーソナルコンピュータ、2000年代のシングルボードコンピュータまで。  
        ぜひナビゲーションメニューから各年代のページへお進みください。
      </p>
      <h1>こんな方におすすめ</h1>
      <ul>
        <li>コンピュータ技術の歩みを学びたい学生・研究者</li>
        <li>懐かしのマシンに興味があるエンジニア</li>
        <li>IT史をわかりやすくまとめて知りたい一般の方</li>
      </ul>
    </div>

    <footer>
      © 2025 Computer History Inc. All rights reserved.
    </footer>

  </div>
</body>
</html>

ブラウザの出力例

4.2. 1940年代ページの HTML（1940s.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>💻 コンピュータの歴史 ― 1940年代</title>
  <style>
    /* リセット */
    * { margin:0; padding:0; }

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

    /* ページ全体のコンテナ */
    #container {
      width:800px;
      margin:auto;
      background:#fff;
      border:3px solid #333;
    }

    /* ヘッダー */
    header {
      height:460px;
      background: url("history-header.png") no-repeat center;
    }
    #title {
      padding:380px 20px 0;
      color:#fff;
      font-size:32pt;
      font-weight:bold;
    }

    /* ナビゲーション */
    nav ul {
      list-style:none;
      background:#444;
      text-align:center;
    }
    nav li {
      display:inline-block;
    }
    nav a {
      display:inline-block;
      padding:10px 15px;
      color:#fff;
      text-decoration:none;
    }
    nav a:hover {
      background:#666;
    }

    /* メインコンテンツ */
    #main {
      padding:20px;
      line-height:1.6;
    }
    #main h1 {
      margin-bottom:15px;
      padding:8px 12px;
      background:#0055A4;
      color:#fff;
      border-radius:4px;
      border-left:6px solid #002d72;
      border-right:6px solid #002d72;
      box-shadow:2px 2px 6px #888;
      font-size:20pt;
    }
    #main p {
      margin-bottom:15px;
    }
    #main img {
      display:block;
      max-width:100%;
      margin:15px auto;
      border:2px solid #333;
      border-radius:4px;
    }
    #main ul {
      margin-left:20px;
      list-style: disc;
    }

    /* フッター */
    footer {
      background:#222;
      color:#aaa;
      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="index.html">TOPページ</a></li>
        <li><a href="1940s.html">1940年代</a></li>
        <li><a href="1960s.html">1960年代</a></li>
        <li><a href="1980s.html">1980年代</a></li>
        <li><a href="2000s.html">2000年代</a></li>
      </ul>
    </nav>
    <div id="main">
      <h1 id="1940s">1940年代</h1>
      <p>
        1946年に登場したENIAC（エニアック）は、世界初の汎用電子計算機の一つとされます。  
        真空管を 17,000本以上使用し、毎秒5,000回の加算が可能でした。軍事用途で開発されましたが、後のコンピュータ設計に大きな影響を与えました。
      </p>
      <img src="eniac.jpg" alt="ENIAC の実機写真" style="width:100%;max-width:700px;margin-top:20px;">
    </div>
    <footer>
      © 2025 Computer History Inc. All rights reserved.
    </footer>
  </div>
</body>
</html>

５．リンク先ページの複製

　メインテンプレート（1940s.htmlの構造）をコピーし、<title>と<h1>、本文、画像のみ書き換えることで、各年代ページを効率よく作成します。

5.1. 1960年代（1960s.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
    <div id="title">💻 コンピュータの歴史 ― 1960年代</div>
  <!-- CSSは1940s.htmlと同じ -->
</head>
<body>
  <div id="container">
    <header><div id="title">💻 コンピュータの歴史 ― 1960年代</div></header>
    <!-- navは共通 -->
    <div id="main">
      <h1 id="1960s">1960年代</h1>
      <p>
        1965年に登場したPDP-8は「ミニコンピュータ」という新しいカテゴリーを確立。  
        小型・低価格で大学や研究機関に普及し、コンピュータ利用の民主化が進みました。
      </p>
      <img src="pdp8.png" alt="PDP-8 ミニコンピュータ" style="width:100%;max-width:700px;margin-top:20px;">
    </div>
    <footer>
      © 2025 Computer History Inc.
    </footer>
  </div>
</body>
</html>

5.2. 1980年代（1980s.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>💻 コンピュータの歴史 ― 1980年代</title>
  <!-- CSSは共通 -->
</head>
<body>
  <div id="container">
    <header><div id="title">💻 コンピュータの歴史 ― 1980年代</div></header>
    <!-- nav -->
    <div id="main">
      <h1 id="1980s">1980年代</h1>
      <p>
        パーソナルコンピュータ（PC）の台頭。IBM PC の登場（1981年）をきっかけに、  
        個人や小規模オフィスにもコンピュータが普及しました。
      </p>
      <img src="ibmpc.png" alt="IBM PC" style="width:100%;max-width:700px;margin-top:20px;">
    </div>
    <footer>
      © 2025 Computer History Inc.
    </footer>
  </div>
</body>
</html>

5.3. 2000年代（2000s.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>💻 コンピュータの歴史 ― 2000年代</title>
  <!-- CSSは共通 -->
</head>
<body>
  <div id="container">
    <header><div id="title">💻 コンピュータの歴史 ― 2000年代</div></header>
    <!-- nav -->
    <div id="main">
      <h1 id="2000s">2000年代</h1>
      <p>
        2007年の iPhone 発表によるスマートフォン革命。  
        モバイルコンピューティングが本格化し、いつでもどこでもインターネットにアクセスできる時代へ。
      </p>
      <img src="iphone.png" alt="初代 iPhone" style="width:100%;max-width:700px;margin-top:20px;">
    </div>
    <footer>© 2025 Computer History Inc.</footer>
  </div>
</body>
</html>

まとめ

  • テンプレート流用：1940s.html をコピーし、<div id="main"> 部分だけ書き換えることで年代別ページを量産。
  • CSS の一元管理：<style> を各ページにコピペするか外部 CSS にまとめるとメンテナンス性が向上。
  • 共通パーツ：header／nav／footer はサイト内で共通化し、コンテンツ部分だけを差し替える運用が効率的。

使用した主な HTML タグ一覧

タグ用途
<div id="container">ページ全体を囲うコンテナー
<header>ページのヘッダー領域（背景バナーとタイトル）
<nav>ナビゲーションメニュー
<ul>, <li>リンクのリスト表示
<div id="main">各ページのメインコンテンツ領域
<h1>各セクション（年代）の見出し
<p>本文
<img>各年代を象徴する画像
<footer>フッター領域（著作情報）

　以上で「ページレイアウトの作成②」の実装手順とサンプルコードの解説は完了です。各ページを同じスタイルで量産し、統一感あるサイトを構築しましょう。