【CSS】「メディアクエリー」とは何か？【分かりやすい】

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

「メディアクエリー」って何？？

この記事では「メディアクエリー」について解説します。

また、下の動画でも「メディアクエリーとは何か？」ついて詳しく解説しているので、一緒に動画で学びたい方はこちらをどうぞ！

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

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

「メディアクエリー」とは、Webページを利用する端末の種類、特定の特性によって「条件分岐を提供するもの」のことです。

例えば、「印刷機器」の場合と「パソコン」などの画面などで分けて、それぞれに別の処理をすることもできます。

あとは、画面幅が大きいデバイス、画面幅の小さいスマホのようなデバイス、、などでも分けることができますね。

具体的に「メディアクエリー」にはどのようなものがあるのか？

「メディアクエリー」には大きく分けて下記のような種類の使われ方があります。

• @media,@importなどの「アットルール」で使うもの
• <link>,<source>, などの HTML 要素に 「media属性」の値として使うもの
• JavaScriptの「Window.matchMedia()」や「MediaQueryList.addListener()」

これらがありますね。

全ての種類のメディアクエリーで基本的に書き方は同じ！

上述した３つの使われ方で、基本的に「メディアクエリー」の書き方は同じです！なので、１つ覚えればその知識を他の場所で使う際も使いまわすことができます。

もっともよく使われるのが「@media」だと思う。

複数の種類の箇所で使われる「メディアクエリー」ですが、もっともよく使われるのが「@media」の形の「アットルール」として使われるものなのかなと思います。

「@media」は「レスポンシブ対応」などをする際によく使われます。

というか使ってないサイトは今時ないのかな？と思うくらいに使われてるのでWebサイトを自分でコードを書いて作る方は絶対に知っておくべき知識だと思いますね！

「@media」で「メディアクエリー」の書き方を覚えたら、他の種類のメディアクエリーでも使うことができる！

基本的に「@media」以外の場所で使われる「メディアクエリー」も「同じ書き方！」で使えるので、一箇所でしっかり書き方をマスターすればＯＫです！

「メディアクエリー」の書き方を解説した記事や動画のコンテンツも作ります！！ので、もしよければそちらで一緒に学習していきましょう！

参考リンク！

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

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries

あわせて読みたい記事。

まとめ！

「メディアクエリー」とは、Webページを利用する端末の種類、特定の特性によって「条件分岐を提供するもの」のこと。

「メディアクエリー」には大きく分けて下記のような種類の使われ方がある。

• @media,@importなどの「アットルール」で使うもの
• <link>,<source>, などの HTML 要素に 「media属性」の値として使うもの
• JavaScriptの「Window.matchMedia()」や「MediaQueryList.addListener()」

全ての種類のメディアクエリーで基本的に書き方は同じ！

もっともよく使われるのが「@media」だと思う。

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

また、下の動画でも「メディアクエリーとは何か？」ついて詳しく解説しているので、一緒に動画で学びたい方はこちらをどうぞ！

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

ではまた！