CSS @ mediaルール
例
ブラウザウィンドウの幅が600ピクセル以下の場合は、<body>要素の背景色を「ライトブルー」に変更します。
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
この@media
ルールは、メディアクエリで使用され、さまざまなメディアタイプ/デバイスにさまざまなスタイルを適用します。
メディアクエリは、次のような多くのことをチェックするために使用できます。
- ビューポートの幅と高さ
- デバイスの幅と高さ
- 向き(タブレット/電話は横向きまたは縦向きモードですか?)
- 解決
メディアクエリの使用は、デスクトップ、ラップトップ、タブレット、および携帯電話に合わせたスタイルシート(レスポンシブWebデザイン)を配信するための一般的な手法です。
メディアクエリを使用して、特定のスタイルが印刷されたドキュメントまたはスクリーンリーダー(メディアタイプ:印刷、画面、または音声)専用であることを指定することもできます。
メディアタイプに加えて、メディア機能もあります。メディア機能は、ユーザーエージェントまたはディスプレイデバイスの特定の機能をテストできるようにすることで、メディアクエリにさらに具体的な詳細を提供します。たとえば、特定の幅よりも大きい、または小さい画面にのみスタイルを適用できます。
ブラウザのサポート
表の数字は、@ mediaルールを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS構文
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
not、only、andキーワードの意味:
not: notキーワードは、メディアクエリ全体の意味を反転させます。
only: onlyキーワードは、メディア機能を備えたメディアクエリをサポートしていない古いブラウザが指定されたスタイルを適用するのを防ぎます。 最新のブラウザには影響しません。
および: andキーワードは、メディア機能をメディアタイプまたは他のメディア機能と組み合わせます。
それらはすべてオプションです。ただし、を使用しない、または使用する場合 は、メディアタイプも指定する必要があります。
次のように、メディアごとに異なるスタイルシートを作成することもできます。
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
メディアタイプ
Value | Description |
---|---|
all | Default. Used for all media type devices |
Used for printers | |
screen | Used for computer screens, tablets, smart-phones etc. |
speech | Used for screenreaders that "reads" the page out loud |
メディア機能
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
その他の例
例
ブラウザの幅が600px以下の場合、要素を非表示にします。
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
例
メディアクエリを使用して、ビューポートの幅が800ピクセル以上の場合は背景色をラベンダー色に設定し、ビューポートの幅が400〜799ピクセルの場合はライトグリーンに設定します。ビューポートが400ピクセルよりも小さい場合、背景色は水色です。
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
例
レスポンシブナビゲーションメニューを作成します(大画面では水平方向に表示され、小画面では垂直方向に表示されます)。
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
例
メディアクエリを使用して、レスポンシブな列レイアウトを作成します。
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
例
メディアクエリを使用して、レスポンシブWebサイトを作成します。
例
メディアクエリを使用して、ブラウザの向きに応じてページのレイアウトを変更することもできます。ブラウザウィンドウがその高さよりも広い場合にのみ適用されるCSSプロパティのセット、いわゆる「横向き」の向きを設定できます。
向きが横向きモードの場合は、水色の背景色を使用します。
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
例
メディアクエリを使用して、ドキュメントが画面に表示されているときはテキストの色を緑に設定し、印刷されているときは黒に設定します。
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
例
カンマ区切りリスト:カンマを使用して、既存のメディアクエリにメディアクエリを追加します(これはOR演算子のように動作します):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
関連ページ
CSSチュートリアル:CSSメディアクエリ
CSSチュートリアル:CSSメディアクエリの例
RWDチュートリアル:メディアクエリを使用したレスポンシブWebデザイン
JavaScriptチュートリアル:window.matchMedia()メソッド