メディア機能でデバイスや設定に応答できるすべての方法の概要。
メディアクエリがなければ、レスポンシブ デザインは実現できません。メディアクエリが登場する前は、ユーザーがウェブサイトにアクセスするために使用しているデバイスの種類を把握する方法はありませんでした。デザイナーは仮定を立てる必要がありました。こうした前提は、固定幅のデザインやリキッド レイアウトにエンコードされていました。
メディアクエリの導入により、状況は一変しました。デザイナーは初めて、ユーザーのニーズに応えることができるようになりました。デザイナーは、ユーザーのデバイスに合わせてレイアウトを調整できます。
メディアクエリは、オプションのメディアタイプと必須のメディア機能で構成されます。メディアの種類は長年にわたってほとんど変わっていません。指定可能な値は引き続き 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
です。
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
モバイル デバイスの向きを示すために「縦向き」と「横向き」という用語がよく使用されますが、orientation
メディア機能はデバイスに固有のものではありません。一般的なノートパソコンの全画面表示のブラウザ ウィンドウでは、orientation
の値は landscape
になります。
ディスプレイ
ディスプレイによってピクセル密度が異なります。ピクセル密度は dpi
(インチあたりのドット数)で測定されます。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
のいずれかの値を報告します。
update
値が none
の場合、更新レートはありません。たとえば、印刷されたページは更新できません。
update
値が slow
の場合、ディスプレイを高速に更新できないことを意味します。リフレッシュ レートが遅い画面の例として、電子ペーパー ディスプレイがあります。
update
の値が fast
の場合、ディスプレイはアニメーションと遷移を処理できるほど高速に更新されます。
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
ディスプレイのすべての要素がハードウェアの機能に関連しているわけではありません。テーマ設定に関するモジュールでは、ウェブアプリ マニフェスト ファイルでプロパティを定義する方法について説明しました。これらのプロパティの 1 つは 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
)も報告できます。詳細については、インタラクションに関するモジュールをご覧ください。
設定
ユーザーの設定に応答できるさまざまなメディアクエリ(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)