メインコンテンツまでスキップ

レスポンシブデザイン

レスポンシブデザインは、異なるデバイスや画面サイズに応じてウェブサイトのレイアウトを調整する技術です。
このページでは、レスポンシブデザインを実現するための基本的な方法を説明します。

1. ビューポートの設定​

ビューポートメタタグを使用して、ページがデバイスの幅に応じて適切にスケーリングされるようにします。
これにより、デバイスに合わせたズームやレイアウト調整が可能になります。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • width=device-width: デバイスの幅に合わせてページの幅を設定
  • initial-scale=1.0: ページの初期スケールを 1.0 に設定

2. メディアクエリの使用​

メディアクエリを使用して、異なる画面サイズやデバイスに応じて CSS を適用します。
これにより、特定の条件下でのみ適用されるスタイルを設定できます。

/* デスクトップ用 */
body {
  background-color: lightblue;
}

@media (max-width: 768px) {
  /* タブレット用 */
  body {
    background-color: lightgreen;
  }
}

@media (max-width: 480px) {
  /* モバイル用 */
  body {
    background-color: lightcoral;
  }
}
  • @media (max-width: 768px): ブラウザの幅が 768px 以下の場合に適用されるスタイルを定義します。
  • @media (max-width: 480px): ブラウザの幅が 480px 以下の場合に適用されるスタイルを定義します。

3. Flexbox の利用​

Flexbox を使用して、アイテムの幅をパーセンテージで設定し、コンテンツが画面サイズに応じてリサイズされるようにします。

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

.item {
  flex: 1 1 100%;
}

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

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

デフォルトでは、アイテムは 100% の幅を持ちますが、画面幅が 768px 以上の場合は 48%、1024px 以上の場合は 30% になります。これにより、デバイスの幅に応じてアイテムの配置が調整されます。

4. 画像サイズの調整​

画像をレスポンシブにするためには、CSS で最大幅を 100%に設定し、親要素の幅に合わせてリサイズされるようにします。

img {
  max-width: 100%;
  height: auto;
}
  • max-width: 100%: 画像の最大幅を 100%に設定し、親要素の幅を超えないようにします。
  • height: auto: 画像の高さを自動調整し、アスペクト比を維持します。

5. レスポンシブユニットの使用​

パーセンテージやvw（ビューポート幅）などの相対値を使用して、レイアウトを柔軟にします。 vw はビューポートの幅に対する割合を表し、vh はビューポートの高さに対する割合を表します。

.container {
  width: 90%;
  margin: 0 auto;
}

.item {
  padding: 2vw;
}
  • width: 90%: コンテナの幅を親要素の 90%に設定します。
  • padding: 2vw: アイテムのパディングをビューポート幅の 2%に設定します。

6. テキストサイズの調整​

レスポンシブなテキストサイズを設定するためには、vwやemを使用します。
これにより、テキストが画面サイズに応じてリサイズされます。

h1 {
  font-size: 4vw;
}

p {
  font-size: 1.2em;
}
  • font-size: 4vw: ヘッダーテキストのフォントサイズをビューポート幅の 4%に設定します。
  • font-size: 1.2em: パラグラフテキストのフォントサイズを親要素の 1.2 倍に設定します。
ヒント

ただし、テキストサイズについては絶対値で指定しているサイトも多くあります。 ユーザーがブラウザの設定でフォントサイズを変更している場合に、相対値で指定していると意図しない表示になることがあるためです。

また、 rem を使用することで、ルート要素（html）のフォントサイズに対する相対値を指定することもできるため、レスポンシブ対応が簡単という意見もあります。
しかし、実際には PC とスマホで、フォントサイズの調整がより細かく必要な場合が多いため、rem は使いどころを考えて使用することが重要です。