CSS メディア クエリの包括的な分析 (@media)

モバイル デバイスの急速な普及に伴い、ユーザーは従来のコンピューター システムで Web コンテンツを閲覧するだけでなく、スマートフォン、タブレット コンピューター、またはその他のさまざまなサイズのデバイスを使用して Web コンテンツを閲覧するユーザーが増えています。経験とメディアクエリを使用する必要があります。

 

メディア クエリは、CSS スタイル シートの最も重要な機能の 1 つです. いわゆるメディア クエリとは、さまざまなデバイス (コンピューター、携帯電話、タブレット、点字デバイスなど) をさまざまなメディア タイプ (デバイス タイプ) に従って区別することを指します。そして、それぞれに異なる CSS スタイルを定義します。メディア クエリを使用すると、CSS はさまざまなデバイスまたは同じデバイスのさまざまな条件でより正確に動作できるため、すべてのユーザーが優れたユーザー エクスペリエンスを得ることができます。

1. メディアの種類

メディア タイプは、デバイスのカテゴリを示すために使用されます。CSS には、次の表に示すように、さまざまなメディア タイプを示すためのキーワードがいくつか用意されています。

メディアタイプ	説明
all	すべてのメディア デバイスを示します
aural	スピーチおよびオーディオ シンセサイザー (補聴器) を示します。
braille	視覚障害者用の点字触覚フィードバック デバイスを表します
embossed	視覚障害者用の点字プリンターを表します
handheld	携帯電話、タブレットなどの小型ハンドヘルド デバイスを示します
print	プリンターを示します
projection	投影デバイスを示します
screen	パソコンのモニターを示します
tty	タイプライターや端末デバイスなど、固定密度のアルファベット グリッドを使用するメディアを表します
tv	TV タイプのデバイスを示します

2. メディアの特徴

次の表に示すように、特定のタイプに加えて、デバイスの特定の特性 (幅、高さ、解像度など) を記述するためにいくつかの属性を使用することもできます。

価値	説明
aspect-ratio	出力デバイスページの表示領域の縦横比
color	出力デバイスの各ピクセルのビット値で、一般的なものは 8、16、および 32 ビットです。デバイスがカラー出力をサポートしていない場合、値は 0 です。
color-index	出力デバイスのカラー ルックアップ テーブルのエントリ数。カラー ルックアップ テーブルが使用されていない場合、この値は 0 です。
device-aspect-ratio	出力デバイスの縦横比
device-height	出力デバイス画面の表示高さ
device-width	出力デバイス画面の表示幅
grid	出力デバイスがグリッド スクリーンまたはドット マトリックス スクリーンを使用しているかどうかを問い合わせる
height	ページの可視領域の高さ
max-aspect-ratio	出力デバイス画面の可視領域の幅と高さの最大比率
max-color	出力デバイスのピクセルあたりのビット値の最大値
max-color-index	出力デバイスのカラー ルックアップ テーブル内のエントリの最大数
max-device-aspect-ratio	出力デバイス画面の可視領域の幅と高さの最大比率
max-device-height	出力デバイス画面の可視領域の最大高さ
max-device-width	出力デバイス画面の最大表示幅
max-height	ページの可視領域の最大高さ
max-monochrome	出力デバイスのモノクロ フレームバッファのピクセルあたりの最大ビット深度。デバイスが白黒画面でない場合、値は 0 です。
max-resolution	デバイスの最大解像度
max-width	ページの可視領域の最大幅
min-aspect-ratio	出力デバイス画面の可視領域の幅と高さの最小比率
min-color	出力デバイスのピクセルあたりのビット数の最小値
min-color-index	出力デバイスのカラー ルックアップ テーブルのエントリの最小数
min-device-aspect-ratio	出力デバイスの画面表示領域の幅と高さの最小比率
min-device-width	出力デバイスの画面の最小表示幅
min-device-height	出力デバイスの画面の最小表示高さ
min-height	ページの可視領域の最小の高さ
min-monochrome	出力デバイスのモノクロ フレームバッファのピクセルあたりの最小ビット深度。デバイスが白黒画面でない場合、値は 0 です。
min-resolution	デバイスの最小解像度
min-width	ページの可視領域の最小幅
monochrome	出力デバイスのモノクロ フレームバッファのピクセルあたりのビット深度。デバイスが白黒画面でない場合、値は 0 です。
orientation	ページの可視領域の回転方向
resolution	デバイスの解像度。など: 96dpi、300dpi、118dpcm
scan	テレビ機器のスキャン工程
width	ページの可視領域の幅

3. 論理演算子

論理演算子には、not、and、および only が含まれます。複雑なメディア クエリは、論理演算子を使用して作成できます。また、複数のメディア クエリをカンマで区切り、ルールに結合することもできます。

• and: 複数のメディア クエリを 1 つのメディア クエリに結合するために使用されます. 各クエリ ルールが真の場合、メディア クエリは真です. さらに、and 演算子は、メディア特性とメディア タイプを結合することもできます。
• not: メディア クエリを否定するために使用されます。クエリ ルールが true でない場合は true を返し、それ以外の場合は false を返します。 not 演算子を使用する場合は、メディア タイプも指定する必要があります。
• only: クエリ全体が一致する場合にのみ有効になります。 only 演算子を使用する場合は、メディア タイプも指定する必要があります。

現在、次の 2 つの方法でメディア クエリを定義できます。

• @media または @import ルールを使用して、スタイル シートで対応するデバイス タイプを指定します。
• <style>、<link>、<source>、またはその他の HTML 要素で特定のデバイス タイプを指定するには、media 属性を使用します。

1) @media

@media を使用すると、一連のメディア クエリと CSS スタイル ブロックを指定できます。メディア クエリが使用されているデバイスと一致する場合に限り、指定した CSS スタイルがドキュメントに適用されます。サンプルコードは次のとおりです。

 /* 992 ピクセル以下の画面では、背景色を青に設定 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* 600 ピクセル以下の画面では、背景色をオリーブに設定 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
} 

2) @import

@import を使用して、指定した外部スタイル ファイルをインポートし、対象のメディア タイプを指定します。サンプル コードは次のとおりです。

@import url("css/screen.css") screen; 
@import url("css/print.css") print; 
body { background: #f5f5f5; line-height: 1.2; } 

注: すべての @import ステートメントはスタイル シートの先頭に配置する必要があり、スタイル シートで定義されたスタイルは、インポートされた外部スタイル シートの競合するスタイルをオーバーライドします。

3) media属性

<style>、<link>、<source> などのタグのメディア属性でメディア クエリを定義することもできます。サンプル コードは次のとおりです。

 /* ページの幅が900ピクセル以上の場合、このスタイルを適用する */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* ページの幅が600ピクセル以下の場合、このスタイルを適用する */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css"> 

ヒント: media 属性で複数のメディア タイプを指定することもできます。各メディア タイプは、media=”screen, print” のようにカンマで区切ります。