【CSS Modules】display-modeメディア機能の使い方

Copy
1/*
2 * display-mode メディアクエリは、Webアプリケーションが
3 * どのような表示モードで開かれているかに応じて、異なるスタイルを適用するために使用されます。
4 * 例えば、通常のブラウザタブで表示されているか、
5 * プログレッシブウェブアプリ (PWA) としてスタンドアロンウィンドウで表示されているかなどを判定できます。
6 */
7
8/*
9 * すべての表示モードに適用される基本スタイル。
10 * ここでは、背景色とテキスト色、フォントを設定しています。
11 */
12body {
13  font-family: sans-serif;
14  margin: 0;
15  padding: 20px;
16  background-color: #f0f0f0; /* デフォルトの背景色 */
17  color: #333; /* デフォルトの文字色 */
18  text-align: center;
19  transition: background-color 0.3s ease, color 0.3s ease; /* スムーズな色変化 */
20}
21
22/* 表示モードを示すテキストを疑似要素で追加 */
23body::before {
24  content: "現在の表示モード: デフォルト";
25  display: block;
26  font-size: 1.5em;
27  margin-bottom: 20px;
28  font-weight: bold;
29}
30
31/*
32 * @media (display-mode: browser)
33 * アプリケーションが通常のWebブラウザのタブで表示されている場合に適用されます。
34 */
35@media (display-mode: browser) {
36  body {
37    background-color: #e0f7fa; /* ブラウザモード用の背景色 */
38    color: #00796b; /* ブラウザモード用の文字色 */
39  }
40  body::before {
41    content: "現在の表示モード: ブラウザ (通常のWebブラウザタブ)";
42  }
43}
44
45/*
46 * @media (display-mode: standalone)
47 * アプリケーションがスタンドアロンモードで表示されている場合に適用されます。
48 * これは、PWAとしてインストールされ、ブラウザのUI（アドレスバーなど）なしで
49 * 独立したウィンドウで開かれている場合によく見られます。
50 */
51@media (display-mode: standalone) {
52  body {
53    background-color: #e8f5e9; /* スタンドアロンモード用の背景色 */
54    color: #2e7d32; /* スタンドアロンモード用の文字色 */
55  }
56  body::before {
57    content: "現在の表示モード: スタンドアロン (PWA)";
58  }
59}
60
61/*
62 * @media (display-mode: minimal-ui)
63 * アプリケーションが最小限のブラウザUI（例: アドレスバーのみ）と共に
64 * スタンドアロンウィンドウで表示されている場合に適用されます。
65 */
66@media (display-mode: minimal-ui) {
67  body {
68    background-color: #fffde7; /* 最小UIモード用の背景色 */
69    color: #fbc02d; /* 最小UIモード用の文字色 */
70  }
71  body::before {
72    content: "現在の表示モード: 最小UI (PWA)";
73  }
74}
75
76/*
77 * @media (display-mode: fullscreen)
78 * アプリケーションがフルスクリーンモードで表示されている場合に適用されます。
79 */
80@media (display-mode: fullscreen) {
81  body {
82    background-color: #ffebee; /* フルスクリーンモード用の背景色 */
83    color: #d32f2f; /* フルスクリーンモード用の文字色 */
84  }
85  body::before {
86    content: "現在の表示モード: フルスクリーン";
87  }
88}
89
90/*
91 * @media (display-mode: picture-in-picture)
92 * アプリケーションがピクチャーインピクチャーモードで表示されている場合に適用されます。
93 */
94@media (display-mode: picture-in-picture) {
95  body {
96    background-color: #e1f5fe; /* ピクチャーインピクチャーモード用の背景色 */
97    color: #0288d1; /* ピクチャーインピクチャーモード用の文字色 */
98  }
99  body::before {
100    content: "現在の表示モード: ピクチャーインピクチャー";
101  }
102}

CSSのdisplay-modeは、Webアプリケーションがどのような表示モードで開かれているかに応じて、異なるスタイルを適用するためのメディアクエリ機能です。この機能は、主にプログレッシブウェブアプリ（PWA）において、アプリケーションが通常のWebブラウザのタブで開かれているのか、それともアドレスバーなどのブラウザUIを持たない独立したウィンドウ（スタンドアロンモード）で開かれているのかなどを判別し、表示を最適化するために使用されます。

