IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

MediaQuery まとめ

CSS

Media Query とは

CSS3 から導入される Media Type を大幅に拡張する仕様です。

そもそも Media Type とは

Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。
以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。

<link rel="stylesheet" type="text/css" href="共通の.css" media="all" />
<link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" />
<link rel="stylesheet" type="text/css" href="プリンタ用紙の.css" media="print" />

以下のようにカンマで区切って複数指定することもできます。

<link rel="stylesheet" type="text/css" href="テレビとパソコンの画面の.css" media="tv, screen" />

見たことありますよね！
他にも @media ルールや @import ルールでも使うことができます。

@import url("unko.css") tv, print; /* ← これこれ！ */
@media tv, screen { /* ← これこれ！ */
}

というわけで、 Media Type の復習でした！
もっと Media Type の細かい仕様を知りたい人は以下をどうぞ
Media types

Media Query は Media Type の拡張

で、 Media Query の話にもどります。 Media Query は Media Type の拡張です。
書ける場所も、 Media Type と同じで、

  • link 要素の media 属性
  • @media ルール
  • @import ルール

です。
Media Type と下位互換性があるので、 Media Type は Media Query の一つと考えることもできます。

Media Query では Media Type と比べて何が出来るようになっているのか

簡単にいうと、 CSS を適用するメディアを Media Type よりも細かく指定できるようになります。
抽象的に言っても分かりにくいので、実際に見てみましょう。

<link rel="stylesheet" type="text/css" href="おっきいウィンドウ用.css" media="screen and (min-height: 600px)" />
<link rel="stylesheet" type="text/css" href="ちっちゃいウィンドウ用.css" media="screen and (max-height: 599px)" />
<link rel="stylesheet" type="text/css" href="カラーディスプレイ.css" media="screen and (color)" />
<link rel="stylesheet" type="text/css" href="白黒ディスプレイ.css" media="screen and (monochrome)" />

こんな感じです。なんとなく、わかりますね＾＾
and と 括弧の中 が Media Type から Media Query への新しい部分です。

Media Query の文法

では、 Media Query の文法を見てみましょう

カンマと and

まず、 Media Query も Media Type と同じようにカンマ区切りで複数指定できます。

screen and (min-height: 600px) and (min-width: 300px), screen and (min-width: 400px), print

こうすると screen and (min-height: 600px) and (min-width: 300px) と screen and (min-width: 400px) と print の、「どれかの条件を満たすメディア」という意味になります。
つまり or のような働きをする訳ですね。（Media Query には or はありません）
次に、 and で区切られます。

screen and (min-height: 600px) and (min-width: 300px)

これは、さっきの例でも出てきましたが screen で (min-height: 600px) と (min-width: 300px) の、「すべての条件を満たすメディア」という意味になります。
ここまで、カンマと and の区切りを紹介しましたが、これはあくまでも区切りです。
以下のように、ネストさせることはできません。

((A and B), ((C, D) and E))
not と only

カンマで区切られた条件には、 not と only というプリフィックスを付けることができます。

not screen and (min-height: 600px) and (min-width: 300px)

not はその名の通り、それ以降の条件の意味を逆にします。

only screen and (min-height: 600px) and (min-width: 300px)

また、 only は何もしません。ただ単に、Media Query を理解できない UA （ブラウザ）に条件判定を失敗させるためにあります。

Media Type と Media Expression

カンマと and で区切られた条件は、以下の二つの種類があります。

  • Media Type
  • Media Expression

Media Type は、CSS2.1 の時代からあった screen や tv や print や all などです。
Media Type は必ず最初に一つ必要です。つまり、 and で区切られた条件の最初は絶対 Media Type です。
以下に Media Type の一覧を示します。

  • all
  • aural
  • braille
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv
  • embossed

Media Expression はさきほどから出てきている (min-height: 600px) などです。
Media Expression は必ず丸括弧で囲まれています。

Media Feature と 値

Media Expression の丸括弧の中身は、 Media Feature と値がコロンで区切られて一個ずつです。
Media Feature は min-height とかで、値が 600px とかですね。
Media Feature が決まれば、 値がとるべき値の単位や型が決まります。
また、値を省略すると 0 ではない値という意味になります。（つまり、 (color) と書くと「(color:0) 以外」という意味）
以下に Media Feature の一覧を示します。

  • width, min-width, max-width
    • view port の横幅、つまりウィンドウの横幅 （css の長さの単位を使える）
  • height, min-height, max-height
    • view port の高さ、つまりウィンドウの高さ （css の長さの単位を使える）
  • device-width, min-device-width, max-device-width
    • デバイスの横幅、つまりディスプレイの横幅 （css の長さの単位を使える）
  • device-height, min-device-height, max-device-height
    • デバイスの高さ、つまりディスプレイの高さ（css の長さの単位を使える）
  • device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio
  • color, min-color, max-color
    • 256bit カラーなら 8 、 8bit カラーなら 3 というように bit を二進数で表したときの桁。カラーデバイスじゃないなら 0
  • color-index, min-color-index, max-color-index
    • デバイスのカラールックアップ表のエントリーの数（？？）
  • monochrome, min-monochrome, max-monochrome
    • 256bit モノクロなら 8 、 8bit モノクロなら 3 というように bit を二進数で表したときの桁。モノクロデバイスじゃないなら 0
  • resolution, min-resolution, max-resolution
    • 解像度（dpi、 dpcm という単位を使う）
  • scan
    • プログレッシブか、インタレースか（テレビだけ）
  • grid
    • グリッドの幅を指定する

ちなみに、 min- max- は以上、以下という意味です。たとえば、 (min-height: 300px) だと「ウィンドウの高さが 300px 以上」という意味。

ブラウザの実装状況

現在、 Media Query は以下の環境で、使うことができます。

Firefox では、 3 系も含めて使えませんでした＞＜
IE でも使えません＞＜

JavaScript での扱い

JavaScript では、 Media Type は MediaList オブジェクトで扱いますが、 Media Query はどのようになっているのでしょうか。
少し調べてみたところ、 DOM 2 Style の次期仕様である CSSOM の Editor's Draft に書きかけの項がありました。
CSS Object Model (CSSOM)
ここを見る限りでは、文字列にシリアライズ する方法はかなり細かく決まっているみたいですね。
今のところは、データ構造としては扱えなくて、MediaList の appendMedium メソッドで文字列を突っ込んだり、item メソッドでシリアライズされた文字列を取得したりする感じになるのかな。
ちょっと残念

仕様

詳しい仕様はこちら、
Media Queries

まとめ

Media Query についてまとめてみました。