CSS辞典使えるメディアタイプとメディアクエリの種類

CSSを出力デバイス別に指定するには「メディアタイプ」を指定します。また、CSS3からはデバイスの種類をより具体的に指定できる「メディアクエリ」が定義されました。

メディアクエリとは

メディアクエリとは、デバイスの幅に応じてCSSを変えるレスポンシブデザインで使用されます。レスポンシブデザインを使用するには、Viewportも定義する必要があります。

 <meta name=”viewport” content=”width=device-width, initial-scale=1″>

@media (min-width: 768px) { ... }

スマホ、タブレット、PCなどの複数デバイスに対応させる場合は、複数のメディアクエリを記述します。

<link href="tv.css" rel="stylesheet" type="text/css" media="tv">
<link href="print.css" rel="stylesheet" type="text/css" media="print">

@media screen and (min-width:480px) {
    /*　画面サイズが480pxからはここを読み込む　*/
　　p { color:#fff;}
}

複数の条件を定義したい場合、論理演算子を使用します。論理演算子は、メディアタイプとメディア種類の間に記述します。複数のメディア種類を連結することができ、「かつ」という意味になります。

andキーワードは、複数のメディアタイプやメディア種類を組み合わせます。以下の例では、1000px以上の画面のあるデバイスに対し適用されることを意味します。

@media screen and (min-width: 1000px) { CSSを記述 }

カンマを使うと端末が指定された、いずれかの条件にマッチするときに適用されます。複数のクエリを連結することができ、「または」という意味になります。

以下の例では、ビューポートの横幅が450px以内、または縦長のデバイスが対象を意味します。


media=”(max-width: 480px), (orientation: portrait)”

notは、その条件に一致しないデバイスを対象にします。メディア種類の前にnotキーワードを付ければ、否定となります。以下の例では、ビューポートの横幅が480px以内ではないデバイスに適用を意味します。

media=”not all and (max-width: 480px)”

onlyは、指定した条件に対応していないデバイスを対象外にすることができます。古いブラウザで適用されるのを防止することが目的であり、最近のブラウザで適用されることはありません。以下の例では、対応しているブラウザならonlyは無視されて、それ以降のメディアクエリが処理されます。

media=”only screen and (min-width: 480px)”

メディアクエリの種類とは、画面の高さや幅を指定する条件のことです。レスポンシブデザインを導入する

キーワード	解説
width	ディスプレイの幅。max-、min-の接頭辞で上限・下限を指定可
height	ディスプレイの高さ。max-、min-の接頭辞で上限・下限を指定可
device-width	表示領域の幅。max-、min-の接頭辞で上限・下限を指定可
device-height	表示領域の高さ。max-、min-の接頭辞で上限・下限を指定可
orientation	デバイスの向き。値は縦向きがportrait、横向きがlandscape
aspect-ratio	ディスプレイの縦横比。max-、min-の接頭辞で上限・下限を指定可
device-aspect-ratio	表示領域の縦横比。max-、min-の接頭辞で上限・下限を指定可
color	カラーディスプレイの色のビット数。max-、min-の接頭辞で上限・下限を指定可
color-index	カラールックアップテーブルの数。max-、min-の接頭辞で上限・下限を指定可
monochrome	白黒ディスプレイのビット数。カラーディスプレイの場合は「0」。max-、min-の接頭辞で上限・下限を指定可
resolution	ディスプレイの解像度。max-、min-の接頭辞で上限・下限を指定可
scan	メディアタイプがtvの場合の画面の走査方法。値はprogressive、またはinterlace。
grid	ディスプレイの表示方法。メディアタイプがttyの場合は「1」。それ以外は「0」

link要素でCSSを読み込むとき、メディアタイプがモバイルデバイス（handheld）及びディスプレイ（screen）でディスプレイの幅が10em以下の場合に、指定したスタイルを読み込みます。

<link rel="stylesheet" media="handheld and (min-width: 10em),screen and (min-width: 10em)">

カテゴリー:CSS辞典WEB