CSS 入門

HTML 現代レイアウト構造の構築

HTML構造は、CSSでレイアウトを構築するための基盤です。
適切に構造化されたHTMLドキュメントは、セマンティックな正しさとアクセシビリティを確保するだけでなく、CSSレイアウト技術をより簡単かつ効果的に適用できるようにします。

本章では、レイアウトのために堅牢なHTML基盤を作成するためのコア要素とベストプラクティスを紹介します。コアとなる構造要素、HTML5セマンティックタグの活用方法、そして最適なレイアウト制御のためのコンテンツ組織化について探っていきます。

1. コアとなるHTML構造要素

すべてのHTMLドキュメントには基本構造が必要です。どのようなレイアウト技術を使用する計画であっても、これらのコア要素を理解することは、あらゆるウェブページを構築する上で極めて重要です。

1.1 <!DOCTYPE html> 宣言

<!DOCTYPE html> 宣言は、HTMLドキュメントの最上位に位置します。これはブラウザに対して、ページがどのバージョンのHTMLで記述されているかを伝えます。HTML5では宣言は非常にシンプルに <!DOCTYPE html> となります。これはHTMLタグではなく、ブラウザへの「命令」です。

コード例：

<!DOCTYPE html>

1.2 <html> 要素

<html> 要素はHTMLページのルート要素です。<!DOCTYPE html> 宣言を除き、他のすべての要素を包含します。

コード例：

<!DOCTYPE html>
<html lang="ja">
</html>

lang 属性はドキュメントの言語を指定します。アクセシビリティ（Accessibility）の観点から、この属性を含めることはグッドプラクティスです。

1.3 <head> 要素

<head> 要素には、HTMLドキュメントに関するメタ情報（Meta-information）が含まれます。これにはタイトル、文字セット、リンクされたスタイルシート、スクリプトなどが含まれます。これらの情報はページ自体には表示されません。

コード例：

<!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="style.css">
</head>
<body>
</body>
</html>
  • <meta charset="UTF-8">: ドキュメントの文字エンコーディングを指定します。UTF-8は最も汎用的で推奨されるエンコーディングです。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: このメタタグはレスポンシブデザインにおいて不可欠です。ビューポート（Viewport）の幅をデバイスの幅に設定し、初期スケールを1.0に設定します。これにより、異なるデバイスでページが正しくスケーリングされます。
  • <title>マイ・ベースレイアウト</title>: ページのタイトルを設定し、ブラウザのタブやウィンドウのタイトルバーに表示されます。
  • <link rel="stylesheet" href="style.css">: 外部スタイルシートをHTMLドキュメントにリンクします。ここでレイアウトのCSSルールを定義します。

1.4 <body> 要素

<body> 要素には、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="style.css">
</head>
<body>
  <h1>私のウェブサイトへようこそ</h1>
  <p>これは私のページ上のコンテンツの一部です。</p>
</body>
</html>

2. レイアウトのためのHTML5セマンティック要素

HTML5では、コンテンツに意味と構造を与えるためのいくつかの新しいセマンティック要素（Semantic Elements）が導入されました。これらの要素を使用することはアクセシビリティを向上させるだけでなく、HTMLの可読性とメンテナンス性を高めます。また、ページの異なるセクションを定義するのに役立ち、CSSレイアウトの適用が容易になります。

2.1 <header>

<header> 要素は、紹介的なコンテンツやナビゲーションリンクのグループのコンテナを表します。通常、ウェブサイトのロゴ、タイトル、ナビゲーションメニューが含まれます。

コード例：

<header>
  <img src="logo.png" alt="マイウェブサイト ロゴ">
  <h1>モダンチュートリアル</h1>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">アバウト</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">コンタクト</a></li>
    </ul>
  </nav>
</header>

2.2 <nav>

<nav> 要素は、他のページやページ内部へのリンクがあるセクションを表します。主要なナビゲーションブロック専用に使用されます。

