トピックス

メディアクエリ一覧

メディアクエリの種類には、「メディアタイプ」と「メディア特性」

メディアタイプ

メディアタイプは主に何で見ているか、端末の種類を指定するのに使われます。以前はもっと種類があったようですが、現在は非推奨になっています。メディアタイプは任意の項目ですが、入力がなければ「all」が適応されます。

メディア特性

メディア特性は、見ている環境などの特性に応じて見た目を切り替えるものです。メディア特性には値が存在しますので、メディアタイプとは記述方法が異なります。

実は上記以外にもメディア特性はたくさんあります。ただし、非推奨となっているもの、そもそもブラウザが未対応の特性もあります。なので、より限定的なものを使用する際には一度そのメディア特性が対応されているかどうかも調べてみてください。

メディアクエリの書き方

css内に書く時、メディアクエリは下記のように記載します。メディアタイプとメディア特性の主なものを記載します。またメディアクエリは複数のメディア特性を組み合わせることもできます。書き方次第で様々な条件を指定する子が可能です。

//メディアタイプの記述方法
@media screen { color:red; }

//メディア特性
@media (min-width:960px) { color:red; }
@media screen and (max-width:959px) and (min-width:560px) { color:red; }

覚えておきたいメディアクエリ

上記のようにメディアクエリには様々な種類があります。通常のWEBサイトをコーディングする場合、主に使用されるのは横幅のブレイクポイントを決める指定が多いですよね。下記ではそれ以外に覚えてくととても便利なメディアクエリをご紹介します。

ブラウザのメディアクエリ

各ブラウザでのメディアクエリをまとめました。見ているブラウザで少し見え方が違うと言われることもありますよね。そういうときには特定のブラウザを指定するメディアクエリを覚えておくと対処が簡単になります。

/*Microsoft Edge*/
@supports (-ms-ime-align:auto) { color:red; }

/*Internet Explorer 10, Internet Explorer 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { color:red; }

/*Firefox*/
@-moz-document url-prefix(){ color:red; }

画面の縦・横向き指定

上記でも紹介しましたが、最近はスマホやタブレットを持っている方が多くなっています。そのため、ユーザーの使用を想定して、縦や横での見た目の調整も重要です。

/*画面を横向きにした時*/
@media ( orientation: landscape) { @content; }

/*画面を縦向きにした時*/
@media (orientation: portrait) { @content; }