【CSS初心者以上！】何となくから卒業！本当の意味でメディアクエリを使いこなす方法

プログラミングの勉強をしている時に、

「メディアクエリを設定してモバイルファーストなWebサイトを作りたい」

「メディアクエリを何となく使っているけど、本当に今の使い方で合っているのかな？」

と思ったことはありませんか？

そこで今回は、メディアクエリの正しい使い方を解説します。

この記事を読んでわかる内容は以下の通りです。

レスポンシブデザインで、何となくメディアクエリを使用している人は多いでしょう。

しかし、一部が非推奨になっていたり、無駄な記述をしている可能性もあります。

改めて、しっかりとメディアクエリの記述の意味や使い方を理解して、CSS初心者を卒業しましょう！

そもそもメディアクエリとは？

まずは、メディアクエリとは一体何なのか、しっかり理解する必要があります。

パソコンやスマートフォンなど、デバイスの画面幅に合わせて適切なCSSを読み込むために必要なメディアクエリは、レスポンシブデザインに必須のタグのことです。

メディアクエリを記述するには、以下のように「メディアタイプ」と「メディア特性」を指定する必要があります。

@media メディアのタイプ and (特定の条件){
  /* 指定したいCSSの記述 */
}

では、それぞれについて詳しく見ていきましょう。

メディアタイプとは？

メディアタイプとは、CSSを適応させるメディアを指定する記述で、以下の種類を指定することができます。

メディアタイプ	適応メディア
all	全てのデバイス
screen	プリンターまたは音声機器以外のデバイス全て
print	プリンター、印刷プレビュー画面
speech	スピーチシンセサイザ（音声合成）

上記は、推奨されている4つのメディアタイプです。

Webサイトで使用することが多いめ、「all」や「screen」を指定する場合はほとんどでしょう。

しかし、screenは「スクリーン画面」の指定ではなく、「プリンターまたは音声機器以外のデバイス全て」という意味なので、プリンターに適用したくないという明確な意図が無い限り、allを使用した方が良いでしょう。

非推奨になったメディアタイプがある！

現在、以下のメディアタイプは非推奨となっているので、使わないようにしましょう。

メディア特性とは？

メディア特性は「max-width:786px;」というように、主にビューポートの横幅を指定するもので、メディアタイプの後に記述します。

width以外には、以下のような種類も指定できます。

メディア特性	内容
height	ビューポートの高さ
orientation	ビューポートの向き
aspect-ratio	ビューポートの幅と高さから算出されるアスペクト比
resolution	出力デバイスの画素密度

上記のように、多くのメディア特性がありますが、width（ビューポートの横幅）を指定するものだと認識しておいて問題ありません。

これは、ブレイクポイントと呼ばれるデバイスの横幅のことで、レスポンシブ対応に必要な指定になります。

非推奨になったメディア特性がある！

メディア特性は、非推奨になっているものもあるので注意しましょう。

メディアクエリの正しい使い方

ここからは、メディアクエリの基本的な使い方について解説していきます。

レスポンシブデザインのWebサイトを制作していると仮定して、メディアクエリを使ってブレイクポイントを設定していきます。

メディアクエリを指定する方法は、以下の3つです。

では、それぞれ詳しく見ていきましょう。

HTMLでメディアクエリを使う方法

HTMLでメディアクエリを使うには、CSSファイルを読み込むlinkタグにmedia属性を記述します。

具体的な記述方法は、以下の通りです。

<link rel="stylesheet" href="読み込むファイルのパス" media="メディアタイプの指定 and (メディア特性の指定)">

<!-- 例 -->
<link rel="stylesheet" href="style.css" media="screen and (max-width: 767px)">

上記のように記述することで、読み込むファイル自体を指定したサイズに振り分けることができます。

CSSでメディアクエリを使う方法2つ

CSSでメディアクエリを使うには、「@media」「@import」を記述する2つの方法があります。

それぞれ似ている記述ですが、対応が異なるのでしっかり把握しておきましょう。

@mediaを記述する

@mediaは、指定するスタイルをデバイスごとに振り分けることができる指定方法です。

具体的には、以下のように記述します。

@media メディアタイプの指定 and (メディア特性の指定) {
  /*指定するスタイルの記述*/
}

/* 例 */
@media screen and (max-width: 767px) {
  div {
    width: 100%;
  }
}

@importを記述する

@mediaと読み込むファイルは同じですが、@importは、インポートするファイルをデバイスによって振り分けることができる指定方法です。

具体的には以下のように記述します。

@import url('読み込むファイル') メディアタイプの指定 and (メディア特性の指定);

/* 例 */
@import url('style.css') screen and (max-width: 767px);

メディアクエリを使いこなすために知っておきたいこと

https://wemo.tech/839#index_id12

メディアクエリの基本的な記述方法について解説しました。

ここからは、よりメディアクエリを使いこなすために必要な情報をまとめていきます。

記述を省略できたり、色々な組み合わせができて一文にまとめられたりと、メディアクエリの本当の使い方を解説しますので、「基本的なことがわかればいい」という方も要チェックですよ！

メディアクエリの記述は省略できる！

これまで様々なメディアクエリの記述方法を解説してきましたが、実は省略できる記述があります！

本当は書かなくても良いものを知っておけば、コーディングがはるかに楽に速くなりますよ。

省略できる記述①メディアタイプのall

全てのメディアを対象にできる「all」。

とても便利ですが、実は、省略してOKなのです。

具体的には、以下のように省略できます。

@media all and (max-width: 767px) {
  /*指定するスタイルの記述*/
}

//これは以下でもOK
@media (max-width: 767px) {
  /*指定するスタイルの記述*/
}

省略できる記述②「min」「 max」の 演算子

widhtやhegihtなどの範囲型のメディア特性には、minやmaxを使用するのが一般的です。

しかし、Media Queries Lebel4からはそれさえ省略可能で、「<」や「>」などの演算子で記述することが可能になりました。

具体的には、以下のように省略可能です。

//例：横幅 767px 未満のデバイス
@media screen and (max-width: 767px) {
}
//これは以下でもOK
@media screen and (width < 767px) {
}

//例：横幅 320px 以上 767px 未満のデバイス
@media screen and (320px <= width < 767px) {
}

色々な組み合わせが可能

メディアクエリは、接続詞を記述することで、一度に複数の指定をすることができます。

一般的には「and」が使用されていますが、他の組み合わせも可能なので、しっかり把握しておきましょう。

「or」の組み合わせは「,」を使用する

「,（カンマ）」を使用することで「AまたはB」という組み合わせの指定をすることができます。

「,」には、「or」と同じ意味があるので、「または」の意味として使用できるのです。

具体的には、以下のように記述することができます。

//横幅が320px以下、または1020px以上
@media (max-width: 320px) or (min-width: 1020px){
}

//これは以下でもOK
@media (max-width: 320px), (min-width: 1020px){
}

「and」の組み合わせについて

「and」を使用することで「AかつB」という組み合わせの指定をすることができます。

具体的には、以下のように記述することができます。

//横幅が320px 以上かつ767px以下
@media (min-width: 320px) and (max-width: 767px) {
}

メディアクエリの記述は省略すべし！もっとシンプルに使いこなそう

今回は、メディアクエリの構成と正しい記述方法について解説しました。

以下はこの記事のまとめです。

メディアクエリは、Media Queries Lebel4の仕様で大きく変わり、記述方法もコンパクト化されています。

省略できる箇所は省略し、まとめて記述できる箇所は組み合わせの接続詞を使用することで、かなり簡素化することが可能です。

メディアクエリを正しく使いこなして、CSS上級者を目指しましょう！