【CSS Modules】device-postureメディア機能の使い方

Copy
1/* デバイスの姿勢が「折りたたまれた」状態のスタイル */
2@media (device-posture: folded) {
3  .responsive-element {
4    font-size: 1.2em;
5    background-color: #e0f2f7; /* 薄い青 */
6    padding: 10px;
7    border: 1px solid #a7d9ed;
8  }
9}
10
11/* デバイスの姿勢が「平らな」状態のスタイル */
12@media (device-posture: flat) {
13  .responsive-element {
14    font-size: 1.5em;
15    background-color: #e6f7e9; /* 薄い緑 */
16    padding: 20px;
17    border: 1px solid #a6e3b8;
18  }
19}
20
21/* ビューポート幅が768px以上の場合のスタイル */
22/* (従来のdevice-widthの推奨される代替方法です) */
23@media (min-width: 768px) {
24  .responsive-element {
25    max-width: 960px;
26    margin: 0 auto;
27    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
28  }
29}

device-postureは、CSSのメディア特性の一つで、デバイスの物理的な姿勢に応じてスタイルを適用します。例えば、折りたたみスマートフォンのように、「折りたたまれた」状態か「平らな」状態かといった情報に基づきデザインを調整可能です。引数はなく、デバイスの姿勢が合致した場合にスタイルが適用されます。特定の値を返す戻り値の概念はありません。

サンプルコードでは、まず@media (device-posture: folded)により、デバイスが折りたたまれた姿勢の場合に、.responsive-elementクラスのフォントサイズや背景色、パディングなどを調整しています。これは、狭い画面での視認性向上を図るものです。続いて@media (device-posture: flat)では、デバイスが完全に開いて平らな姿勢の場合に、より大きなフォントサイズやパディング、異なる背景色を適用し、広い画面に合わせた表示を実現しています。

また、最後の@media (min-width: 768px)は、ビューポートの幅が768ピクセル以上の場合にスタイルを適用する例です。これは、従来のdevice-widthが特定のデバイスの物理的な幅に依存しすぎたため、現在ではビューポートの幅を基準とするmin-widthやmax-widthがレスポンシブデザインの標準的な手法として推奨されています。このように、device-postureとmin-widthなどの特性を組み合わせることで、デバイスの多様な状態や画面サイズにきめ細かく対応したウェブサイトを構築できます。

Copy
1/* デバイスの物理的な姿勢（例：折りたたみスマートフォンの開閉状態）に基づき、
2 * 異なるスタイルを適用するdevice-postureメディア特性のサンプルです。
3 * CSS Device Adaptationの基本を理解するのに役立ちます。 */
4
5/* --- デフォルトスタイル --- */
6/* device-postureがサポートされないデバイスや、特定の姿勢に属さない場合に適用されます。 */
7.app-container {
8  max-width: 600px;
9  margin: 20px auto;
10  padding: 20px;
11  border: 1px solid #ddd;
12  text-align: center;
13  font-family: sans-serif;
14  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
15}
16
17.folded-view-message {
18  display: none; /* デフォルトでは非表示 */
19  color: #c0392b; /* 赤色 */
20  font-weight: bold;
21}
22
23.unfolded-view-message {
24  display: block; /* デフォルトでは表示 */
25  color: #27ae60; /* 緑色 */
26  font-weight: bold;
27}
28
29.content-area {
30  margin-top: 15px;
31  padding: 15px;
32  background-color: #f9f9f9;
33  border: 1px dashed #ccc;
34  min-height: 80px;
35}
36
37/* --- デバイスが「折りたたまれた」状態の場合 --- */
38/* 例：折りたたみスマートフォンの画面が閉じている状態に適用されます。 */
39@media (device-posture: folded) {
40  .app-container {
41    background-color: #ffebee; /* 赤系の薄い背景 */
42    border-color: #e74c3c;     /* 赤系のボーダー */
43    font-size: 0.9em;          /* フォントサイズを小さく */
44  }
45
46  .folded-view-message {
47    display: block;            /* 折りたたまれたら表示 */
48  }
49
50  .unfolded-view-message {
51    display: none;             /* 折りたたまれたら非表示 */
52  }
53
54  .content-area {
55    padding: 10px;
56    font-size: 0.8em;          /* コンテンツエリアのフォントも小さく */
57  }
58}
59
60/* --- デバイスが「展開された」状態の場合 --- */
61/* 例：折りたたみスマートフォンの画面が開いている状態に適用されます。 */
62@media (device-posture: unfolded) {
63  .app-container {
64    background-color: #e8f5e9; /* 緑系の薄い背景 */
65    border-color: #2ecc71;     /* 緑系のボーダー */
66    font-size: 1.1em;          /* フォントサイズを大きく */
67  }
68
69  .folded-view-message {
70    display: none;             /* 展開されたら非表示 */
71  }
72
73  .unfolded-view-message {
74    display: block;            /* 展開されたら表示 */
75  }
76
77  .content-area {
78    padding: 20px;
79    font-size: 1em;            /* コンテンツエリアのフォントを通常に */
80  }
81}

このCSSサンプルコードは、CSS Modulesのメディア特性であるdevice-postureの使用例を示しています。device-postureは引数を取らず、戻り値もありません。これはデバイスの物理的な姿勢、例えば折りたたみスマートフォンの開閉状態を検知し、その状態に応じて異なるスタイルを適用するための機能です。CSS Device Adaptationの一部として、多様なデバイスにおけるユーザー体験を向上させるために活用されます。

サンプルコードでは、.app-containerなどの要素に対してまずデフォルトのスタイルを設定しています。そして、@media (device-posture: folded)と記述することで、デバイスが「折りたたまれた」状態の場合に適用されるスタイルを定義しています。この状態では、背景色が赤系に変わり、フォントサイズが小さくなり、「折りたたまれた画面のメッセージ」が表示されるようになります。

一方、@media (device-posture: unfolded)では、デバイスが「展開された」状態の場合のスタイルが定義されています。この際には、背景色が緑系になり、フォントサイズが大きくなり、「展開された画面のメッセージ」が表示されるようになります。このようにdevice-postureを使用すると、最新の折りたたみデバイスなど、物理的な状態が変化するデバイスに対して、それぞれの状態に最適化されたユーザーインターフェースを提供することが可能になります。システムエンジニアの皆さんにとって、多様なデバイス環境への対応を考える上で重要な概念です。