レスポンシブコーディングに使う、ビューポートとメディアクエリ

レスポンシブコーディングとは
1.ビューポート（viewport）の指定

基本のviewport指定
◆実習

2.メディアクエリ（Media Queries）とメディアタイプ

メディアクエリ基本の書き方
ブレイクポイント
◆実習
補足：メディアタイプ（media属性）とは？

CSSの性質とメディアクエリを書く順序

メディアクエリを書く順番
◆実習

まとめ

レスポンシブコーディングとは

レスポンシブコーディングとは、一つのソース（HTML）で様々なサイズのデバイスに対応出来るコーディングを行うことです。“レスポンシブデザイン”の中に含まれる部分ですが、コーディングに特化した部分、というニュアンスで使われます。

レスポンシブコーディングで書くHTMLやCSSは、デザインによって様々です。
ですが、どんなデザインであっても、レスポンシブコーディングを行うために必要な設定が2つあります。いわばレスポンシブコーディングの必須項目です。今回は、この２つをそれぞれ見ていきましょう。

スマホやタブレットの画面幅に、Webページの表示幅を合わせるviewport指定
表示幅によってCSSを切り替えるための指定（CSSメディアタイプ or メディアクエリ）

1.ビューポート（viewport）の指定

ビューポート（viewport）は、表示領域、デバイスの描画域のことを指します。
PCの場合は、今、このページを見ているブラウザウインドウのサイズ（Webページを表示している範囲）＝ビューポートと思っていただければ良いでしょう。ウィンドウを縮小していたり、サイドにブックマークを表示していたりすると、表示領域は小さくなります。

ちょっと複雑なのがスマホの場合
スマホの場合、ブラウザは基本的に全画面表示です。そしてディスプレイ解像度はパソコン用ディスプレイの解像度とそう変わりません。場合によってはパソコン用ディスプレイよりも解像度が高いものもあるでしょう。

ですが、画面自体はスマホの方が遥かに小さいですよね。
このため、ブラウザではデフォルトのViewport サイズが設定されています。例えば、iOS版Safariだと横幅980pxがデフォルト値。これでもかなり縮小表示されている感があり、見にくいです。

そこで、スマホやタブレットでは端末（機種）ごとに、表示用の解像度としてビューポートサイズ（CSSピクセルサイズ）が用意されています。
前回のレッスンで紹介したScreen Sizesで、大きく表示されているのもビューポートサイズ。
iPhone 14 Pro Maxの場合、ビューポートサイズは430 px × 932 pxです（ディスプレイ解像度は2,796px × 1,290px）。

URL：https://www.screensizes.app/

この端末ごとのビューポートサイズ（CSSピクセルサイズ）を、表示領域として認識してもらうためにviewportの指定が必要です。
よくわからない、という方は下記の『実習』で実際に試してみてください。

基本のviewport指定

では、肝心のviewport指定について見ていきましょう。

HTMLで、meta要素の属性値を使います。
基本的には<head> ～ </head>の間に、以下の1行を追加すればOKです。

html

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

SublimeTextやVScodeのようなeditorで入力補完を使うと、自動で入ることも多いですね。

このmetaタグは、以下のような意味になっています。

name=viewport・・・ビューポートについての設定をしますよ
content=○○○・・・値にビューポートの設定を記述。カンマ区切りで複数指定も可

contentの値で「width=device-width」を指定するのがキモ。
この記述を書くことで、端末のビューポートサイズ（CSSピクセルサイズ）を表示領域として認識させることが出来ます。

今回紹介したwidthとinitial-scale以外にも、viewport設定に使うプロパティはいくつかあります。
ただ、デザイン上の理由やこだわりがない限りは指定しません。ほぼ使いませんので、他にもプロパティがあるということだけ知っていれば大丈夫。必要になったら下記のようなリファレンスサイトで確認しましょう。

HTML［meta要素］ビューポートを設定する - TAG index
https://www.tagindex.com/html/page/meta_viewport.html

◆実習

