【CSS Modules】resolutionメディア機能の使い方

Copy
1/*
2 * resolutionメディア特性のサンプルコード。
3 * デバイスのピクセル密度（解像度）に応じてスタイルを適用します。
4 */
5
6/* 標準的な解像度 (例: 1dppx 未満) のデバイス向けスタイル */
7body {
8  background-color: lightblue; /* 背景色を水色に設定 */
9  color: black; /* テキストの色を黒に設定 */
10  font-family: sans-serif;
11  padding: 20px;
12}
13
14/* 高解像度ディスプレイ (例: 2dppx 以上) のデバイス向けスタイル */
15/* 2dppx (dots per pixel) は一般的な高解像度ディスプレイの基準値です。 */
16@media (min-resolution: 2dppx) {
17  body {
18    background-color: darkred; /* 背景色を濃い赤色に変更 */
19    color: white; /* テキストの色を白に変更 */
20  }
21}

このサンプルコードは、CSSのresolutionメディア特性を活用し、デバイスの画面解像度（ピクセル密度）に応じてウェブページの表示スタイルを切り替える方法を示しています。resolutionは、デバイスがどれくらいの細かさで画像を表現できるかを示すもので、主に高解像度ディスプレイへの対応に利用されます。

まず、コードの冒頭では、標準的な解像度のデバイス向けに、body要素の背景色を水色に、テキストの色を黒に設定しています。これは、特定の解像度に関する条件が適用されない場合の基本的なスタイルです。

次に登場する@media (min-resolution: 2dppx)は、「最小解像度が2dppx以上のデバイス」という条件を表すメディアクエリです。ここで使われているdppxは「dots per pixel」の略で、1CSSピクセルに対してデバイスが持つ物理ピクセルの数を意味します。この数値が高いほど、画面の表示がより精細であることを示します。この条件に合致する、例えばRetinaディスプレイなどの高解像度ディスプレイを持つデバイスでは、body要素の背景色が濃い赤色に、テキストの色が白色に変更されます。

resolutionメディア特性自体は、直接的な引数を取ったり、値を返したりするものではありません。その代わりに、min-resolutionやmax-resolutionといった形でメディアクエリの条件式として利用され、デバイスの解像度に応じて適用するCSSスタイルを制御します。これにより、様々なディスプレイ環境において、ウェブサイトの見た目を最適化し、視覚的に優れたユーザー体験を提供することが可能になります。