CSS3 メディア・クエリ

CSS2 でのメディア・クエリの導入

CSS2 で導入された @media ルールにより、いろいろなメディアタイプごとに異なったスタイルのルールを定義することが可能となりました。

例：コンピュータ画面用のもの、プリンタ用のもの、ハンドヘルドの機器用のもの、テレビタイプの機器用のもの、等の一組のスタイル規則を持つことができます。

残念なことに、これらのメディアタイプは、印刷メディアタイプ以外の機器では、あまり多くの支持を得られませんでした。

CSS3 のメディア・クエリは、CSS2 メディア・タイプのアイデアを拡張しました：デバイスの種類を探すのに代えて、デバイスの能力を見るようにしました。

メディア・クエリは、以下のような多くのことをチェックするために使用することができます：

メディア・クエリの使用は、設定したスタイルシートをタブレット、iPhone、アンドロイドに配信するための人気のある技術です。

表中の数字は、@media ルールを完全に機能をサポートした最初のブラウザのバージョンです。

プロパティ
@media	21.0	9.0	3.5	4.0	9.0

メディアクエリは、メディアタイプと、true か false のいずれかを判定する 1 つまたは複数の式から構成されます

@media not|only mediatype and (expressions) {
CSS-Code;
}

指定されたメディアタイプが、ドキュメントの表示されているデバイスのタイプと一致し、メディアクエリ内のすべての式が true である場合、クエリの結果は true です。メディアクエリーが真である場合には、対応するスタイルシートやスタイルルールは、通常のカスケーディング規則に従って適用されます。

not または only 演算子を使わない場合、メディアタイプはオプションで、all タイプが適用されることになります。

メディアごとに、別々なスタイルシートを使用することもできます：

値	説明
all	すべてのメディアタイプのデバイスに使用される
print	プリンタに使用される
screen	コンピュータ画面、タブレット、スマートフォン等に使用される
speech	大声でページを「読み上げる」スクリーンリーダに使用される

メディアクエリを使用する 1 つの方法は、スタイルシートに代替の CSS セクションを持つことです。

次の例は、ビューポートの幅が 480 ピクセル以上であれば、背景色はライトグリーンに変化します（ビューポートが 480 ピクセル未満である場合、背景色はピンクになります）：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

次の例は、ビューポートの幅が 480 ピクセル以上であれば、ページの左側にフロートしたメニューを表示します（ビューポートが 480 ピクセル未満である場合、メニューはコンテンツの上になります）：

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}

すべてのメディア・タイプと機能/式の完全な概要については、 CSS リファレンスの @media ルールをご覧ください。