test1.htmlとtest1.cssを新規作成して、viewport指定の効果を見てみましょう。
それぞれのファイルに、以下のコードを貼り付けてみてください。

test1.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブテスト</title>
  <link rel="stylesheet" href="test1.css">
</head>
<body>
  <div class="viewport-test">
    test
  </div>

</body>
</html>

test1.css

.viewport-test{
  width: 100%;
  background: #FFFFD6; /* 黄色 */
}

ブラウザでtest1.htmlを開きます。
以下のショートカットキーもしくは右クリックメニューから、検証ツールを開きます。

windows：Ctrl + Shift + I
Mac：Command + Option + I

スマホとタブレットのアイコンをクリック。
スマホモードで表示してみましょう。

検証ツールのElementsタブ（要素タブ）で<html>にマウスカーソルを重ねてみましょう。
横幅が検証ツールで選択中の端末のビューポートサイズ（CSSピクセルサイズ）になっていることがわかります。

検証ツールのElementsタブ（要素タブ）で、<head>の中にある<meta name="viewport" ... >の記述を探してください。
content=""の中身「device-width, initial-scale=1.0」をダブルクリックすると、編集可能になります。
Deleteキーを押して、まるっと削除してみましょう。見え方が変わるはずです。

<html>タグの横幅を見ると、端末のビューポートサイズではなくブラウザのデフォルト値である980pxが適用されていることがわかります。

文字も小さくなっていて、読みにくいですね。
この状態だと、次に設定するメディアクエリも意図したとおりに動いてくれません。レスポンシブのCSSが効かない、スマホ幅表示にすると縮小表示のようになる…なんて時は、まずhtmlのviewport指定をチェックしてみましょう。

2.メディアクエリ（Media Queries）とメディアタイプ

htmlでviewport指定を書いたことで、スマホやタブレット端末のビューポートサイズ（CSSピクセルサイズ）を利用できるようになりました。
次に必要なのは「表示幅に合わせた、CSSの切り替え」です。

表示幅に応じてCSSを切り替える方法は、大きく２つあります。

CSSのメディアクエリを使う
HTMLでlink要素のmedia属性値を使う

このうち、オーソドックスなのは「1. CSSのメディアクエリを使う」方法です。メディアクエリは「画面幅が指定した条件に当てはまるなら、このスタイル指定を使ってください」と指示ができるCSSの機能。CSSファイルの方に書きます。

メディアクエリ基本の書き方

こちらもviewportと同じく細かい指定も色々ありますが、必要ない部分は省略可能。
基本の書き方としては、以下の例のようになります。

@media (min-width: 1024px) {
  /* 適用したいスタイル指定を書く */
}

指定しているのは幅1024px以上ですので、{ }の中に書いたCSSは大型タブレットを横持ちした・PCモニターで見た時のみに適用されます。
スマホやタブレット（縦持ち）の時には適用されません。

【～px 以下なら、という設定も可能】

CSSの書き方入門 - はじめてのWebデザインを受講された方は、上の書き方に違和感があるかもしれません。
「min-width:○○px 」ではなく「max-width:○○px」という書き方も使えます。

この場合、{ }の中に書いたCSSは、幅1024px以下＝タブレットやスマホで見た時に適用されます。

ブレイクポイント

ブレイクポイントとは、画面幅に合わせてCSSを切り替える際の「切り替えポイント」のこと。
メディアクエリでは、このブレイクポイントの幅を超えた、または小さくなった時にどう表示するかを設定しています。
つまり、@media ( ) の中でmin-width もしくは max-width の後に書いた、〇〇px という数値がブレイクポイントです。

大抵のサイトではPC版、夕ブレット版、スマートフォン版と３つのブレイクポイントを設定しています。
ブレイクポイントのpx数は任意に設定できます。
サイトによってブレイクポイントの値は様々ですが、下図の数値を使っているところが多いです。

スマホ幅の最小は何px？

スマートフォンやタブレットは端末によって、それぞれビューポートサイズ（CSSピクセルサイズ）が違います。

