画面幅に応じてレイアウトを変化させたい

レスポンシブWebデザイン

画面幅によって見た目が変わるようにWEBサイトやアプリケーションのデザインを設計すること

１.表示領域を設定

レスポンシブ対応を指定をしないと、スマートフォンで表示した時に、PCサイトのレイアウトをそのままスマートフォンの画面内に収まるように縮小して表示されるので、文字が小さくなり見づらくなってしまいます。

htmlファイルのheadタグ内に<meta name="viewport" content="width=device-width, initial-scale=1.0" />と記述します。これで表示領域の設定を完了しました。

表示領域をviewportと呼びます。width="device-width"を指定することで、ブラウザの大きさをPCやスマートフォンなどの機器の大きさに合わせることができます。initial-scale=1.0は、画面の拡大率を「1.0」に設定しているため、拡大は行われません。

２.画面サイズによってCSSを切り替える

表示された画面幅に応じて適用するスタイルを切り替える機能の分岐点をブレークポイントといいます。

2018年版ブレイクポイント(あくまでも目安です)

以下はPC表示時はpタグのフォントサイズを30px、タブレット時は25px、スマホ縦時は20pxにするという記述です。

/* PC表示時 */
p {
　font-size: 30px
}
/* タブレット表示時 */
@media (max-width: 960px) {
　p {
　　font-size: 25px
　}
}
/* スマホ縦表示時 */
@media (max-width: 480px) {
　p {
　　font-size: 20px
　}
}

@media (max-width/min-width: 〇〇〇px) { }という記述をメディアクエリと呼びます。

他にもPC表示時は横並びのレイアウトをスマホ時には縦並びにしたり、marginの値を小さくしたりすることがあります。