１、viewportの設定
viewport（ビューポート）とは
「表示領域」
Webページの横幅が、viewportとなる。
viewportを設定していないPC向けのページをスマートフォンで表示すると、文字もページも小さくなってしまう。
そこで、viewportを指定することで、画面幅いっぱいにコンテンツや本文がおさまるようにしていく。
ただ、viewportを設定しただけでは最適化されたとは言えない。
viewportでは表示領域を設定して、ページが見やすいように拡大されているだけになっている。
そのため、スマートフォン用にCSSでレイアウトを設定してあげる必要がある。
viewportのmetaタグを記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ABCD DEMO</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
</head>
「width=device-width」は、閲覧している画面サイズに合わせてサイズ変更するという意味になる。
initial-scale（初期倍率）
最小縮小倍率の指定。
初期値は0.25で、0より大きく10未満の値を指定できる。
maximum-scale（最大倍率）
minimum-scaleと同様最大拡大倍率を指定できる。
0から10の値を指定することができる。
設定しない場合は1.6と自動的に設定される。
user-scalable （ズーム操作の可否）
ユーザーがズームすることを許可するかどうかを指定できる。
yesかnoまたは1か0で指定することができる。
設定しない場合はuser-scalable=yesと自動的に設定される。
２、メディアクエリの設定
デバイスの解像度やウィンドウの幅、向きなどの指定条件に合わせて、別々のCSSを適用できる機能のこと
メディアクエリでは、link要素中のmedia属性やCSSの@media規則を使って、デバイスやスクリーンサイズで適用範囲を切り替えることができる。
一般的に、link要素を利用して複数ファイルを読み込むよりも、CSS中で@mediaを記載した方がHTTPリクエストの回数が少なく、ページの読み込みが早くなると言われている。
ブレイクポイント
メディアクエリを使ったCSSの切り替えでは、CSSの切り替え条件として「ブレイクポイント」(Break Point)を設定する。
記述例
@media screen {
* {font-size: 16px; }
}
@media screen and (min-width:960px){
* {font-size: 16px; }
}
表示を確認する
ブラウザの検証ツールを立ち上げる
ピンク丸の部分の表示をクリック
上記画像のボタンをクリックすると「デバイスモード」が立ち上がります。デバイスモードでは、様々なデバイスのサイズでWebサイトの表示が確認できる。
画面上部の「Responsive」の部分で、主要なスマホやタブレットでの表示がプルダウン形式で選択できる。
「Responsive」は画面幅をマウスドラッグで変更したり、任意の数値（px）を指定することができる。
それ以外の具体的なデバイスを選択すると、そのデバイスの画面幅で表示されるようになる。