今作っているサイトをスマホ対応のサイトにしたいです。
具体的にどうすればいいですか？
最近のWebサイトは、基本的にスマホ対応が必須とされています。
Webサイトを見ている人たちが使っている端末のほとんどが、スマホだからですね。
スマホ対応のデザインにすることを、レスポンシブデザインなんて呼びますが、そんな難しいことではありません。
今回は事例を紹介しながら、解説していきますね。
Contents
サクッと「レスポンシブデザイン」に変更しよう
基本的な考え方として、スマホのデザインをまず考えます。
CSSを書くときも、スマホのデザインをまず考えます。そのあとに、PC用の表示を考えます。
よくあるのは、ボックスをスマホでは縦並び表示にして、PCでは横並びにするとかですね。
まずはスマホ用の縦並び表示をCSSで書いて、そのあとにPC表示のためのCSSを書くという感じです。
ちなみにスマホ表示を優先して考えることを、モバイルファーストなんて言ったりします。
レスポンシブデザイン（スマホ対応）は、CSSで対応できる
レスポンシブデザインには、CSSのコードで対応できます。
最初の一文だけHTMLに記述が必要ですが、それ以外はCSSで可能です。
viewportの設定
最初にサクッと、HTMLの部分を見ていきましょう。
<meta name=“viewport“ content=“width=device-width, initial-scale=1“>
これをHTMLの<head></head>の中に書きます。コピペで大丈夫です。
これを書くと何が起こるかというと、縮小表示がされなくなります。
この一行があるときと、ないときを比べてみましょう。
次のようなコードがあったとします。
コード
パソコン表示
viewportを設定してないとき（スマホ表示・iphone6/7/8）
viewportを設定したとき（スマホ表示・iphone6/7/8）
全然違いますよね。
なんでこんなことが起きるかというと、デフォルトだとすべての情報を画面内に収めようとするからなんですね。
viewportを設定していないと、スマホの幅にすべてを押し込もうとするので、勝手に縮小表示してしまい、めちゃくちゃ文字が小さくなってしまいます。
viewportを設定すると、勝手に改行もしてくれますし、文字の大きさも崩れずに表示してくれます。
viewportの設定は忘れず設定するようにしましょう。
メディアクエリの設定
次にCSSをいじっていきましょう。メディアクエリというものを使います。
メディアクエリとは、CSS内にメディアによって表示を場合分けするために用いられるものです。
考え方としては、「スマホ表示」と「パソコン表示」を分けてCSSを書くイメージです。
具体的にみていきましょう。
HTML
<div>
<p>こんにちは</p>
</div>
CSS
p {
color: red;
}
@media (max-width:769px) {
p {
color: blue;
}
}
See the Pen
zYYeQxL by N (@nomad-boy)
on CodePen.
実際の上のCodepenを開いて、ウィンドウの幅を変えてみてください。スマホの幅（ここでは768px）以下の幅になると、文字の色が変わるはずです。
ちなみに幅は、逆の指定もできます。
@media (max-width: 800px) → 800pxまでに適用
@media (min-width: 800px) → 799px以下に適用
ちょっとややこしいけど、理解するよりも「max」と「min」を変えてみて試す方が速いと思う。
これだけで、パソコンとスマホの表示を切り分けることができます。簡単でしょ？
基本的にスマホ優先でデザインを考えるべきとされているので、メインでスマホ優先でCSSを書いて、下の方でこのメディアクエリで切り替えて、パソコン表示のCSSを書くというのがいいかなと思います。
これを知っているだけでも、大きいと思いますよ。
【実践】パソコンでは横並び・スマホでは縦並びにする
html
css
まとめ：レスポンシブデザイン（スマホ対応）は難しくない
viewportとメディアクエリを知っているだけで、スマホデザインに簡単に対応できます。
