CSS_レスポンシブデザイン

06レスポンシブデザイン

6-1 レスポンシブデザインとは？

PC・タブレット・SPといった異なるデバイスや画面サイズに合わせて画面の表示を調整することで最適なUIを作成することです。

レスポンシブデザインのメリット・デメリットとそれを実現するための３つの方法を順番に解説します。

レスポンシブデザインのメリット

UI・UXの向上　・・・　異なるデバイスでも利用者が快適にコンテンツを閲覧することができます。
開発の効率アップ　・・・　１つのHTMLソースで、PC・タブレット・スマホの画面表示を調整することが可能なため、運用保守がしやすくなります。

レスポンシブデザインのデメリット

パフォーマンスの最適化　・・・　画像の最適化や不要なリソースの遅延読み込みなど、動作のパフォーマンスを意識した対策が必要になります。
クロスブラウザテスト　・・・　異なるブラウザやデバイスでのテストが不可欠です。特に古いバージョンのブラウザでは互換性がない場合があるので留意する必要があります。

6-2 グリッドやフレックスボックスを利用した柔軟なレイアウト

グリッドやフレックスボックスを利用して、コンテンツを相対的な単位で配置する方法です。

グリッド、フレックスボックスについては「04 Webページのレイアウト」の「4-8 Flexboxモデル（2カラムレイアウト）」で説明していますのでそちらをご参照ください。

6-3 メディアクエリの利用

CSS3のメディアクエリを使用して、デバイスの特定の条件（画面幅、解像度など）に基づいてスタイルを変更します。これを利用すると異なるデバイスに最適化されたスタイルを作成することができます。

このスタイルを作成するにはまずブレイクポイントについて理解する必要があります。

ブレイクポイントとは

レスポンシブデザインにおいてブレイクポイントは、異なるデバイスや画面サイズに対応するために、デザインやスタイルを変更する特定の画面幅のポイントを指します。

具体的なデバイスやレイアウトによって異なりますが、年々新しく発売されるデバイスの画面幅も変化していくため常に最新のブレイクポイントを知り、どのようなデバイスのシェアが高いかを理解する必要があります。

それでは一例としてブレイクポイントを紹介します。このブレイクポイントが正解という訳ではないのでブレイクポイントを変更する場合もありますし、微調整が必要な場合はもっと細かくブレイクポイントを作る場合もあります。

デバイス	横幅
PC	1025px以上
タブレット	768px～1024px
SP	375px～767px

ではこのブレイクポイントを使って実際にメディアクエリを追加します。

(max-width: 375px) の部分をmax-widthにするか、min-widthにするかで画面幅の基準を最大値にするか最小値にするか変更することができます。

PC基準でコーディングすることをデスクトップファースト、SP基準でコーディングするすることをモバイルファーストと呼びます。

それでは実際のソースコードで見てみましょう。

下記のどちらの方法でコーディングしてもPC幅ではh1要素が48px、タブレット幅では32px、SP幅では16pxで表示されるようになります。

1. PC基準（デスクトップファースト）でコーディングする場合

/* @media以外の所は全てのサイズで読み込まれるスタイル（PC） */ 
h1 {
  font-size: 48px;
}
@media screen and (max-width: 1024px) {
  /* タブレットサイズの画面幅（768px～1024px）で適用されるスタイル */
  h1 {
    font-size: 32px;
  }
}
@media media screen and (max-width: 767px) {
  /* SPサイズの画面幅（375px～767px）で適用されるスタイル */
  h1 {
    font-size: 16px;
  }
}

2. SP基準（モバイルファースト）でコーディングする場合

/* @media以外の所は全てのサイズで読み込まれるスタイル（SP） */ 
h1 {
  font-size: 16px;
}
@media media screen and (min-width: 768px) {
  /* タブレットサイズの画面幅（768px～1024px）で適用されるスタイル */
  h1 {
    font-size: 32px;
  }
}
@media media screen and (min-width: 1025px) {
  /* PCサイズの画面幅（1025px以上）で適用されるスタイル */
  h1 {
    font-size: 48px;
  }
}

このようにブレイクポイントを利用してスタイルを適用することで画面幅に応じたデザインにすることが可能となります。

6-4 viewportの設定

viewportを利用すると、PCデザインをそのままタブレットやSPに縮小して表示することができますが、デザイン自体はPCデザインのままなのでSPで閲覧する際はズームする必要があります。

それでは実際に設定してみます。HTMLのセクションに、viewportの設定を行うためのタグを追加します。

<head>
<!-- 通常のメタタグ -->
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<!-- ビューポートの設定メタタグ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

プロパティ	説明
width=device-width	デバイスの画面幅に基づいてビューポートの幅を設定します。これにより、デバイスの画面幅に合わせてコンテンツが自動的に調整され、レスポンシブな表示が可能になります。
initial-scale	initial-scale=1.0は、ページが最初に読み込まれたときの拡大率を指定します。 1.0は通常の拡大率で、これによりユーザーはページを通常の大きさで閲覧できます。