今回はレスポンシブデザインのコーディングをする際の事前準備,すなわち、ビューポート設定とメディアクエリの書き方です。
なんてことはないですが、どうやるんだっけ、という人向けですので、メモ書きみたいな感じです。
それでは見ていきましょう。
レスポンシブデザインとは
そもそもレスポンシブデザインとは、
画面サイズに応じて最適なデザイン（レイアウト）を表示しますよ
ということです。
スマホ、タブレット、PCなど、いろいろな画面サイズに対応させることです。
準備
ビューポートの設定
簡単です。
HTMLファイルの<head></head>の中に、これ↓をコピペするだけです。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
メディアクエリの設定
CSSファイルにメディアクエリの設定をしましょう。
メディアクエリとは、Webサイトをデバイスの画面サイズに適した形で見せることです。
良く見るデバイスの画面サイズはざっとこんな感じです。
スマートフォン：375px〜559px
タブレット：600px〜1023px
PC：1024px〜
実務（クライアントから依頼を受けたお仕事）ではクライアントから指定を受けるケースもあるので、あくまで参考程度にとどめてください。
クライアントから指定があれば指示どおりにメディアクエリを設定します。
コード
CSSファイルに下記のコードを書いて、画面ごとのcssをコーディングしていきましょう。
min-width を使った書き方
min-width は「○○px以上」を示します。
例えば、min-width:375px は375px以上となります。
下記のとおりモバイル画面（小さな画面幅）から順に書いていきます。
モバイルファーストと言います。
画面幅375px以上
@media screen and (min-width:375px){
画面幅が375px以上のCSSコードをここに書きます。
}
画面幅600px以上
@media screen and (min-width:600px){
画面幅が600px以上のCSSコードをここに書きます。
}
画面幅1024px以上
@media screen and (min-width:1024px){
画面幅が1024px以上のCSSコードをここに書きます。
}
max-width を使った書き方
max-width は「○○px以下」を示します。
例えば、max-width:1023px は1023px以下となります。
下記のとおりPC画面（大きな画面幅）から順に書いていきます。
PCファーストやデスクトップファーストという言い方をします。
画面幅1023px以下
@media screen and (max-width:1023px){
画面幅が1023px以下のCSSコードをここに書きます。
}
画面幅600px以下
@media screen and (max-width:600px){
画面幅が600px以下のCSSコードをここに書きます。
}
min-width と max-width どっちがいい？
モバイルファーストの時代だと言われており、スマホからのアクセスが圧倒的に多いので、モバイルファーストの書き方がいいかもしれません。
CSSに限らず、プログラムは上から順に読み込まれます。
ですので、PCファーストの書き方だと、モバイル向けのスタイルにいくまでにデスクトップ向けのCSSも余計に読み込んでしまうデメリットがあります。（表示速度に影響するケースがあります。）
ターゲットの閲覧環境によってPCファーストとモバイルファーストを使い分ければいいでしょう。
いずれしても、クライアントの意向があるので、実務の際はクライアントの指示を仰ぎましょう。
まとめ
いかがでしたでしょうか。
- ビューポートの設定
- メディアクエリの設定
- PCファーストかモバイルファーストか決める
- クライアントの指示に従う
この4つです。
ブレイクポイントや、もっと詳細を知りたい方はこちらもどうぞ。
レスポンシブ関連の記事も紹介しておきます。
-
【flex】レスポンシブデザインで要素の並び順や幅の指定を自由自在に
続きを見る
独学に行き詰まったらテックアカデミー無料メンター相談もおすすめです。