メディア機能でデバイスやそれに対応する方法のまとめ 設定。
レスポンシブ デザインは、メディアクエリなしでは実現できません。メディアクエリが登場する前は、ユーザーがどのようなデバイスでウェブサイトにアクセスしているかを把握する手段はありませんでした。デザイナーは仮説を立てる必要がありました。これらの前提条件は、固定幅のデザインまたはリキッド レイアウトにエンコードされています。
メディアクエリの導入によって、このすべてが変わりました。デザイナーが途中で人々と初めて会うことができました。デザイナーは、ユーザーのデバイスに合わせてレイアウトを調整できます。
メディアクエリは、オプションのメディアタイプと必須のメディア機能で構成されます。ここ数年でメディアの種類は大きく変化していません。有効な値は次の 4 つです。
@media all
@media screen
@media print
@media speech
一方、メディア機能は大幅に拡張されています。デザイナーは、単なる画面サイズ以上のものにフィットするようにデザインを調整し、半分を超えてユーザーに対応できるようになりました。
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
ビューポートの寸法
ウェブ上で圧倒的に多いメディアクエリは、ビューポートの幅を扱うものです。しかし、ここでも選択肢が提示されます。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.
}
「ポートレート」という言葉は「landscape」をほとんどの場合、モバイル デバイスの向きを示すために使用されます。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%);
}
}
ディスプレイのすべての機能がハードウェアに関連するわけではありません。テーマ設定に関するモジュールでは、ウェブアプリ マニフェスト ファイルでプロパティを定義する方法を学習しました。これらのプロパティの 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)
のような特定の幅のデバイスをチェックできますか?
メディアクエリで、@media (aspect-ratio: 4/3)
のような特定の aspect-ratio
にあるデバイスを確認できますか?
有効なカラーメディアクエリはどれですか。
@media (monochrome)
@media (color)
@media (color-gamut: srgb)
@media (dynamic-range: high)
@media (min-color-index: 15000)
次のユーザー設定のメディアクエリのうち、有効なものはどれですか。
@media (prefers-reduced-motion: reduce)
@media (prefers-color-scheme: dark)
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)
@media (prefers-colors: high-definition)