今回はCSSを用いてレスポンシブデザイン（スマホ対応デザイン）を作る方法についてご紹介します！
現代ではモバイルファーストの時代でwebサイトを作る際にはスマホデザインが必須となり、さらにスマホデバイスもiPhone、Android、タブレットなど様々なデバイスがあるのでそのデバイス毎にデザインをしなくてはならない場合もあります。
今回の記事ではレスポンシブ デザインとな何なのか、CSSのメディアクエリを使ってスマホ対応のスタイルを適用させる方法を初心者向けに解説します！
またブレイクポイント（後ほど解説）はどのピクセル数が最も良いのかについても解説します！
✔︎こんな方にオススメ
- スマホ対応（レスポンシブ デザイン）のやり方が分からない初心者の方
- ブレイクポイントをどのピクセルにすれば良いか分からない方
- CSSを使ってレスポンシブ デザインを実装したい方
この記事でCSSのレスポンシブ がマスターできるように詳しく解説します！
レスポンシブデザインとは何か？
レスポンシブウェブデザイン は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。
Wikipedia
レスポンシブウェブデザイン（＝レスポンシブデザインは）簡単に言うと、
- スマホ→スマホ用にデザインを適用
- PC→PC用にデザインを適用
このようにデバイスや画面幅によってデザインを変える手法の事を言います。
今ご覧になっているブログを例にすると、PCとスマホでの見え方は全然違うかと思います。
これがレスポンシブデザインです！
CSSでレスポンシブデザインを実装すると、この画面幅以上ならこのスタイルを、この300px〜700pxの間の画面ではこのスタイルを適用してね！のようにpx単位で実装できるので自分の思うように自由自在にスタイリングができます！
僕はまだHTML.CSSの初心者だからPCサイズのスタイリングしかしてなかったから、スマホで見たときグチャグチャなwebページになってた。。。
ブレイクポイントのpx数はどれがベスト？
✔︎ブレイクポイントとは
ブレイクポイントとは簡単に言うと、デザインが切り替わる画面幅の事を言います。
例えばブレイクポイントを768pxに指定すると、768px以上はPCのスタイル、768px以下の場合はスマホのようにスタイルをそれぞれ適用させることができます！
でもタブレットのデバイス幅は1024pxぐらいだから、それに合わせてブレイクポイントを新たに指定しないといけないのでは？
そうなんです！世の中には様々な画面幅のデバイスがあるので、それに適したブレイクポイントを指定する必要があります。しかし何種類もあるデバイス毎にブレイクポイントを指定してはキリがないのでオススメでブレイクポイントをご紹介します！
| デバイス | 画面幅（px） |
| Galaxy S5 | 360px |
| Pixel 2 | 411px |
| iPhone 6/7/8 | 375px |
| iPhone 6/7/8 Plus | 414px |
| iPhone X | 375px |
| iPad | 768px |
| iPad Pro | 1024px |
主に使用されている（Googleに推奨されている）画面幅を表にしました。
この画面幅はGoogle Chromeの検証ツールで確認できるものです！
ブレイクポイントについてはネット上でざまざまな意見が挙げられていますが、最も多い意見が768pxを起点のブレイクポイントです！
初心者の方はmax-width:768px（〜768pxまで）をブレイクポイントにレスポンシブデザインを作ってみると良いでしょう！
仕事の現場になってくると、max-width:480px（〜480pxまで）、max-width:768px（〜768pxまで）、max-width:1024px（〜1024pxまで）のように3つのブレイクポイントを実装する場合があります！
レスポンシブデザインの学習途中の方はmax-width:768px（〜768pxまで）この1つでOKです！
CSSでレスポンシブデザインを実装する方法
レスポンシブデザインを実装するにはPHP、Javascript、CSSなど様々な方法がありますが、初心者のかたが最も簡単なのはCSSで実装する方法です！
1.HTMLのheadタグにviewportを書く
まず始めにレスポンシブデザインを適用させるためにHTMLのheadタグにある物を書かなければなりません。
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head><head></head>の間にこのように記述します。
metaタグを使いnameをviewportとします。
そしてcontentの中にwidth=device-width、initial-scale=1.0と書くのですが詳しく解説します！
✔︎width=device-widthの意味
width=device-widthとはざっくり言うと、指定するwidthの幅に対応してね！と言う意味になります。もしwidth=300pxとすると、画面幅が300pxと認識され、記述したスタイルが300px幅の時良い感じになります。
今回はデバイス幅によって柔軟に対応したいのでwidth=device-widthと記述します。
✔︎initial-scale=1.0の意味
initial-scale=1.0は倍率を意味します。1.0と記述すればそのままの倍率で、2.0と書けば2倍で表示されると言うことです。
2.CSSファイルにメディアクエリ（@media）を書く
次にCSSファイルにメディアクエリと呼ばれる「この画面幅以下の場合はこのスタイルを適用してね！」の意味をもつ記述をしていきます。
レスポンシブ化する前にPC用のスタイリングは終わらせておきましょう！
例えばスマホ対応させたい場合でブレイクポイントを768pxとします。
768px以上のスタイはもうできているかと思いますが、メディアクエリを使用し〜768px以下の画面幅の時に適用させたいCSSを新たに書きます。
@media screen and (max-width:768px) {
/*スマホ用のcssを記述*/
}このように書き{ }の中に適用させたいCSSをどんどん書いていきます。
例えばPCでは背景色を白にしているが、スマホでは赤にしたい場合は、、、
body{
background:white;
}
@media screen and (max-width:768px) {
body{
background:red;
}
}このように書けば良いですね！
3.その他の書き方
@media screen and (min-width:1024px) {
/*1024px以下の画面幅の時のcssを記述*/
}@media only screen and (min-width:340px) and (max-width:1024px) {
/*t340px〜1024pxの画面幅の時のcssを記述*/
}このようにメディアクエリはいくつでも指定できます！
CSSでレスポンシブ化まとめ
headタグにviewportを書くのとCSSにmediaを書くのを覚えとかないとね！
web制作をする際には必ず必要になってくるので、なんども練習していつでも使えるようにしておきましょう！
フリーランスを目指す方でもレスポンシブ化の案件が結構需要が高いので、できておくと良いですね！
最後までご覧いただき有難うございました！
