【CSS】「メディア特性」とは何か？分かりやすく解説！【メディアクエリー】
しゅーた（@chibasyuta）です！
この記事では「メディアクエリー」の「メディア特性」について解説します！そもそも「メディア特性」とは何か？その指定方法は？などについて丁寧にまとめていくので、興味がある方はぜひご一読ください。
この記事の内容！
- 「メディア特性」とは何か？
- 「メディア特性」の指定方法
それでは内容へ入ります！
そもそも「メディアクエリー」とは何か？
そもそも「メディアクエリー」って何？？？という方はまず下記の記事からどうぞ！こちらで丁寧に解説しています！
【CSS】「メディアクエリー」とは何か？【分かりやすい】
「メディアクエリー」には「メディア種別」と「メディア特性」の２つの指定ができる
まずは「メディア種別」というものの位置づけから解説していきます！
「メディアクエリー」には「メディア種別」と「メディア特性」の２つを指定することができます。これらを指定することによって、条件分岐するのです。
そして「この記事の内容」を押さえておけば「メディアクエリー」の半分以上を理解した、と言えると思います。なぜなら「メディア種別」の情報量は大したことなくて、この記事で扱う「メディア特性」の方が情報量的に多いからです。
また、「メディア種別」に関しても詳しく知りたいよ！という方は、下記の記事をお読みください！ここで丁寧にまとめています！
【CSS】「メディア種別」とは何か？分かりやすく解説！【メディアクエリー】
「メディア特性」とは？
「メディア特性」とは、画面幅や、特定の機能を持っているかどうか、などのWebサイトにアクセスしてきた端末の「特性」のことを指します。
「メディアクエリー」では「メディア特性式」と呼ばれるものを使って、条件分岐に使う条件として使ったりします。
「メディア特性」の指定方法は？
@media (max-width: 1080px) {
body {
background-color: purple;
}
}「メディア特性」は、（）括弧の中に書きます。
上の例のように、コロンの左側に項目、そしてコロンの右側に値を書きます。（値だけのものもある）
上の例では、「最大で1080pxまでのビューポートの幅のデバイス」という条件になります。
そして上のように「@media」と一緒に使うと、{}の中に書いてあるスタイルは、その「メディア特性式」を満たしたデバイスでアクセスしてきたユーザーにだけ適用されます。
「メディア特性式」は（）括弧の中に書く！
@media (max-width: 1080px) {
body {
background-color: purple;
}
}こんな感じで「メディア特性式」は（）括弧の中に書きます！
「メディア特性式」はオプションである！
「メディア特性式」はオプションです。なので完全に任意です。指定したい条件がある場合だけつけましょう！
よく使う「メディア特性式」は？
「メディア特性」として指定できるものはたくさんあります。
「max-width」の使い方！
@media (max-width: 1080px) {
body {
background-color: purple;
}
}このように書くと、スタイルが適用される「viewport（ビューポート）」の最大幅の指定ができます。
上の例だと「0～1080px」までの画面幅だと、スタイルが適用されて、「1081px以上」の画面幅だと適用されない、のような条件分岐になります。
「レスポンシブ対応」でよく使われる技術ですね。
「min-width」の使い方！
@media (min-width: 1080px) {
body {
background-color: purple;
}
}このように書くと、スタイルが適用される「viewport（ビューポート）」の「最小幅」の指定ができます。
上の例だと「1080px」以上の画面幅でスタイルが適用されますね。
これも「レスポンシブ対応」でよく使われる技術です。
参考リンク！
仕様書。
https://drafts.csswg.org/mediaqueries/
あわせて読みたい記事。
大学生が夏休みにweb制作で13万円稼ぐまでにやったこと。【経験談】
まとめ！
「メディア特性」とは、画面幅や、特定の機能を持っているかどうか、などのWebサイトにアクセスしてきた端末の「特性」のことを指す。
「メディアクエリー」では「メディア特性式」と呼ばれるものを使って、条件分岐に使う条件として使ったりする。
「メディア特性式」は（）括弧の中に書く。
「メディア特性式」はオプションである！
よく使われるものは「max-width」と「min-width」だけ！
この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！
それではこんな感じでこの記事を終わります！
ではまた！