表示確認をする時に「この横幅で崩れなければ大丈夫」という基準、サイト全体の最小幅＝スマホ表示でもっとも狭い幅を何pxにするか迷いますよね。最小幅の目安はiPhone SEなど小型スマホの幅である375px、もしくは古めの機種（幅320pxの初代iPhone SE、幅360pxのGoogle Pixel 5など)を考慮した320pxで確認することが多いです。

スマホ表示の最大横幅については、ブレイクポイントで指定しているタブレットとの境界で崩れていなければ問題ありません。

◆実習

test1.cssにメディアクエリを1つ設定しましょう。
viewportの実習で使った「viewport-test」クラスの背景色を変えて、test1.htmlの見え方を確認してみます。

test1.css

.viewport-test{
  width: 100%;
  background: #FFFFD6; /* 黄色 */
}

/* -------------------------------------------- */
/*  ▼ タブレット横持ち/PCの場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 1024px) {
  .viewport-test{
    background: #C8E3ED; /* 水色 */
  }
}

CSSを上書き保存して、ブラウザでリロード（再読み込み）してください。
スマホ幅の表示の方は、何も変わっていません。

スマホ/タグブレットのアイコンをクリックして、スマホモードの表示を終了してみましょう。
背景色が水色に変わっていれば、メディアクエリの設定成功です！

※検証ツールの幅によって、表示幅1024px以下になっていると色が変わりません。
その場合は、検証ツールの幅を狭めるか、表示位置を変更して確認してください。

このメディアクエリの仕組を使って、画面幅に応じてCSSを変更していくとレスポンシブコーディングになります。
次回のレッスンで、より具体的なレスポンシブコーディングの仕組みとコツを習得しましょう。

補足：メディアタイプ（media属性）とは？

表示幅に合わせてCSSを切り替える方法には「“link要素のmedia属性値を使う」方法もあります。
こちらは、htmlファイルのhead内でcssを読み込む際に使います。

【例】

<!-- 画面幅（width）が1023px以下の場合には「mobile.css」を適用  -->
<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (max-width: 1023px)">

<!-- 画面幅（width）が1024px以上の場合には「pc.css」を適用 -->
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 1024px)">

サンプルコードを見ていただくと分かるように、この書き方の場合、設定したいブレイクポイント毎にcssファイルを作る必要があります。複数のCSSファイルを書かなくてはいけないので、手間がかかりますよね。

ですので、cssファイルを分ける必要がある（分けたほうが良い理由がある）時以外は使用しません。

CSSの性質とメディアクエリを書く順序

CSSはファイルの上から下に向かって読み込まれていきます。
重複した指定があれば、下（新しく読み込んだ部分）にかかれている内容で上書きします。

前回の実習で、画面幅によって「viewport-test」クラスの背景色が変わるCSSを書きました。
この時、CSSの読み込み順によってbackgroundプロパティが上書きされています。

同じ「スマホ幅なら黄色、PC幅なら水色」にするCSSでも、メディアクエリの書き方を変えられますね。
以下は基本のCSS + 幅が599px以下なら（@media (max-width: 599px) { }）という書き方です。

.viewport-test{
  width: 100%;
  background: #C8E3ED; /* 水色 */
}

/* -------------------------------------------- */
/*  ▼ スマホの場合に適用するCSS ▼
/* -------------------------------------------- */
@media (max-width: 599px) {
  .viewport-test{
    background: #FFFFD6; /* 黄色 */
  }
}

この書き方をした場合、PC幅の時にはbackgroundの上書きは起こりません。

スマホ幅で表示した時に、CSSファイルの上に書いていたbackground指定を上書きしています。

メディアクエリを書く順番

メディアクエリを書く際に「min-width」と「max-width」どちらを使っても間違いではありません。
ただし、上記で説明したように下に書かれている指定（メディアクエリで囲った指定）で上書きされていくというCSSの性質上、メディアクエリの書き方は自然と以下の２タイプのどちらかになります。

