【html&css実践 #9】メディアクエリとは？レスポンシブコーディングに必須なメディアクエリを理解しよう！

今回は、メディアクエリについて解説したいと思います。
メディアクエリは、レスポンシブコーディングに必ず必要になるので、しっかり身につけましょう。

YouTubeにもアップしていますので、見ていただけたら嬉しいです！

メディアクエリとは？

メディアクエリ（Media Queries）とは、ページの画面環境に応じてスタイルを切り替えることができるものです。
ウィンドウの幅が1000px以下だったらこのスタイルを適用、500px以下だったらこのスタイルを適用など、細かく指定することができます。

このメディアクエリを使用することで、レスポンシブコーディングが出来るようになります。

レスポンシブとは？

レスポンシブについても触れておきます。

レスポンシブとは、PCやスマホ、タブレットなど、それぞれ違うウィンドウサイズでも、全ての端末で見やすいようにする手法のことです。

昔は、PC用とスマホ用のページを別々に作ったりしていましたが、これでは単純に2倍時間が掛かります。
なので、1つのhtmlで、必要な箇所だけ調整するレスポンシブが、最近は主流になります。

昨今、Webページは、スマホから見るユーザーの方が圧倒的に多いため、レスポンシブコーディングは必須と思っておいた方が良いでしょう。

メディアクエリの使い方

それではメディアクエリの使い方を解説します。
メディアクエリは大きく2つの使い方があります。

①link要素に指定する

/* ウィンドウサイズが480px以下なら適用 */
<link rel="stylesheet" href="sp.css" media="screen and (max-width:480px)">

/* ウィンドウサイズが480px〜768pxなら適用 */
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:480px) and (max-width:768px)">

/* ウィンドウサイズが768px以上なら適用 */
<link rel="stylesheet" href="pc.css" media="screen and (min-width:768px)">

1つ目は、link要素に指定する方法です。

上記コードのように、media属性にウィンドウサイズを指定します。
こうすることで、ページを閲覧しているユーザーのウィンドウサイズを判定して、それぞれのcssを読み込ませることができます。

max-widthと、min-widthが少しややこしいですが、「maxが以下」「minが以上」になります。

②cssに記述する

p {
    font-size: 40px
}

@media screen and (max-width:768px) {
    p {
       font-size: 20px
    }
}

2つ目は、cssに記述する方法です。

上記コードの例だと、ウィンドウサイズが768以下だったら、pタグのフォントサイズが20pxになります。
逆に769px以上だったら40pxになります。

この記述の方が、cssファイルも1つで良いし、調整が必要な箇所だけメディアクエリでスタイルを書けば良いので、おすすめです。

実際に書いてみる

おすすめのcssに記述する方法を、実際に書いてみます。

<div class="bg-change"></div>

.bg-change {
    width: 100vw;
    height: 100vh;
    background: #00f;
}

@media screen and (max-width:768px) {
    .bg-change {
        background: #f00;
    }
}

ブラウザで確認して、ウィンドウサイズを縮めてみてください。
768px以下になったら背景色が変わると思います。

まず、メディアクエリで囲まれていない「.bg-change」のスタイルですが、これは基本となるスタイルで、ウィンドウサイズ関係なく全ての端末に適用されます。

次に、メディアクエリで囲まれている「.bg-change」のスタイルですが、これはウィンドウサイズが768px以下の端末にのみ適用されます。

結果どうなるかと言うと、768px以下の端末だった場合、「background: #f00;」が適用され、スタイルが優先されます。

ひとつ勘違いしないで欲しい点が、スタイルが切り替わって適用されるのではなく、優先されて適用されることです。

なので、「width: 100vw;」と「height: 100vh;」は、メディアクエリで囲まれていない「.bg-change」にしか記述していませんが、ここは基本となるスタイルになるので、768px以下でも適用されることになります。

最後に

以上、メディアクエリについて解説しました。

メディアクエリは、レスポンシブコーディングに必ず必要で、頻繁に使う手法です。
使えるようになると、色々な表現が出来るようになるし、コーディングスピードも上がるので、しっかり身につけましょう。