メディアクエリを使って画面サイズごとにCSSを切り替える

メディアクエリとは

マルチデバイスに対応するレスポンシブサイトが増えていますが、そこで活躍するのが「メディアクエリ」です。
メディアクエリ自体は新しいものではなく、印刷用CSSなどで活躍してきた仕組みです。
この仕組みが解像度（表示幅）の種類分けでも活用されるようになりました。

例えば、フルサイズ、980px以下、660px以下、414以下の4つにブレークポイントを設定すると次のようになります。

メディアクエリの設定例

section {
  width: 90%;
  border-radius: 10px;
  border: 2px solid #ccc;
  background-color: #333;
}
.text2,
.text3,
.text4 {
  display: none;
}

/* 980px以下の場合に適用 */
@media only screen and (max-width: 980px) {
  section {
    background-color: #4da0e7;
  }
  .text1,
  .text3,
  .text4 {
    display: none;
  }
  .text2 {
    display: block;
  }
}

/* 660px以下の場合に適用 */
@media only screen and (max-width: 660px) {
  section {
    background-color: #f5506b;
  }
  .text1,
  .text2,
  .text4 {
    display: none;
  }
  .text3 {
    display: block;
  }
}

/* 414px以下の場合に適用 */
@media only screen and (max-width: 414px) {
  section {
    background-color: #f4c840;
  }
  .text1,
  .text2,
  .text3 {
    display: none;
  }
  .text4 {
    display: block;
  }
}

HTML コード例

<section>
  <p class="text1">PC版 フルサイズ</p>
  <p class="text2">PC&タブレット版</p>
  <p class="text3">SP版</p>
  <p class="text4">SP版 最小サイズ</p>
</section>

このように画面サイズ（ブラウザの表示幅）に応じて、サイズや背景色を自在に設定することが可能になります。

メディアクエリの適用イメージ

先ほどのコードは、次のようなイメージで表示幅に応じてCSSが適用されます。

981px以上のスタイルは全ての表示幅に適用されるため、全体のベースとなるスタイルになります。
そして続く980px以下、660px以下、414px以下の順にスタイルが適用されていきます。
CSSは上から順（記載された順）に適用されるため、最後に書かれたスタイルが優先して適用（上書き）されます。
つまり、今回のコード例では414pxに書かれたスタイルが最も優先度が高く、981px以上のベースになっているスタイルは優先度が低いことになります。

メディアクエリの設定例

<style>

/* 全体のベースとなるスタイルを記述 */

@media only screen and (max-width: 980px) {

  /* 980px以下の場合に適用 */
}

@media only screen and (max-width: 660px) {

  /* 660px以下の場合に適用 */
}

@media only screen and (max-width: 414px) {

  /* 414px以下の場合に適用 */
}
</style>

今回は上記の3つのブレークポイントを設定していますが、サイズ（表示幅）やブレークポイントの数は自由に設定できます。