html, cssでレスポンシブ対応について - Elsaの技術日記(徒然なるままに)

実は今ちょっとしたWebアプリを作成しているところw。
作成中に
スマホへの対応もしとこうかな？🤔
と思ったのですが、、、

レスポンシブ対応したことなかった！！😅
と気づき、調べてみました。

忘れないように今回もまとめておこうと思います！！

■viewportの指定
■画面サイズに応じたレイアウト・デザインの指定
■レスポンシブ対応したデザインをデバッグする
■実際にデバッグしてみる
■最後に
■参考

■viewportの指定

まずは画面サイズに応じて適切なレイアウトを行うためにviewportを指定していきます。

viewportとは、、、
viewportとはWebページの表示領域を指します。viewportを正しく指定すると、画面サイズに応じたレイアウトの最適化ができるようになります。レスポンシブデザインではこのviewportが重要で必須のテクニックになります。
※参考：https://www.site-convert.com/archives/1528

このviewportですが、htmlのmetaタグで指定すればOKです。
コードはこんな感じです。

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

content内に各種プロパティを設定すればよく、
【widthプロパティ】
表示領域を指定するプロパティ。
device-widthを指定した場合、表示しているデバイスの画面サイズが表示領域になり、レスポンシブ対応の場合にはdevice-widthを利用します。

【initial-scale、minimum-scale】
初期表示のズーム倍率の指定になります。
initial-scaleは特別な理由がない限りは1、minimum-scaleは実装したアプリに応じて値を指定すればよさそうです。

■画面サイズに応じたレイアウト・デザインの指定

viewportにより画面サイズの取得が出来るようになりました。
今度はレイアウト・デザインの指定です。

レイアウト・デザインを指定するために、メディアクエリを利用していきます。

メディアクエリとは、、、
レスポンシブデザインを実現するための重要なテクニックです。
レスポンシブデザインでは、デバイスの画面幅に応じて異なるデザインを記述する必要があります。
メディアクエリを使用することで、デバイスの画面幅が〇〇px以上だったらこのCSS、〇〇px以下だったらこっちのCSSといった感じで、画面幅に応じてCSSを切り替えることができます。
※参考：https://www.site-convert.com/archives/1528

メディアクエリの書き方としては2種類あり、
　①PCをメインにしつつ、タブレットやスマホの場合にはレイアウトデザインを切り替える
　②スマホをメインにしつつ、タブレットやPCの場合にはレイアウトデザインを切り替える
になります。

①の場合には、

/* PCの場合にはこちらように外に記述*/

@media screen and (max-width999px){
　/*タブレット用にデザイン・レイアウトするcssを記述*/
}

@media screen and (max-width:350px){
　/*スマホ用にデザイン・レイアウトするcssを記述*/
}

と記述します。
こちらのコードですが、
　・1000px以上：cssでデフォルト記述された値を参照
　・999px以下、351px以上：タブレット用として＠mediaに囲われたcssを読み出す
　・350px以下：スマホ用として＠mediaに囲われたcssを読み出す
と実行されます。
こちらですが、上から順番に実行されるので、
タブレット用とスマホ用を逆に指定しまうと、スマホの場合でもタブレット用のメディアクエリが読み出されてしまうので注意。

②の場合は、

@media screen and (min-width: 351px) {
	/*タブレット用にデザイン・レイアウトするcssを記述*/
}
@media screen and (min-width: 1000px) {
	/*スマホ用にデザイン・レイアウトするcssを記述*/
}

と記述します。
こちらのコードも先ほどと同様に、
　・1000px以上：cssでデフォルト記述された値を参照
　・999px以下、351px以上：タブレット用として＠mediaに囲われたcssを読み出す
　・350px以下：スマホ用として＠mediaに囲われたcssを読み出す
となります。
先ほど記載しました通り、①と②はメインとして設定するcssをPCなのかスマホなのか、の違いのみなので、
cssとしてPC用で作成して、タブレット・スマホは差分でよい場合には①、
cssとしてスマホ用で作成して、タブレット・PCは差分でよい場合には②、
を用いればOKです。

■レスポンシブ対応したデザインをデバッグする

ここまでの方法を活用していけば、レスポンシブ対応したレイアウト・デザインを指定することが可能になるのですが、
肝心のデバッグ方法はどうすればよいのか？🤔
と疑問を持っていました。

こちらのデバッグですが、Google chromeのデベロッパーツールを用いれば簡単にできます！！
手順はこちら。
　(1)Google Chromeで自分がデバッグしたいページを表示
　(2)F12キーを押下してデベロッパーツールを表示
　(3)下記デバイスアイコンをクリック
f:id:Elsammit:20210307185723p:plain
　(4)デバッグしたい画像サイズを指定