【CSS】「メディア種別」とは何か？分かりやすく解説！【メディアクエリー】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「メディアクエリー」の「メディア種別」について解説します！そもそも「メディア種別」とは何か？その指定方法は？などについて丁寧にまとめていくので、興味がある方はぜひご一読ください。

また、下の動画でも「メディア種別」ついて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそも「メディアクエリー」とは何か？

そもそも「メディアクエリー」って何？？？という方はまず下記の記事からどうぞ！こちらで丁寧に解説しています！

「メディアクエリー」には「メディア種別」と「メディア特性」の２つの指定ができる

まずは「メディア種別」というものの位置づけから解説していきます！

「メディアクエリー」には「メディア種別」と「メディア特性」の２つを指定することができます。これらを指定することによって、条件分岐するのです。

そしてこの記事は、その中の「メディア種別」に関して詳しくまとめる記事となります。なので「この記事の内容」を押さえておけば「メディアクエリー」の半分を理解した、といっても過言ではないのでは、とも少し思います。（実際は「メディア特性」の方が情報量が多いので、そういう意味では全然半分じゃない）

「メディア種別」とは？

「メディア種別」は、アクセスしてきた端末の種類を判定するものです。

指定できる値は下記の３つです。

• print
• screen
• alll

「メディア種別」に「print」を指定すると？

「print」は「印刷機器」や「印刷プレビュー画面」としてアクセスしてきた端末であることを表します。

@media print {
    body {
        background-color: purple;
    }
}

こんな感じで使うことができます。

上のコードだと、普通にスマホやPCでWebサイトにアクセスした場合は、スタイルが適用されないのですが、「印刷機器」だったり、PCでアクセスしたとしても「印刷プレビューモード」でアクセスした場合は、スタイルが適用されます。

「Google Chrome」では、上のように「右クリック」して「印刷」を選ぶと、「印刷プレビューモード」が起動します。そこでだけスタイルが適用されていることが確認できますね。

「メディア種別」に「screen」を指定すると？

@media screen {
    body {
        background-color: purple;
    }
}

上のコードのように「screen」を使うと、「print」以外の端末に一致します。

なので「印刷プレビューモード」じゃなく、普通にPCなどでWebサイトにアクセスした場合に、スタイルが適用される感じになりますね。

「印刷機器」でアクセスした場合には適用されません。

「メディア種別」に「all」を指定すると？

@media all {
    body {
        background-color: purple;
    }
}

「メディア種別」に「all」と指定すると、全ての端末に一致します。「print」も「screen」も含めて全てです。

「メディア種別」は省略することができる

@media (max-width: 940px) {
    body {
        background-color: purple;
    }
}

「メディア種別」は省略して書くことができます。

省略すると「all」と見なされます。

上のコードの例では、()括弧の中に「メディア特性」の指定だけが書かれていて、「メディア種別」は「all」という扱いになりますね。

「not」「only」の論理演算子を使う場合は「メディア種別」の省略はできない

@media not all and (max-width: 940px) {
    body {
        background-color: purple;
    }
}

「not」「only」の論理演算子を使う場合は「メディア種別」の省略はできません。

ですが、「Google Chrome」で試してみると、省略しても機能する場合もありました、ですが、一応ルールとしては省略できないとなっているので、書いておくのが無難だと思いますね。

「メディアクエリー」で使える「論理演算子」については、また別の記事でまとめようと思います！

参考リンク！

仕様書。
https://drafts.csswg.org/mediaqueries/

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/@media#%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E7%A8%AE%E5%88%A5

あわせて読みたい記事。

まとめ！

「メディア種別」は、アクセスしてきた端末の種類を判定するというもの。

「メディア種別」に指定できる値は下記の３つです。

• print
• screen
• alll

「print」は、「印刷機器」や「印刷プレビュー画面」としてアクセスしてきた端末であることを表す。

「screen」を使うと、「print」以外の端末に一致する。

「all」と指定すると、全ての端末に一致。

「メディア種別」は省略することができる。

「not」「only」の論理演算子を使う場合は「メディア種別」の省略はできない。

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でも「メディア種別」ついて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！