メディア機能でデバイスと設定に応答する方法のまとめ。
レスポンシブ デザインは、メディアクエリなしでは実現できません。メディアクエリが登場する前は、ユーザーがどのようなデバイスでウェブサイトにアクセスしたかを知る手段がありませんでした。設計者は推測を行う必要がありました。こうした前提は、固定幅のデザインやリキッド レイアウトにエンコードされていました。
この状況は、メディアクエリの導入によって変わりました。デザイナーが初めて、中間地点で人々と出会うことができました。デザイナーは、ユーザーのデバイスに合わせてレイアウトを調整できます。
メディアクエリは、オプションのメディアタイプと必須のメディア機能で構成されています。メディアの種類は、ここ数年大きな変化はありません。指定可能な値は次の 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)