モバイルファースト方式の書き方
デスクトップファースト方式の書き方

モバイルファースト方式のメディアクエリ

モバイルファースト方式でメディアクエリを書く場合は、以下のような順序で書きます。
最初にスマホ幅表示のスタイル指定を書き、タブレット幅以上なら、PC幅以上なら、と表示領域が大きくなった場合に追加・変更するCSSを順に書いていきます。

/* 基本（スマホ表示）のスタイル指定を書く */

/* -------------------------------------------- */
/*  ▼ タブレット以上の場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 600px) {
  /* 適用したいスタイル指定を書く */
}
/* -------------------------------------------- */
/*  ▼ タブレット横持ち/PCの場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 1024px) {
  /* 適用したいスタイル指定を書く */
}

モバイルファースト方式でメディアクエリを書くと、スマホからアクセスした時は@mediaで囲まれていない部分だけを読みます。
つまり、スマホからアクセスした時は、読み込むCSSが少なくて済むわけです。

読み込むデータ量が多いほど、ページの読み込み・表示までに時間がかかります。
スマホは、お家やオフィスにあるパソコンと比べて、サイトにアクセスする時の電波状況にバラつきがあります。ですので、なるべく軽量で、ページの読み込みが速く行えることが、モバイルフレンドリーな条件として挙げられています。

このためレスポンシブデザインでモバイルファーストなサイトを作る場合、CSSもモバイルファースト方式でのコーディングが好ましいです。

デスクトップファースト方式のメディアクエリ

デスクトップファースト方式はモバイルファースト方式とは逆、基本のCSSとしてPC表示のスタイル指定を書きます。
そしてメディアクエリ使って、タブレット幅の場合、スマホ幅の場合、と徐々に画面サイズの小さい端末に向けたCSSを記述していきます

/* 基本（タブレット横持ち/PC表示）のスタイル指定を書く */

/* -------------------------------------------- */
/*  ▼ タブレット以下の場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 1023px) {
  /* 適用したいスタイル指定を書く */
}
/* -------------------------------------------- */
/*  ▼ スマホの場合に適用するCSS ▼
/* -------------------------------------------- */
@media (max-width: 599px) {
  /* 適用したいスタイル指定を書く */
}

こちらの場合、スマホでアクセスした場合には、PC用・タブレット用のCSSを読み込みます。
スマホからのアクセスが、一番読み込むデータ量が多いことになります。

近年は5Gも普及していますし、読み込み時間に大きな差は出にくいです。ただし、電波状況が悪かったり、容量が大きなPC用の背景画像を沢山読み込んでいたりすると、ページの表示に時間がかかることもあるでしょう。
このため、モバイルファースト方式のほうが望ましい、という結論に至るわけです。

ですが、実際はデスクトップファースト方式でCSSを書くことも結構あります。
デスクトップファースト方式を使う理由は、大まかに以下の２つ。

PC用のデザインしか渡されない（スマホは適当に調整して、と言われる）
CSSが複雑なPCデザインからのほうが、コーディングがスムーズに出来る

モバイルファーストなレスポンシブデザイン、と言っても絶対にCSSをスマホ向けから書かなくてはいけないわけではありません。お仕事の条件や作業効率なども見合わせて、最適な手段で進めていきましょう。

◆実習

test1.cssに、タブレット幅（幅600px）以上の場合に適用されるメディアクエリを追加しましょう。
追加したタブレット幅のメディアクエリ内で、.viewport-testの文字色と背景色を変更します。

test1.css

.viewport-test{
  width: 100%;
  background: #FFFFD6; /* 黄色 */
}

/* -------------------------------------------- */
/*  ▼ タブレット以上の場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 600px) {
  .viewport-test{
    background: #8CC63F; /* 緑色 */
    color: #FFFFFF;/* 白色 */
  }
}

/* -------------------------------------------- */
/*  ▼ タブレット横持ち/PCの場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 1024px) {
  .viewport-test{
    background: #C8E3ED; /* 水色 */
  }
}