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

Copy
1/* scan media featureを使用して、表示デバイスのスキャン方式に基づいてスタイルを適用するサンプルコードです。 */
2/* これは、特定の表示特性（プログレッシブスキャンまたはインターレーススキャン）を持つデバイス向けに */
3/* UIの表示を「拡張」（調整）する一例を示します。 */
4
5/* デフォルトスタイル: scan media featureがサポートされない場合、またはどちらの条件にもマッチしない場合に適用されます。 */
6.scan-indicator {
7  padding: 16px;
8  margin: 20px;
9  border-radius: 8px;
10  text-align: center;
11  font-family: Arial, sans-serif;
12  font-size: 1.1em;
13  background-color: #f0f0f0;
14  color: #555;
15  border: 2px solid #ccc;
16  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
17  transition: all 0.3s ease-in-out; /* スタイル変更がスムーズになるように */
18}
19
20/* デバイスがプログレッシブスキャン（逐次走査）方式の場合のスタイル */
21/* 多くの現代的なディスプレイ（PCモニター、スマートフォン、高画質テレビなど）はこの方式です。 */
22@media screen and (scan: progressive) {
23  .scan-indicator {
24    background-color: #e0ffe0; /* 薄い緑色の背景 */
25    color: #28a745; /* 緑色のテキスト */
26    border-color: #28a745;
27    font-weight: bold;
28  }
29}
30
31/* デバイスがインターレーススキャン（飛び越し走査）方式の場合のスタイル */
32/* 主に古いアナログテレビや特定のビデオ信号で使用される方式です。 */
33@media screen and (scan: interlace) {
34  .scan-indicator {
35    background-color: #ffe0e0; /* 薄い赤色の背景 */
36    color: #dc3545; /* 赤色のテキスト */
37    border-color: #dc3545;
38    text-decoration: underline;
39  }
40}

scanメディア特性は、Webサイトやアプリケーションの表示を、利用しているデバイスの「スキャン方式」に基づいて最適化するためにCSSスタイルを適用する機能です。スキャン方式とは、ディスプレイが画面に画像を描画する方法のことで、主に「プログレッシブスキャン（逐次走査）」と「インターレーススキャン（飛び越し走査）」の2種類があります。この特性を使うことで、特定の表示特性を持つデバイス向けにユーザーインターフェース（UI）の表示を細かく「拡張」（調整）できます。

このサンプルコードでは、.scan-indicatorという要素に対して、デバイスのスキャン方式に応じて異なるスタイルを適用しています。まず、scanメディア特性がサポートされない環境や、以下の条件に合致しない場合に適用されるデフォルトのスタイルが設定されています。

@media screen and (scan: progressive)のブロックは、デバイスがプログレッシブスキャン方式の場合に適用されるスタイルを定義しています。現代のPCモニター、スマートフォン、高画質なテレビなどの多くがこの方式を採用しており、より鮮明でちらつきの少ない画像表示が可能です。この条件では、要素の背景色や文字色が緑系統に変化します。

一方、@media screen and (scan: interlace)のブロックは、デバイスがインターレーススキャン方式の場合に適用されるスタイルを定義しています。これは主に、古いアナログテレビや特定のビデオ信号で使用されていた方式で、画質の劣化やちらつきが発生しやすい特徴があります。この条件では、要素の背景色や文字色が赤系統に変化し、テキストに下線が引かれます。

scanメディア特性自体は、特定の条件を問い合わせる機能であるため、引数を取ることも、直接的な戻り値を返すこともありません。

