CSS入門 | CSS3拡張 | メディアクエリ

メディアクエリ(media query)

CSS2では、@media規則によって、異なるメディアタイプ(media type)向けの専用スタイルシート(style sheet)をサポートする。たとえば、HTML文書が画面に表示されるときと印刷されるときに、異なるスタイルを適用できる。

CSS3では@media規則がさらに発展し、メディアタイプ(media type)と1つ以上の式(expression)で構成されるメディアクエリ(media query)を使用できる。メディアクエリ(media query)は、width、height、colorプロパティのようなメディア関連プロパティを使った式によって、スタイルが適用される範囲を調整できる。メディアクエリを使用すると、コンテンツ(content)を別途変更しなくても、Webページにアクセスしているデバイスに合った形にスタイルが調整される。

CSS3メディアクエリ(media query)の対応バージョン

CSS3メディアクエリ(media query)に対応している主要Webブラウザーのバージョンは次のとおりである。ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

メディアクエリの構文

次は、同じファイル内の<style>タグ内にメディアクエリが置かれる場合の構文である。

構文

@media only|not メディアタイプ and (式) { CSSスタイルコード; }

別の方法として、外部CSSファイルにメディアクエリを別途保存することもできる。

構文

<link rel="stylesheet" media="メディアタイプ and|only|not (式)" href="CSSファイルURL"/>

Webページにアクセスしているデバイスのメディアタイプと指定されたメディアタイプが一致し、すべての式が真(true)なら、メディアクエリは真(true)を返す。このようにメディアクエリの戻り値が真であれば、そのブロック内に指定されたCSSスタイルコードが実行される。ここにand、only、notなどのキーワードを使用して、より複雑な条件を指定することもできる。

CSS3メディアタイプ(media type)

CSS3のメディアタイプは、以前のCSS2で定義されたものをそのまま使用している。次はよく使われるメディアタイプ(media type)である。

CSS3メディアクエリ(media query)プロパティ

上のプロパティのうちorientationプロパティを除くすべてのプロパティの前には、minまたはmax接頭辞を使用できる。上のプロパティを適切に活用すると、レスポンシブWebサイトを簡単に制作できる。

CSS3メディアクエリ(media query)

例

次の例は、ビューポート(viewport)の幅が480ピクセル以上の場合に背景色をdarkorangeで表示する。しかしビューポートの幅がそれ以下の場合には、背景色をlightblueに変更する。

<style>
    body { background-color: darkorange; }
    @media screen and (min-width: 480px) {
        body { background-color: lightblue; }
    }
</style>

次の例をWebブラウザーで実行すると、背景色は黒、テキストの色は白で表示される。しかしWebページを印刷すると、背景色を白に、テキストの色を黒に変えて印刷する。

<style>
    @media screen {
        body { background-color: black; color: white; }
    }
    @media print {
        body { background-color: white; color: black; }
    }
</style>

このようにメディアクエリを利用すると、メディアに応じて異なる動作をするように簡単に設定できる。