WEB制作

CSS メディアクエリ書き方一覧

  /

こんにちは！！たく丸です！
今回はCSSのメディアクエリについてご紹介していきます。

目次

メディアクエリ(media query)とは？？

まずはじめにメディアクエリとは何かご紹介致します。
WEB制作に携わっている方ならご存知かと思いますが、昨今ではスマートフォンの流行によりパソコンでWEBを見るよりも、スマートフォンを使ってWEBサイトを見るという方が増えています。
そのパソコンサイトを見ると綺麗に見れている。
ん？？スマートフォンとパソコンのサイズは大きさが全然違うのになぜはみ出さずに綺麗に見えるんだ？？
と疑問を抱いたことはないでしょうか？？
そうです！これこそがメディアクエリを用いて作成されたWEBサイトだからです。
メディアクエリとはWEBサイトがパソコンで見てもスマートフォンで見ても綺麗に見れるように調整できるようにするCSSの記述の一つです。
一般的にスマートフォン対応のことを「レスポンシブ対応」とも言ったりします。

メディアクエリの基本的な記述方法

それでは、具体的なメディアクエリの記述方法について進めていきます。
記述方法はいくつかありますが、比較的よく使用する２つのパターンを中心に紹介致します。

一つ目は、「デスクトップファースト」と呼ばれるメディアクエリの記述の仕方です。
「デスクトップファースト」とはパソコンモニターなどの大きなモニターを用いたパソコン優先ということを指し、主にパソコンユーザーに向けたサイト制作に役立つ記述です。
実例であげますと、会社勤務されている方や商品の発注、備品購入などモニターを使って作業する方が多い業種の方向けにこちらの施策を用いることが多いです。
それとは反対に「モバイルファースト」と呼ばれる記述があります。
大方予想はつくかと思いますが、スマートフォンの発展に伴い、スマホサイズで見れるサイトを優先的に作成する方法です。
利便性が非常に高いということもあり、ユーザーは様々なサービスを四六時中場所を選ぶことなく利用するようになりました。
これからどんどんモバイルファーストの需要は増えていくことが予想できます。

以上のことからもわかるようにスマートフォン対応は必須と言えるので書き方をご紹介します。

モバイルファースト

p {
　background:red;
　}
　@media screen and (min-width:480px) {
　/*　画面サイズが480pxからはここを読み込む　*/
　p { background:blue;}
　}
　@media screen and (min-width:768px) and ( max-width:1024px) {
　/*　画面サイズが768pxから1024pxまではここを読み込む　*/
　p {background:red;}
　}
　@media screen and (min-width:1024px) {
　/*　画面サイズが1024pxから*/
p {background:blue;}
}

※CSSは基本的に下に記述してある方が優先（適用）されるので、下に向かって書いていくとわかりやすいです。「モバイルファースト」の場合はスマホ→タブレット→パソコンといった順でモニターのサイズがだんだん大きくなるように記述していくのが特徴です。

デスクトップファースト

body {   
 background:#ff0000;
} /* 1024px以上の幅の場合に適応される */

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
    body {
        background-color:#ddd;
    }
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
     body {
        background-color:#FF00BF;
    }
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
    body {
        background-color:#58FAF4;
    }
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */
    body {
        background-color: #FFBF00;
    }
}

「デスクトップファースト」の場合はパソコン→タブレット→スマホといった順でモニターのサイズがだんだん小さくなるように記述していくのが特徴です。

min-width:〇〇px　〇〇px以上の時にこのcssを適用する

max-width:〇〇px　〇〇px以下の時にこのcssを適用する

と、大きい方からか小さい方からか決めて書くことで、CSSが上書きされることを防ぐことができ効率よく作業することが出来ます。

また、上記のように記述したのにスマートフォンで見るとパソコンの画面が縮小してるだけでレスポンシブになっていない！！という方は下記のコードを追記すると思ってるようになるかと思うので、是非ともご確認を！

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

まとめ

昨今の個人のインターネット利用は、パソコンよりもスマホの割合が上回っているので、ユーザーの動向やトレンドを把握や、ユーザーが使いやすいモバイルサイトを作る必要があります。ターゲットを明確にし、デスクトップファーストかモバイルファーストか見極めてサイト制作していきましょう！

RELATED POST