5. レイアウトの基本

このセクションでは、CSS を使ったウェブページのレイアウトの基本を学びます。レイアウトはウェブデザインの中心となる部分であり、コンテンツを視覚的に魅力的かつ機能的に配置するために重要です。

5.1 レイアウトの概念

ウェブページのレイアウトは、以下のような要素から構成されます：

ヘッダー
ナビゲーションメニュー
メインコンテンツ
サイドバー
フッター

これらの要素を CSS を使ってどのように配置するかがポイントです。

5.1.1 コンテナとグリッドシステム

コンテナとグリッドシステムは、ウェブページのレイアウトを整えるための基本的な構造です。一般的には、div要素を使ってコンテナを作成し、CSS でそのスタイルを設定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>CSSレイアウト</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 10px;
      }
      .header,
      .footer {
        grid-column: span 2;
        background-color: #f5f5f5;
        text-align: center;
        padding: 20px;
      }
      .nav,
      .content,
      .sidebar {
        padding: 20px;
      }
      .nav {
        background-color: #e5e5e5;
      }
      .content {
        background-color: #e0e0e0;
      }
      .sidebar {
        background-color: #d5d5d5;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">Header</div>
      <div class="nav">Navigation</div>
      <div class="content">Main Content</div>
      <div class="sidebar">Sidebar</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

この例では、CSS グリッドを使用して基本的な 2 カラムレイアウトを構築しました。

5.2 フロートを使ったレイアウト

CSS フロート（float）プロパティを使ったレイアウトは古典的な手法ですが、現在でもよく使われます。主にレイアウトの一部を左右に配置する際に使用されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>フロートレイアウト</title>
    <style>
      .container {
        overflow: hidden;
      }
      .column {
        float: left;
        padding: 20px;
      }
      .left {
        width: 25%;
        background-color: #e5e5e5;
      }
      .right {
        width: 75%;
        background-color: #e0e0e0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="column left">Left Column</div>
      <div class="column right">Right Column</div>
    </div>
  </body>
</html>

この例では、float: leftを使って 2 つのカラムを横に並べるレイアウトを作成しました。

5.3 フレックスボックスを使ったレイアウト

CSS フレックスボックス（Flexbox）は、複雑なレイアウトをシンプルに作成するための強力なツールです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>フレックスボックスレイアウト</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .box {
        flex: 1 1 calc(33.333% - 10px);
        background-color: #e0e0e0;
        padding: 20px;
        box-sizing: border-box;
      }
      .full-width {
        flex: 1 1 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box full-width">Header</div>
      <div class="box">Column 1</div>
      <div class="box">Column 2</div>
      <div class="box">Column 3</div>
      <div class="box full-width">Footer</div>
    </div>
  </body>
</html>

この例では、フレックスボックスを使用してレスポンシブな 3 カラムレイアウトを作成しました。

5.4 レスポンシブデザインへの対応

レイアウトをデバイスごとに適切に表示させるためには、メディアクエリを用います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>レスポンシブレイアウト</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
      }
      .box {
        flex: 1 1 100%;
        background-color: #e0e0e0;
        padding: 20px;
        box-sizing: border-box;
      }
      @media (min-width: 600px) {
        .box {
          flex: 1 1 50%;
        }
      }
      @media (min-width: 900px) {
        .box {
          flex: 1 1 33.333%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">Column 1</div>
      <div class="box">Column 2</div>
      <div class="box">Column 3</div>
    </div>
  </body>
</html>

この例では、画面幅に応じてカラムの数を動的に変更するレスポンシブレイアウトを構築しました。

これで「レイアウトの基本」に関するセクションは終了です。次のステップとして実際にコーディングしながら、これらの知識を深めていってください。