メディアクエリとviewportの使い方について

メディアクエリとviewportを正しく使おう。

この記事はメディアクエリ？、viewport？と思う方に向けて書きました。
最初に言っておくとメディアクエリとviewportは一緒に使おう！

メディアクエリって何だろう？

メディアクエリは簡単に言えばレスポンシブwebデザインを構成する際に必要なものです。

• レスポンシブwebデザインとは？

レスポンシブwebデザインは、自分がみてるデバイス（スマホ、タブレット、PC）に関係なくwebサイトの画面を表示することができるようになるデザインのことです。

viewportって何だろう？

viewportとはデバイス、ブラウザウインドウなどの表示領域こと。
表示領域とは自分が今見てるブラウザの画面幅そのものだと思っていただければいいです。

メディアクエリの書き方は主に２種類ある！

• モバイルファースト
  モバイルファーストとは、webサイトを作る際にスマートフォンサイトから作成するときに使われる手法です。

• デスクトップファースト
  デスクトップファーストとは、webサイトを作る際にPC版から作成するときに使われる手法です。

モバイルファーストとデスクトップファーストの書き方を見ていこう！

index.css

/*モバイルファースト*/
h1 {
　color:red;
　}
　@media screen and (min-width:480px) {
　/*　画面サイズが480pxからはここを読み込む　*/
　h1 { color:#ededed;}
　}
　@media screen and (min-width:768px) and ( max-width:1024px) {
　/*　画面サイズが768pxから1024pxまではここを読み込む　*/
　h1 {color:red;}
　}
　@media screen and (min-width:1024px) {
　/*　画面サイズが1024pxから*/
h1 {color:blue;}
}

index.css

/*デスクトップファースト*/
.background {    background-color: #E4E3E4;} /* 1024px以上の幅の場合に適応される */
@media screen and (max-width: 1024px) {
　/* 1024pxまでの幅の場合に適応される */
　.background {
　background-color:#2262D1;
　}
　}
　@media screen and (max-width: 768px) {
　/* 768pxまでの幅の場合に適応される */
　.background {
　background-color:#f10010;
　}
　}
　@media screen and (max-width: 480px) {
　/* 480pxまでの幅の場合に適応される */
　.background {
　background-color:#F9DF2C;
　}
　}
　@media screen and (max-width: 350px) {
　/* 350pxまでの幅の場合に適応される */
　.background {
　background-color: #68B876;
　}

メディアクエリにおけるmin-width, max-widthとは？

• min-width
  min-widthは最低でも○○pxからcssを適用させるというものです。

• max-width
  max-widthは最高でも○○pxまでcssを適用させるというものです。

メディアクエリを書く際に注意しなければいけないのはcssの上書きです。
メディアクエリは便利な仕様ですが必ず順番に書かなくてはいけません。
モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。めちゃくちゃに書いてしまうと一部のスタイルが適用されなくなるからです。

以下にメディアクエリの悪い例を示します。

index.css

/*メディアクエリの悪い例*/
h1 {
　color:red;
　}
　@media screen and (min-width:480px) {
　h1 { color:#ededed;}
　}
　@media screen and (min-width:200px) and ( max-width:1024px) {
　h1 {color:red;}
　}
　@media screen and (min-width:1024px) {
h1 {color:blue;}
}

この書き方をしてしまうと、@media screen and (min-width:480px)は、@media screen and (min-width:200px) and ( max-width:1024px)に上書きされcssが適用されなくなるという現象が起こります。
なのでメディアクエリを書く際には、モバイルファースト（小さい→大きい）とデスクトップファースト（大きい⇨小さい）の順番にして書くようにしましょう。

viewportの書き方を見ていこう

• viewportの基本的な書き方

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

viewportをhtmlファイルに指定する際は、基本的にこれでいいと思います。
device-widthは基本的に立ち上がっているブラウザ、デバイスのスクリーンの横の幅で指定される。
initial-scaleは初期表示時のスケールを指定します。

他にも色々書き方はありますがこの辺はググれば見つかるので省略しときます。

メディアクエリとviewportを一緒に使ったほうがいい理由

• よりレスポンシブなwebデザインになる
• viewportだけを指定しただけだとサイトをスマホで見ると画面にサイトがぴったり収まって見えるだけになる

最後に

今回はメディアクエリとviewportについて簡単にまとめて見ました。
この二つをうまく使うことによって見やすく綺麗なwebデザインが作成できると思うのでぜひ試して見てください！