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

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

ページ全体を大きな箱で整え、役割ごとの領域を配置する。HTML5の構造タグとCSSを組み合わせて、見やすいWebページレイアウトを作ろう。

ここまでHTMLでは、見出し、段落、画像、リンク、リスト、表など、ページを構成するさまざまな部品を学習してきました。次に大切になるのが、それらの部品をページ全体の中でどのように配置するかという考え方です。

Webページは、ただ上から順番に要素を並べるだけではなく、ヘッダー、ナビゲーション、メインコンテンツ、フッターなどの領域に分けて作ると、見た目も構造も分かりやすくなります。たとえば、ページ上部にはサイト名やタイトル画像を置き、その下にメニューを並べ、中央に本文を配置し、最後に著作権表示を置く、といった形です。

このようなページ全体の構成を作るときに役立つのが、HTML5で使えるheaderタグ、navタグ、footerタグなどの構造化用タグです。これらは、ページ内の領域がどのような役割を持っているのかを分かりやすく示します。また、必要に応じてdivタグを使うことで、ページ全体を囲むコンテナや、メイン領域のまとまりを作ることができます。

CSSでは、ページの横幅を固定したり、中央に配置したり、背景色を付けたり、枠線を追加したりできます。特に、ページ全体を囲むcontainerを作り、widthとmarginを指定して中央に配置する方法は、基本的なレイアウト作成でよく使われます。

ここでは、「Web技術の歴史」をテーマにしたサンプルサイトを作りながら、ページ全体を囲むコンテナ、HTML5の構造タグ、ヘッダー画像、横並びナビゲーション、本文エリア、フッターの配置までを順番に確認していきます。

素材のダウンロード

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

web-history-header.pngg

ページ全体を囲むコンテナを作る

ページレイアウトを作るときは、まずページ全体を囲む大きな箱を用意すると考えると分かりやすくなります。この箱をコンテナと呼ぶことがあります。

HTMLでは、divタグにid属性を付けて、ページ全体を囲むコンテナを作れます。

<div id="container">
  ページ全体の内容
</div>

このようにすると、header、nav、メインコンテンツ、footerなどをすべてcontainerの中に入れられます。CSSでは、#containerに対して横幅、背景色、中央配置、枠線などを指定します。

コンテナに指定しやすいCSS

ページ本体を中央に配置したい場合は、widthで横幅を決めて、margin: auto;を指定します。左右の余白が自動で調整されるため、ブラウザの中央にコンテナが配置されます。

#container {
  width: 800px;
  margin: auto;
  background-color: #FFFFFF;
}

この指定では、ページ本体の横幅が800pxになり、左右の余白が自動調整されます。背景色を白にしておくと、bodyに背景色を付けたときに、ページ本体との違いが分かりやすくなります。

図1：コンテナでページ全体を中央に配置する

この図から分かること

ページ全体をcontainerで囲むと、ページ本体の横幅や背景色、中央配置をまとめて管理できます。bodyに背景色を付け、containerを白くすると、ページ本体が中央に配置されていることが分かりやすくなります。margin: auto;は、固定幅の要素を中央に置くときによく使う指定です。

コンテナを中央に配置する仕組み

コンテナを中央に配置するには、widthとmarginを組み合わせます。

#container {
  width: 800px;
  margin: auto;
}

widthは、コンテナの横幅を指定します。margin: auto;は、左右の外部余白を自動で調整します。横幅が決まっている要素に対してmargin: auto;を指定すると、左右の余白が同じくらいになり、中央に配置されます。

bodyに背景色を指定し、containerに別の背景色を指定すると、ページ全体と本文エリアの違いが分かりやすくなります。

body {
  background-color: #CCCCCC;
}

#container {
  background-color: #FFFFFF;
}

このようにすると、ブラウザ全体はグレー、ページ本体は白になります。中央に固定されたページの形が見えやすくなり、学習用のレイアウトとして理解しやすくなります。

