メディア機能でデバイスと設定に応答する方法のまとめ。
レスポンシブ デザインは、メディアクエリなしでは実現できません。メディアクエリが登場する前は、ユーザーがどのようなデバイスでウェブサイトにアクセスしたかを知る手段がありませんでした。設計者は推測を行う必要がありました。こうした前提は、固定幅のデザインやリキッド レイアウトにエンコードされていました。
この状況は、メディアクエリの導入によって変わりました。デザイナーが初めて、中間地点で人々と出会うことができました。デザイナーは、ユーザーのデバイスに合わせてレイアウトを調整できます。
メディアクエリは、オプションのメディアタイプと必須のメディア機能で構成されています。メディアの種類は、ここ数年大きな変化はありません。指定可能な値は次の 4 つだけです。
@media all
@media screen
@media print
@media speech
一方、メディア機能が大幅に拡張されました。デザイナーは、画面サイズだけでなく、はるかに大きなサイズに合うようにデザインを適応させて、半分を超えてユーザーに対応できるようになりました。
ビューポートのサイズ
ウェブで最も人気のあるメディアクエリは、ビューポートの幅を扱うクエリです。ここでも選択肢が提示されます。max-width メディア フィーチャーを使用すると、特定の幅より小さいスタイルを適用できます。また、min-width メディア フィーチャーを使用すると、特定の幅を超えるスタイルを適用できます。
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
個人的には min-width が好きです。レイアウト スタイルは加算的な方法で適用しています。以前のルールを元に戻す代わりに、ブレークポイントごとに新しいレイアウト ルールを導入します。
この足し算のアプローチは、高さに対しても有効です。min-height を使用すると、利用可能なビューポートの高さが増えたときに、より多くのルールを導入できます。たとえば、縦方向に十分なスペースがあるときに、ブラウザ ウィンドウの上部に固定するヘッダー要素があるとします。
@media (min-height: 30em) {
header {
position: fixed;
}
}
ただし、必要に応じて max-height メディア機能を使用できます。この例では、ヘッダーはデフォルトで固定されていますが、垂直方向に十分なスペースがないと、固定が解除されます。
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
min- プレフィックスと max- プレフィックスのどちらを選択するかは、width と height だけに適用されるわけではありません。aspect-ratio メディア機能にも、同じ選択肢があります。幅と高さの正確な比率でスタイルを適用する場合は、プレフィックスのないバージョンも用意されています。
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
アスペクト比ごとに異なるスタイルを使用すると、手に負えなくなります。それほどきめ細かい制御が不要な場合は、orientation メディア機能を使用した方が適している可能性があります。指定できる値は portrait または landscape の 2 つです。
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
「縦向き」と「横向き」という用語は、モバイル デバイスの向きを指す場合がよく使用されますが、orientation メディア機能はデバイス固有のものではありません。一般的なノートパソコンの全画面ブラウザ ウィンドウの orientation の値は landscape です。
ディスプレイ
ディスプレイごとにピクセル密度は異なります（単位は dpi）。1 インチあたりのドット数。resolution メディア対象物を使用すると、さまざまなピクセル密度に合わせてスタイルを調整できます。aspect-ratio と同様に、resolution には最小、最大、正確な 3 種類があります。
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
resolution メディアクエリを使用する必要はないかもしれません。通常、ピクセル密度が問題となるのは画像のみであり、レスポンシブ画像はピクセル密度を HTML で直接処理する方法です。
一方、CSS ではアニメーションと遷移を定義します。update メディア機能を使用すると、これらのアニメーションや遷移を調整して、さまざまなリフレッシュ レートに対応できます。このメディア特徴は、none、slow、fast の 3 つの値のいずれかをレポートします。
update の値が none の場合は、リフレッシュ レートがないことを意味します。たとえば、印刷されたページは更新できません。
update の値が slow の場合は、ディスプレイをすばやく更新できないことを意味します。リフレッシュ レートが遅い画面の一例として、電子インク ディスプレイがあります。
update の値が fast の場合は、アニメーションと遷移を処理できるだけの速さでディスプレイが更新されることを意味します。
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
ディスプレイのすべての側面がハードウェア機能に関連しているわけではありません。テーマ設定に関するモジュールでは、ウェブアプリ マニフェスト ファイルでプロパティを定義する方法を説明しました。これらのプロパティの一つは display と呼ばれ、fullscreen、standalone、minimum-ui、または browser の値を指定できます。対応する display-mode メディア対象物を使用すると、これらのさまざまなオプションのスタイルをカスタマイズできます。
ウェブアプリ マニフェストで display 値として standalone を指定したとします。誰かがホーム画面にサイトを追加すると、サイトはブラウザ インターフェースなしで起動します。そのようなユーザーに対して [戻る] ボタンを表示するとよいでしょう。
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
色
デバイスのカラー機能を照会するためのメディア機能は数多くあります。グレーのシェードのみを出力するディスプレイのスタイルを調整する場合は、値を指定せずに monochrome メディア機能を使用します。
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
対応する color メディア対象物があります。
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
カラー画面の場合、メディア機能 color-gamut、color-index、dynamic-range を使用してクエリを作成できます。これらはすべて、画面のカラー機能に関する具体的な詳細を報告します。
この例では、ディスプレイの最大輝度、色深度、コントラスト比の組み合わせをレポートする dynamic-range メディア対象物に応じて、色の値が更新されます。指定できる値は standard または high です。dynamic-range の値が high であるとレポートする高解像度画面には、新しい CSS color() 関数を使用して異なる色空間を指定します。
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
インタラクション
メディア機能は、サイトの操作に使用された入力メカニズムの種類（hover、any-hover、pointer、any-pointer）をレポートすることもできます。詳しくは、インタラクションに関するモジュールをご覧ください。
Preferences
ユーザー設定に応答できるさまざまなメディアクエリ（prefers-color-scheme、prefers-contrast、prefers-reduced-motion）があります。詳しくは、テーマ設定とユーザー補助に関するモジュールをご覧ください。
1 つのメディアクエリでメディア機能を組み合わせることができます。デバイスのリフレッシュ レートが高速で、ユーザーがモーションの軽減を望まない場合にのみ、アニメーション スタイルの範囲を設定できます。
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
その他のメディア機能
今後、さらに多くのメディア機能が追加される予定です。
メディア機能 forced-colors と inverted-colors は、デバイスで使用されているカラーパレットが制限付きか反転かを報告します。
scripting メディア機能を使用すると、JavaScript の可用性に基づいて CSS を調整できます。
prefers-reduced-data というメディア機能では、ユーザーが従量制接続であることを指定できるため、送信するアセットのサイズを小さくしたり、減らしたりできます。
他の提案は現在作成中です。次の最後のモジュールでは、さまざまな画面構成を処理するメディア機能の提案について学習します。
理解度をチェックする
メディア機能の理解度チェック
メディアクエリでは、@media (width: 1024px) のような特定の幅のデバイスを確認できますか？
1023px を超える幅と 1025px 未満の幅を同時にチェックする必要があります。min-width と max-width です。メディアクエリでは、@media (aspect-ratio: 4/3) などの特定の aspect-ratio にあるデバイスを確認できますか？
aspect-ratio に存在します。有効なカラーメディアクエリはどれですか。
@media (color)@media (monochrome)@media (color-gamut: srgb)@media (min-color-index: 15000)@media (dynamic-range: high)次のうち、ユーザー設定のメディアクエリとして有効なものはどれですか。
@media (prefers-color-scheme: dark)@media (prefers-colors: high-definition)@media (prefers-reduced-motion: reduce)@media (prefers-contrast: more)@media (prefers-site-speed: fast)