Copy
1/*
2 * CSS scan media featureのサンプルコード
3 *
4 * このコードは、表示デバイスが「プログレッシブスキャン方式（scan: progressive）」
5 * を使用している場合に、特定のスタイルを適用する方法を示しています。
6 * キーワード「pro」に関連して、progressiveスキャンに焦点を当てています。
7 *
8 * scan media featureは、主にテレビなどのディスプレイデバイスで、
9 * 表示方式（プログレッシブまたはインターレース）に応じてコンテンツの見た目を
10 * 最適化する際に利用されます。
11 *
12 * システムエンジニアを目指す初心者の方へ:
13 * media featureは、デバイスの特性（画面幅、解像度、表示方式など）に基づいて
14 * スタイルを動的に変更するための強力なツールであり、レスポンシブデザインの
15 * 一環として活用されます。
16 */
17
18/* ------------------------------------------- */
19/* デフォルトのスタイル（どのスキャン方式でも適用される基本スタイル） */
20/* ------------------------------------------- */
21body {
22  font-family: 'Segoe UI', Arial, sans-serif;
23  margin: 0;
24  padding: 20px;
25  background-color: #f0f0f0; /* 全般的な背景色 */
26  color: #333;
27  line-height: 1.6;
28}
29
30.content-wrapper {
31  max-width: 960px;
32  margin: 20px auto;
33  padding: 25px;
34  border: 1px solid #ccc;
35  border-radius: 8px;
36  background-color: #ffffff;
37  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
38}
39
40h1 {
41  color: #007bff;
42  text-align: center;
43  margin-bottom: 25px;
44}
45
46p {
47  font-size: 1em;
48  margin-bottom: 15px;
49}
50
51/* ----------------------------------------------------------------- */
52/* プログレッシブスキャン方式のデバイス向けスタイル（キーワード「pro」に特化） */
53/* ----------------------------------------------------------------- */
54@media screen and (scan: progressive) {
55  body {
56    background-color: #e6ffe6; /* プログレッシブデバイスでは明るい緑の背景 */
57    color: #222;
58  }
59
60  .content-wrapper {
61    border: 2px solid #28a745; /* 緑色で強調された枠線 */
62    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.2); /* 緑系の影 */
63  }
64
65  h1 {
66    color: #28a745; /* 見出し色も緑色に */
67    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
68  }
69
70  p {
71    font-size: 1.1em; /* プログレッシブデバイスではテキストを少し大きく */
72  }
73}
74
75/* ----------------------------------------------------------------- */
76/* インターレーススキャン方式のデバイス向けスタイル（参考として） */
77/* ----------------------------------------------------------------- */
78@media screen and (scan: interlace) {
79  body {
80    background-color: #ffe6e6; /* インターレースデバイスでは明るい赤の背景 */
81  }
82
83  .content-wrapper {
84    border: 2px solid #dc3545; /* 赤色で強調された枠線 */
85    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.2); /* 赤系の影 */
86  }
87
88  h1 {
89    color: #dc3545; /* 見出し色も赤色に */
90  }
91}

CSSのscanメディア特性は、Webコンテンツを表示するデバイスの「スキャン方式」に応じてスタイルを適用するために使用されます。この特性は、主にテレビなどのディスプレイデバイスが採用している、画面の描画方法（プログレッシブまたはインターレース）を判定する際に利用されます。scanメディア特性自体に引数や戻り値は設定されておらず、特定の表示方式を持つデバイスに対してスタイルを適用するかどうかを判断する条件として機能します。

提供されたサンプルコードでは、キーワード「pro」に関連する「scan: progressive」の利用方法が詳しく示されています。プログレッシブスキャン方式は、画像を上から下へ一気に描画する方式で、より滑らかで高品質な映像表現に適しています。このコードでは、@media screen and (scan: progressive)という記述により、デバイスがプログレッシブスキャン方式を採用していると判定された場合、bodyの背景色が明るい緑に、h1の文字色が緑に、そしてpの文字サイズが少し大きくなるといった、特定のスタイルが適用されるように記述されています。これにより、プログレッシブスキャン方式のデバイスでは、視覚的に最適化されたデザインを提供できます。

また、参考として「scan: interlace」の例も含まれており、こちらはインターレーススキャン方式のデバイスに異なるスタイル（明るい赤の背景や赤系の枠線）を適用する方法を示しています。インターレースは画像を交互に描画する方式です。

このようにscanのようなメディア特性を活用することで、システムエンジニアを目指す初心者の方も、デバイスの多様な特性（画面の幅だけでなく、表示方式のような詳細な特性）に応じた柔軟なレスポンシブデザインを実装できるようになります。これは、ユーザー体験の向上に大きく貢献します。