HTML5の構造タグで領域を分ける

ページレイアウトでは、ページ内の領域を役割ごとに分けることが大切です。HTML5では、ページの構造を分かりやすく表すタグが用意されています。

レイアウトで使う主な構造タグ

headerタグは、ページの上部にある見出しやタイトル画像を置く領域に使います。navタグは、ページ内リンクやサイトメニューをまとめる領域に使います。mainタグは、ページの中心となる本文領域に使います。footerタグは、著作権表示やサイト情報などをまとめる下部領域に使います。

divタグは、意味を持つ専用タグではありませんが、CSSを適用するためのまとまりを作りたいときに便利です。ページ全体を囲むcontainerや、本文を囲むmain-areaのような領域に使えます。

divタグと構造タグの使い分け

ページ全体の構造を作るときは、意味がはっきりしている部分にはHTML5の構造タグを使うと分かりやすくなります。

たとえば、ページ上部ならheader、メニューならnav、下部ならfooterを使います。一方、単にCSSで幅や背景色をまとめて指定したいだけの箱にはdivを使えます。

<div id="container">
  <header>ページ上部</header>
  <nav>メニュー</nav>
  <main>本文</main>
  <footer>ページ下部</footer>
</div>

このように書くと、ページの構造が読み取りやすくなります。どこがタイトル領域で、どこがメニューで、どこが本文なのかがHTMLを見ただけで分かります。

図2：HTML5の構造タグでページを領域分けする

この図から分かること

HTML5の構造タグを使うと、ページをheader、nav、main、footerのように役割ごとに分けられます。containerで全体を囲み、その中に各領域を配置すると、ページ全体の構造が分かりやすくなります。CSSも領域ごとに指定しやすくなります。

ヘッダー領域を作る

headerタグには、ページのタイトルやロゴ、メイン画像などを配置します。今回のサンプルでは、ヘッダーに背景画像を指定し、その上にタイトル文字を重ねる形にします。

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

heightでヘッダーの高さを決めます。backgroundで背景画像を指定し、no-repeatで繰り返しを止め、centerで中央に配置します。background-size: cover;を指定すると、ヘッダーの領域を覆うように画像が表示されます。

タイトル文字は、headerの中にdivを置いて表示できます。

<header>
  <div id="title">Web技術の歴史</div>
</header>

タイトルの位置は、paddingやcolor、font-sizeなどで調整します。背景画像の上に文字を置く場合は、文字色と背景のコントラストに注意します。文字が読みにくい場合は、文字に影を付けたり、背景画像を暗くしたりすると見やすくなります。

ナビゲーション領域を作る

navタグには、ページ内の主要リンクをまとめます。ナビゲーションメニューは、ul、li、aを組み合わせて作るのが基本です。

<nav>
  <ul>
    <li><a href="#top">TOPページ</a></li>
    <li><a href="#1990s">1990年代</a></li>
    <li><a href="#2000s">2000年代</a></li>
  </ul>
</nav>

ulはメニュー全体、liは各メニュー項目、aはリンクを表します。CSSでlist-style: none;を指定すると、リストマーカーを消せます。liにdisplay: inline-block;を指定すると、メニュー項目を横並びにできます。

nav ul {
  list-style: none;
  background-color: #333333;
}

nav li {
  display: inline-block;
}

nav a {
  display: inline-block;
  padding: 12px 16px;
  color: #FFFFFF;
  text-decoration: none;
}

a:hoverを指定すると、マウスを重ねたときの見た目を変えられます。

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

メニューに反応があると、ユーザーはどのリンクを選ぼうとしているのか分かりやすくなります。

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

mainタグには、ページの中心となる本文を入れます。今回のような歴史紹介ページでは、年代ごとの見出しと説明文を配置します。

<main>
  <h2 id="1990s">1990年代</h2>
  <p>Webブラウザの普及により、インターネットが一般家庭にも広がり始めました。</p>