注意： すべてのリンクグループを <nav> 内に入れる必要はありません。主要なナビゲーション部分にのみ使用してください。

2.3 <main>

<main> 要素はドキュメントの主要なコンテンツを指定します。一つのドキュメント内に <main> 要素は一つだけ存在すべきです。

2.4 <article>

<article> 要素は、ドキュメント、ページ、アプリケーション内において、それ自体で独立して配布や再利用が可能な構造（例：フィードでの配信など）を表します。フォーラムの投稿、雑誌や新聞の記事、ブログのエントリなどがこれに該当します。

コード例：

<article>
  <h2>最新のブログ記事</h2>
  <p>これはブログ記事の内容です。</p>
  <footer>
    <p>投稿日：<time datetime="2026-01-26">2026年1月26日</time> 著者：田中 太郎</p>
  </footer>
</article>

2.5 <aside>

<aside> 要素は、メインコンテンツと間接的に関連する部分を表します。通常、サイドバー、補足記事、広告などに使用されます。

2.6 <footer>

<footer> 要素は、ドキュメントまたはセクションのフッターを表します。通常、著者の情報、著作権データ、利用規約へのリンク、連絡先などが含まれます。

2.7 <section>

<section> 要素は、テーマ別のコンテンツグループを表し、通常は見出しを伴います。関連するコンテンツをグループ化するための汎用的なコンテナです。

       ヒント： コンテンツが独立しており、それだけで完結する場合は <article> を使用します。ページ内で関連するコンテンツをグループ化する場合は <section> を使用してください。

3. レイアウト制御のためのコンテンツ構築

これらのセマンティック要素内でどのようにコンテンツを構成するかは、CSSでレイアウトを制御する能力に大きく影響します。以下のベストプラクティスを考慮してください。

  • 論理的なグループ化 (Logical Grouping): 関連するコンテンツを適切なセマンティック要素の中にまとめます。これにより、CSSで特定のセクションを選択するのが容易になります。
  • ネスト (Nesting): 要素を論理的にネスト（入れ子）して、明確な階層構造を作成します。例えば、ブログ記事のリストを表すために <section> の中に <article> 要素をネストします。
  • クラス (Class) と ID 属性: 特定のスタイルを適用するためのフック（Hook）として、クラスやIDを使用します。クラスは複数の要素に同じスタイルを適用するために、IDは一意の要素に使用します。
  • <div> の使用を最小限にする: <div> は汎用コンテナとして依然として有用ですが、可能な限りセマンティック要素を使用して構造に意味を持たせてください。

4. 実戦ケースとデモ

前の例を拡張して、クラス（Class）とIDを使用してレイアウト制御をさらに強化する方法をデモンストレーションします。

メインコンテンツエリアとサイドバーに異なるスタイルを適用したいとします。その場合、<main> と <aside> 要素にクラスを追加します。

HTML コード：

<main class="main-content">
  <article>
    <h2>最初のブログ記事</h2>
    <p>最初のブログ記事の内容です。</p>
  </article>
  <article>
    <h2>二番目のブログ記事</h2>
    <p>二番目のブログ記事の内容です。</p>
  </article>
</main>

<aside class="sidebar">
  <h3>カテゴリ</h3>
  <ul>
    <li><a href="#">Web開発</a></li>
    <li><a href="#">デザイン</a></li>
    <li><a href="#">マーケティング</a></li>
  </ul>
</aside>

これで、style.css ファイル内でこれらのクラスを使用して要素を選択できるようになります。

CSS コード：

.main-content {
  width: 70%;
  float: left;
  padding: 20px;
}

.sidebar {
  width: 30%;
  float: right;
  padding: 20px;
}

このCSSにより、メインコンテンツエリアが幅70%を占めて左に浮動（float）し、サイドバーが幅30%を占めて右に浮動します。float やその他のレイアウトプロパティの詳細については、以降のモジュールで深く掘り下げていきます。