【CSS】失敗しないレスポンシブ対応の方法を解説します【初心者向け】

こんにちは朱夏です。

今回は、CSSを使ってレスポンシブ対応をする方法を解説します。

朱夏

PC用とスマホ用別々のデザインを表示させたい。

同じHTMLファイルからどうやって別々のデザインを作るんだろう？

レスポンシブ対応、出来ていると思っていても実際に作ってみるとスマホで表示した時にPCと同じ様に表示されたり、思い通りに表示が切り替わらなかったりと上手くいかない事も多いと思います。
今回の記事では、私が今までの学習や案件対応で失敗し、乗り越えた経験も踏まえて、失敗しないレスポンシブ対応の方法を解説していきたいと思います。

それではいってみましょう。

[もくじ]
レスポンシブ対応の3つのステップ
1.viewportの設定
2.PC用のデザインを作る
3.@mediaでスマホ用デザインを作る
あとがき

レスポンシブ対応の3つのステップ

レスポンシブに対応したデザインを作るには、大きく分けて以下の3つのステップが必要です。

viewportの設定
PC用のデザインを作る
@mediaでスマホ用デザインを作る

基本的にはこの3つだけです。
念のために言っておきますと、この手順はレスポンシブ対応の部分だけですので、元となるHTMLデータは事前に用意してくださいね。

それでは、それぞれのステップについて順番に解説していきます。

1.viewportの設定

HTML側の設定になります。
初めに<head>～</head>の間に「viewport」を設定します。

書き込むもののサンプルは以下です。

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

これはコピー＆ペーストOKです。

これは何をやっているかというと、表示サイズの設定です。
これを設定しておかないと、実際にスマホで表示した時に、PC用デザインの縮小版が表示されてしまうといった現象が発生してしまいます。

注意：
ブラウザの横幅調節では確認できません。
デベロッパーツールのスマホ表示を使用して確認すると良いです。

2.PC用のデザインを作る

次に、CSSでPC用のデザインを作ります。
この時点では、基本的にレスポンシブ対応の事は気にしなくてもOKです。

PC用のデザインを気のすむまで作り込んじゃってください。

3.@mediaでスマホ用デザインを作る

最後に、「@media」を使ってスマホ用デザインを作ります。

書き方は以下の様になります。

/***********************************************
PC用CSS
***********************************************/
/* この下にPC用のスタイルを書く */



/* PC用のスタイルここまで */


/***********************************************
スマホ用CSS
***********************************************/
@media screen and (max-width:768px) {
    /* この下にスマホ用のスタイルを書く */



    /* スマホ用のスタイルここまで */
}

「@media」内のスタイルは、条件を満たした場合に適用されます。
今回の記述例の場合、画面サイズの横幅が768pxまでの場合は、スマホ用のスタイルを適用する事が出来る様に書きました。

補足：
768pxはタブレット(ipad)の横幅を指定しています。
スマホのサイズは多種多様なので、ある程度のサイズにまとめてスタイルを作ると良いと思います。

「@media」は、複数設置する事が出来ます。
細かくこだわりたい人は、スマホ用、タブレット用、PC用など細分化する事が出来ます。

その場合の書き方はこんな感じになります。

/***********************************************
PC用CSS
***********************************************/
/* この下にPC用のスタイルを書く */



/* PC用のスタイルここまで */


/***********************************************
タブレット用CSS
***********************************************/
@media screen and (min-width:576px) and (max-width:992px) {
    /* この下にタブレット用のスタイルを書く */



    /* タブレット用のスタイルここまで */
}


/***********************************************
スマホ用CSS
***********************************************/
@media screen and (max-width:575px) {
    /* この下にスマホ用のスタイルを書く */



    /* スマホ用のスタイルここまで */
}

この方法を使えばサイズごとに細かくデザインを設定できますが、あくまで大きくデザインが切り替わるときのみに抑えたほうが良いと思います。

スタイルの微調整などでサイズごとに細かく分け始めると、データ量も膨大になり、サイト更新などのメンテナンスの時に苦労することになるからです。

個人的には、最大でもPC用、スマホ用、タブレット用の3種類に収めたいですね。