</main>

ナビゲーションのリンク先として使う場合は、h2にid属性を付けます。

<h2 id="1990s">1990年代</h2>

そして、navのaタグでhref="#1990s"と指定すると、その見出しの位置へ移動できます。

本文エリアには、paddingやline-heightを指定すると読みやすくなります。

main {
  padding: 24px;
  line-height: 1.7;
}

paddingを指定すると、本文がコンテナの端にくっつかず、余白のある読みやすい表示になります。line-heightを指定すると、行間にゆとりが出て長い文章も読みやすくなります。

フッター領域を作る

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

<footer>
  © 2026 Web History Lab
</footer>

フッターはページの締めくくりになる部分なので、背景色を暗めにしたり、文字を中央揃えにしたりすると落ち着いた印象になります。

footer {
  background-color: #222222;
  color: #CCCCCC;
  text-align: center;
  padding: 12px;
}

footerは、ページの一番下に配置される領域です。メインコンテンツと見た目を分けることで、ページの終わりが分かりやすくなります。

Web技術の歴史サイトを作る

ここまでの内容をまとめて、ページ全体のレイアウトを作るサンプルを確認します。テーマは「Web技術の歴史」です。ページ全体をcontainerで中央に配置し、headerに背景画像、navに横並びメニュー、mainに年代ごとの本文、footerに著作権表示を置きます。

ファイル名： Lesson26-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Web技術の歴史</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

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

    #container {
      width: 820px;
      margin: auto;
      background-color: #FFFFFF;
      border-left: solid 5px #336699;
      border-right: solid 5px #336699;
    }

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

    #title {
      padding: 330px 24px 0;
      color: #FFFFFF;
      font-size: 34px;
      font-weight: bold;
      text-shadow: 2px 2px 6px #000000;
    }

    nav ul {
      list-style: none;
      background-color: #333333;
    }

    nav li {
      display: inline-block;
    }

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

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

    main {
      padding: 24px;
      line-height: 1.7;
    }

    main h2 {
      color: #336699;
      border-left: solid 6px #336699;
      padding-left: 10px;
      margin: 20px 0 10px;
    }

    main p {
      margin-bottom: 16px;
    }

    footer {
      background-color: #222222;
      color: #CCCCCC;
      text-align: center;
      padding: 12px;
    }
  </style>
</head>
<body>
  <div id="container">
    <!-- ページ上部のヘッダー -->
    <header id="top">
      <div id="title">Web技術の歴史</div>
    </header>

    <!-- ナビゲーションメニュー -->
    <nav>
      <ul>
        <li><a href="#top">TOPページ</a></li>
        <li><a href="#1990s">1990年代</a></li>
        <li><a href="#2000s">2000年代</a></li>
        <li><a href="#2010s">2010年代</a></li>
        <li><a href="#2020s">2020年代</a></li>
      </ul>
    </nav>

    <!-- メインコンテンツ -->
    <main>
      <h2 id="1990s">1990年代</h2>
      <p>
        Webブラウザの登場により、インターネット上の情報を画像や文字で分かりやすく閲覧できるようになりました。
        HTMLによるページ作成が広がり、個人や企業がWebサイトを公開する流れが生まれました。
      </p>

      <h2 id="2000s">2000年代</h2>
      <p>
        CSSによるデザイン分離が進み、HTMLは構造、CSSは見た目という役割分担が意識されるようになりました。
        ブログや企業サイトも増え、Webページは情報発信の重要な手段として定着しました。
      </p>

      <h2 id="2010s">2010年代</h2>
      <p>
        スマートフォンの普及により、画面サイズに応じて表示を調整するレスポンシブデザインが重要になりました。
        HTML5やCSS3の活用が進み、動画、アニメーション、柔軟なレイアウト表現も広がりました。
      </p>

      <h2 id="2020s">2020年代</h2>
      <p>
        Webサイトは、情報を見るだけでなく、学習、買い物、仕事、コミュニケーションなど幅広い用途で使われています。
        アクセシビリティや表示速度、使いやすさを意識した設計が、より重要になっています。
      </p>
    </main>

    <!-- ページ下部のフッター -->
    <footer>
      © 2026 Web History Lab
    </footer>
  </div>