この機能は引数を必要とせず、また特定の値を戻すこともありません。@media (display-mode: <値>)という形式で記述し、指定された表示モードのときに限り、そのブロック内のスタイルが適用されます。例えば、browserは通常のブラウザ表示、standaloneはPWAのような独立したウィンドウ表示、minimal-uiは最小限のブラウザUIを持つウィンドウ表示、fullscreenは全画面表示、picture-in-pictureはピクチャーインピクチャーモードをそれぞれ表します。

サンプルコードでは、これらの異なるdisplay-modeの値に応じて、ウェブページの背景色や文字色、さらには表示モードを示すテキストを動的に変更する例を示しています。これにより、ユーザーがどの表示モードでアプリを使用しているかに応じて、視覚的なフィードバックを提供し、より適切なユーザーインターフェースを提供することが可能になります。

Copy
1/*
2 * Progressive Web App (PWA) がスタンドアロンモードで起動した際に適用されるスタイルを定義します。
3 * display-mode: standalone は、PWAがブラウザのUI（URLバーやタブなど）なしで、
4 * ホーム画面から起動された独立したアプリケーションのように表示されている状態を指します。
5 */
6@media all and (display-mode: standalone) {
7  /*
8   * スタンドアロンモードの時に、ページ全体の背景色をライトブルーに変更します。
9   * これにより、アプリが独立した状態であることが視覚的に分かりやすくなります。
10   */
11  body {
12    background-color: #e0f7fa; /* ライトブルー */
13  }
14
15  /*
16   * .standalone-message クラスを持つ要素をスタンドアロンモードでのみ表示します。
17   * 例えば、「アプリ版をご覧いただきありがとうございます」のようなメッセージを表示するのに使えます。
18   * デフォルトでは非表示にしておき、このモードで表示に切り替えます。
19   */
20  .standalone-message {
21    display: block; /* 要素を表示 */
22    color: #00796b;
23    font-weight: bold;
24    text-align: center;
25    padding: 10px;
26    margin-top: 20px;
27  }
28
29  /*
30   * .browser-only-header クラスを持つ要素をスタンドアロンモードでは非表示にします。
31   * これは、通常のブラウザ表示時にのみ必要なヘッダー要素（例えば、ブラウザのナビゲーションと重複する部分）
32   * を、スタンドアロンアプリでは隠す場合に便利です。
33   */
34  .browser-only-header {
35    display: none; /* 要素を非表示 */
36  }
37}
38
39/*
40 * 以下は、通常のブラウザ表示時（display-mode: browser など）に適用されるデフォルトスタイルです。
41 * 上記の @media ルールがない場合に適用されます。
42 */
43
44/*
45 * .standalone-message はデフォルトで非表示にしておき、
46 * スタンドアロンモードでのみ表示されるように設定します。
47 */
48.standalone-message {
49  display: none; /* デフォルトでは非表示 */
50}
51
52/*
53 * .browser-only-header はデフォルトで表示しておき、
54 * スタンドアロンモードでのみ非表示になるように設定します。
55 */
56.browser-only-header {
57  display: block; /* デフォルトでは表示 */
58  background-color: #f0f0f0;
59  padding: 15px;
60  text-align: center;
61  border-bottom: 1px solid #ccc;
62}

このCSSコードは、display-modeというメディア特性（media feature）を利用して、ウェブアプリケーションの表示モードに応じたスタイルを適用する方法を示しています。特に、Progressive Web App (PWA) が独立したアプリケーションとして動作する「スタンドアロンモード」で、特別なデザインを適用する際に使用されます。

display-modeは、ウェブコンテンツがどのような表示環境で閲覧されているかを判別するためのCSSメディア機能です。この機能には引数や戻り値がなく、特定のキーワードと組み合わせて使用します。サンプルコードでは(display-mode: standalone)という条件が指定されており、これはPWAがブラウザのインターフェース（アドレスバーやタブなど）なしに、まるでネイティブアプリケーションのように独立して起動している状態を指します。

@media all and (display-mode: standalone)ブロック内のスタイルは、PWAがスタンドアロンモードで起動したときにのみ適用されます。例えば、bodyのbackground-colorをライトブルーに設定することで、ユーザーはアプリが独立したモードで動作していることを視覚的に認識できます。また、.standalone-messageクラスの要素は、このモードでのみdisplay: blockで表示され、「アプリ版専用のメッセージ」などを表現できます。一方で、通常のブラウザ表示時に必要な.browser-only-headerのような要素は、スタンドアロンモードではdisplay: noneで非表示にすることが可能です。

これらの設定により、同じウェブコンテンツでありながら、ブラウザで閲覧しているときと、独立したPWAとして利用しているときとで、ユーザーインターフェースを最適化し、異なる体験を提供できます。