モバイル デバイスの急速な普及により、ユーザーは Web コンテンツを閲覧するために従来のコンピューターを使用するだけでなく、Web コンテンツを確実に使用するためにスマートフォン、タブレット、またはその他のデバイスを使用し始めています。さまざまなデバイスのユーザーが優れたエクスペリエンスを得るには、メディア クエリを使用する必要があります。
メディア クエリは、CSS スタイル シートの最も重要な機能の 1 つであり、いわゆるメディア クエリは、さまざまなメディア タイプ (デバイス タイプ) に基づいてさまざまなデバイス (コンピュータ、携帯電話、タブレット、点字デバイスなど) を区別することを指します。そして、それぞれに異なる CSS スタイルを定義します。メディア クエリを使用すると、CSS が異なるデバイスまたは同じデバイス上の異なる条件に対してより正確に動作できるようになり、すべてのユーザーが良好なユーザー エクスペリエンスを得ることができます。
1. メディアの種類
メディア タイプは、デバイス カテゴリを表すために使用されます。CSS では、次の表に示すように、さまざまなメディア タイプを表すキーワードがいくつか提供されています。
2. メディアの特性
特定のタイプに加えて、次の表に示すように、幅、高さ、解像度などのいくつかの属性を通じてデバイスの特定の特性を説明することもできます。
3. 論理演算子
論理演算子には、not、and、only が含まれます。論理演算子を使用して複数のメディア クエリを構築し、それらを 1 つのルールに結合することもできます。
and: 複数のメディア クエリを 1 つのメディア クエリに結合するために使用されます。各クエリ ルールが true の場合、メディア クエリも true になります。また、and 演算子はメディア特性とメディア タイプを結合することもできます。
not: メディア クエリを無効にするために使用されます。クエリ ルールが true でない場合は true を返し、それ以外の場合は false を返します。 not 演算子を使用する場合は、メディア タイプも指定する必要があります。
Only: クエリ全体が一致する場合にのみ有効になります。 Only が使用されない場合、古いブラウザは単に screen と (最大幅: 500px) を screen として解釈し、クエリの残りの部分を無視し、スタイルをすべての画面に適用します。 唯一の演算子を使用する場合は、メディア タイプも指定する必要があります。
4. メディアクエリを定義する
現在、次の 2 つの方法でメディア クエリを定義できます。
@media または @import ルールを使用して、スタイル シートで対応するデバイス タイプを指定します。
media 属性を使用して、<style>、<link>、<source>、またはその他の HTML 要素で特定のデバイス タイプを指定します。
(1)@メディア
「CSS @Rules」セクションで @media について簡単に説明しましたが、メディア クエリが使用されているデバイスと一致する場合に限り、@media を使用してメディア クエリのセットと CSS スタイル ブロックを指定できます。文書に適用されます。サンプルコードは次のとおりです。
/*992 ピクセル以下の画面では、背景色を青に設定します*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*600 ピクセル以下の画面では、画面の背景色をオリーブに設定します */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @インポート
@import は、指定した外部スタイル ファイルをインポートし、ターゲットのメディア タイプを指定するために使用されます。サンプル コードは次のとおりです。
@importurl(css/screen.css)screen;/*外部スタイルを導入しています。このスタイルはコンピューターのモニターにのみ適用されます*/@importurl(css/print.css)print;/*外部スタイルを導入しています。このスタイルはコンピューターのモニターにのみ適用されます。印刷デバイスに適用*/body{background:#f5f5f5;line-height:1.2;}注: すべての @import ステートメントはスタイル シートの先頭に指定する必要があり、スタイル シートで定義されたスタイルは、インポートされた外部スタイル シートの競合するスタイルをオーバーライドします。
(3) メディア属性
<style>、<link>、<source> およびその他のタグのメディア属性でメディア クエリを定義することもできます。サンプル コードは次のとおりです。
/*ページ幅が 900 ピクセル以上の場合にこのスタイルを適用します*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*ページ幅が 900 ピクセル以上の場合にこのスタイルを適用します600 ピクセル以上*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
ヒント: 各メディア タイプをカンマで区切って、media 属性で複数のメディア タイプを指定することもできます (例: media=screen, print)。