</body>
</html>

ブラウザの表示例

このHTMLでは、ページ全体をdiv id="container"で囲んでいます。containerの中に、header、nav、main、footerを順番に配置しています。

CSSの最初にある* { margin: 0; padding: 0; }は、すべての要素の初期余白をリセットする指定です。ブラウザによって見出しや本文に初期余白が付くため、レイアウトをそろえたい場合に使われます。

bodyには背景色とフォントを指定しています。body全体をグレーにし、containerを白にすることで、中央にページ本体が配置されていることが分かりやすくなります。

#containerでは、width: 820px;で横幅を固定し、margin: auto;で中央に配置しています。左右にはborder-leftとborder-rightを指定し、ページ本体の両端に青いラインを付けています。

headerでは、web-history-header.pngを背景画像として表示しています。background-size: cover;を指定しているため、画像がヘッダー領域を覆うように表示されます。

#titleでは、タイトル文字を画像の下側に近い位置へ配置しています。paddingで位置を調整し、colorで白文字にしています。text-shadowを指定しているため、背景画像の上でも文字が読みやすくなります。

navでは、ulとliを使ってメニューを作っています。list-style: none;でリストマーカーを消し、liをdisplay: inline-block;にして横並びにしています。a:hoverでは、マウスを重ねたときに背景色が変わるようにしています。

mainでは、本文全体にpaddingとline-heightを指定しています。h2には左側の強調線を付けて、年代ごとの区切りが分かりやすくなるようにしています。

footerでは、暗い背景色と中央揃えの文字で、ページの下部らしい見た目にしています。

図3：完成したページレイアウトの全体像

この図から分かること

完成したページは、body、container、header、nav、main、footerの階層で作られています。bodyでページ全体の背景を指定し、containerで白いページ本体を中央に配置します。その中に、ヘッダー、メニュー、本文、フッターを順番に並べることで、基本的なWebページレイアウトが完成します。

サンプルで使っている主なタグ

header、nav、main、footerを使うと、ページの各領域の役割が分かりやすくなります。divは、ページ全体を囲むcontainerのように、CSSでまとめて扱いたい範囲に使えます。

サンプルで使っている主なCSS

ページレイアウトでは、margin、padding、width、background-colorの使い方が特に重要です。これらを組み合わせることで、ページ全体の幅、余白、背景、配置を整えられます。

ページレイアウトを作るときに意識したいこと

ページレイアウトを作るときは、最初にページ全体の大きな構造を考えることが大切です。いきなり細かい文字色や余白を調整するのではなく、まずはheader、nav、main、footerのように領域を分けます。

次に、containerでページ全体を囲み、widthとmarginを指定して中央に配置します。bodyにはページ全体の背景色、containerにはページ本体の背景色を指定すると、レイアウトの範囲が分かりやすくなります。

そのあと、headerに背景画像やタイトルを置き、navにメニューを作り、mainに本文を配置し、footerに著作権表示を入れます。CSSは、領域ごとに分けて書くと管理しやすくなります。

また、ナビゲーションのリンク先には、h2などにidを付けてページ内リンクを作れます。メニューをクリックすると該当する年代の見出しへ移動できるため、長いページでも読みやすくなります。

ページレイアウトは、HTMLの構造とCSSの配置指定を組み合わせて作ります。まずは固定幅の中央配置、ヘッダー、メニュー、本文、フッターという基本形をしっかり練習すると、次の段階で2カラムレイアウトやレスポンシブデザインへ進みやすくなります。