今回はレスポンシブデザインのコーディングをする際の、事前準備についてご紹介します。
なんてことはないですが、どうやるんだっけ、という人向けですので、メモ書きみたいな感じです。
それでは見ていきましょう。
はじめに
そもそもレスポンシブデザインとは、
画面サイズに応じて最適なデザイン（レイアウト）を表示しますよ、
ということです。
スマホ、タブレット、PCなど、いろいろな画面サイズに対応させることです。
準備
ビューポートを設定しましょう。
簡単です。
HTMLファイルの<head></head>の中に、
これ↓をコピペするだけです。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
メディアクエリの設定
CSSファイルにメディアクエリの設定をしましょう。
メディアクエリとは、
Webサイトをデバイスの画面サイズに適した形で見せることです。
デバイスの画面サイズはざっとこんな感じでしょうか。
スマートフォン：320px〜540px
タブレット：600px〜1024px
PC：1,280px〜
コード
CSSファイルに下記のコードを書いて、
画面ごとのcssをコーディングしていきましょう。
@media screen and (max-width:540px){
画面幅が540px以下の時の、CSSコードをここに書きます。
}
@media screen and (min-width:600px){
画面幅が600px以上の時の、CSSコードをここに書きます。
}
まとめ
簡単でしたよね。
- ビューポートの設定
- メディアクエリの設定
この２つです。
ブレイクポイントや、もっと詳細を知りたい方はこちらもどうぞ。
