レスポンシブ対応について

レスポンシブ対応とは

スマホ、PC、タブレットなどデバイスにより画面幅が異なります。
それぞれのレイアウトに対応を変えることをレスポンシブ対応と言います。

はじめに

事前の準備と、それぞれのブレークポイントを確認します。

ブレークポイントを確認

今回はPC・タブレット・スマホの3つのレイアウトに対応させるため、それぞれの画面幅（ブレークポイント）を確認します。
タブレット：1024以下
スマホ：599以下

事前準備

HTMLファイルに以下記述をします。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

CSSファイルに記述

@media (max-width: 599px) { } 内に各デバイスで対応したいレイアウトの記述をしていきます。

/* タブレット表示時 */
@media (max-width: 1024px) {

}

/* スマホ表示時 */
@media (max-width: 599px) {

 }

検証ツールで確認

検証ツールを立ち上げ、「Responsive」を選択し、横幅を変更し、実装確認します。

無事に実装できていたら完了！