ホーム プログラミング言語 Web関連 css3 CSS メディア クエリの包括的な分析 (@media)

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 演算子を使用する場合は、メディア タイプも指定する必要があります。
4. メディア クエリを定義する

現在、次の 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” のようにカンマで区切ります。

 

「 CSS メディア クエリの包括的な分析 (@media)」についてわかりやすく解説!絶対に観るべきベスト2動画

19. Media queries?
レスポンシブデザインって何?media query(メディアクエリ)のmax-widthとmin-widthの違いを理解して、スマホ対応しよう😁