Skip to content

9. レスポンシブデザイン

9.1 レスポンシブデザインとは

レスポンシブデザインは、Web ページがさまざまなデバイス（デスクトップ、タブレット、スマートフォンなど）で最適に表示されるようにデザインする手法です。主な目標は、ユーザーがアクセスするデバイスの画面サイズや解像度に応じて、自動的にレイアウトを調整することです。

9.2 メディアクエリ

メディアクエリは、レスポンシブデザインの実現に不可欠な CSS の機能です。ここでは画面サイズやデバイスに応じたスタイリングを指定します。

9.2.1 メディアクエリの基本構文

以下は、メディアクエリの基本的な構文です。

@media (条件) {
  /* スタイル */
}

9.2.2 画面幅によるスタイリング

画面幅に応じて異なるスタイルを適用する例を見てみましょう。

/* デフォルトのスタイル */
body {
  background-color: white;
}

/* 画面幅が768ピクセル以下の場合 */
@media (max-width: 768px) {
  body {
    background-color: lightgrey;
  }
}

/* 画面幅が768ピクセルを超える場合 */
@media (min-width: 769px) {
  body {
    background-color: white;
  }
}

9.3 フレックスボックスとグリッドレイアウト

レスポンシブデザインを実現するためのレイアウト方法として、フレックスボックスと CSS グリッドがあります。

9.3.1 フレックスボックス

フレックスボックスは、一方向にレイアウトを調整するのに適しています。以下は基本的な使用例です。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  flex-direction: row; /* 横方向のレイアウト */
}

.item {
  flex: 1; /* 各要素が同じ幅を持つように配置 */
}

9.3.2 CSS グリッドレイアウト

CSS グリッドは、2 次元グリッドレイアウトを提供します。以下は基本的な使用例です。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列のグリッドを設定 */
}

.grid-item {
  border: 1px solid #000;
}

9.4 画像のレスポンシブ化

画像もレスポンシブに対応する必要があります。以下はの基本例です。

<img src="example.jpg" alt="Example" class="responsive-image" />

.responsive-image {
  width: 100%;
  height: auto; /* 幅に応じて高さを自動調整 */
}

9.5 ビューポートメタタグの設定

ビューポートメタタグは、モバイルデバイスでの表示を調整するために非常に重要です。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

9.6 実践例

最後に、これまで学んだ内容を組み合わせた実践例を示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>レスポンシブデザインの例</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      .header {
        background-color: #4caf50;
        color: white;
        text-align: center;
        padding: 1em;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
      }

      .item {
        flex: 1 1 100%;
        padding: 1em;
        background: #f4f4f4;
        border: 1px solid #ddd;
        box-sizing: border-box;
      }

      @media (min-width: 768px) {
        .item {
          flex: 1 1 50%;
        }
      }

      @media (min-width: 1024px) {
        .item {
          flex: 1 1 33.33%;
        }
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>レスポンシブデザインの例</h1>
    </div>
    <div class="container">
      <div class="item">コンテンツ 1</div>
      <div class="item">コンテンツ 2</div>
      <div class="item">コンテンツ 3</div>
      <div class="item">コンテンツ 4</div>
      <div class="item">コンテンツ 5</div>
      <div class="item">コンテンツ 6</div>
    </div>
  </body>
</html>

これで、レスポンシブデザインの基本的な概念と実践方法についての理解が深まったはずです。ぜひ、自分のプロジェクトでも活用してみてください。