こんにちは朱夏です。
今回は、CSSを使ってレスポンシブ対応をする方法を解説します。
PC用とスマホ用別々のデザインを表示させたい。
同じHTMLファイルからどうやって別々のデザインを作るんだろう？
レスポンシブ対応、出来ていると思っていても実際に作ってみるとスマホで表示した時にPCと同じ様に表示されたり、思い通りに表示が切り替わらなかったりと上手くいかない事も多いと思います。
今回の記事では、私が今までの学習や案件対応で失敗し、乗り越えた経験も踏まえて、失敗しないレスポンシブ対応の方法を解説していきたいと思います。
それではいってみましょう。
レスポンシブ対応の3つのステップ
1.viewportの設定
2.PC用のデザインを作る
3.@mediaでスマホ用デザインを作る
あとがき
レスポンシブ対応の3つのステップ
レスポンシブに対応したデザインを作るには、大きく分けて以下の3つのステップが必要です。
基本的にはこの3つだけです。
念のために言っておきますと、この手順はレスポンシブ対応の部分だけですので、元となるHTMLデータは事前に用意してくださいね。
それでは、それぞれのステップについて順番に解説していきます。
1.viewportの設定
HTML側の設定になります。
初めに<head>～</head>の間に「viewport」を設定します。
書き込むもののサンプルは以下です。
|
1 |
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
これはコピー＆ペーストOKです。
これは何をやっているかというと、表示サイズの設定です。
これを設定しておかないと、実際にスマホで表示した時に、PC用デザインの縮小版が表示されてしまうといった現象が発生してしまいます。
2.PC用のデザインを作る
次に、CSSでPC用のデザインを作ります。
この時点では、基本的にレスポンシブ対応の事は気にしなくてもOKです。
PC用のデザインを気のすむまで作り込んじゃってください。
3.@mediaでスマホ用デザインを作る
最後に、「@media」を使ってスマホ用デザインを作ります。
書き方は以下の様になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*********************************************** PC用CSS ***********************************************/ /* この下にPC用のスタイルを書く */ /* PC用のスタイルここまで */ /*********************************************** スマホ用CSS ***********************************************/ @media screen and (max-width:768px) { /* この下にスマホ用のスタイルを書く */ /* スマホ用のスタイルここまで */ } |
「@media」内のスタイルは、条件を満たした場合に適用されます。
今回の記述例の場合、画面サイズの横幅が768pxまでの場合は、スマホ用のスタイルを適用する事が出来る様に書きました。
「@media」は、複数設置する事が出来ます。
細かくこだわりたい人は、スマホ用、タブレット用、PC用など細分化する事が出来ます。
その場合の書き方はこんな感じになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/*********************************************** PC用CSS ***********************************************/ /* この下にPC用のスタイルを書く */ /* PC用のスタイルここまで */ /*********************************************** タブレット用CSS ***********************************************/ @media screen and (min-width:576px) and (max-width:992px) { /* この下にタブレット用のスタイルを書く */ /* タブレット用のスタイルここまで */ } /*********************************************** スマホ用CSS ***********************************************/ @media screen and (max-width:575px) { /* この下にスマホ用のスタイルを書く */ /* スマホ用のスタイルここまで */ } |
この方法を使えばサイズごとに細かくデザインを設定できますが、あくまで大きくデザインが切り替わるときのみに抑えたほうが良いと思います。
スタイルの微調整などでサイズごとに細かく分け始めると、データ量も膨大になり、サイト更新などのメンテナンスの時に苦労することになるからです。
個人的には、最大でもPC用、スマホ用、タブレット用の3種類に収めたいですね。
あとがき
というわけで、レスポンシブ対応の方法を解説してみました。
今回のまとめはこちら。
- 3ステップで実装可能
- 「viewport」の設定は忘れずに
- 「@media」を使って画面サイズごとにスタイルを分ける
今回は技術的な作り方としてレスポンシブ対応の方法を解説してきました。
デザインの事やSEOに関する事など、他にも考えなければいけない事はいくつかあると思います。
その話は次の機会があればしていきたいと思います。
今回は以上です。
次回もよろしくお願いします。
