【CSS Modules】horizontal-viewport-segmentsメディア機能の使い方

Copy
1/*
2 * horizontal-viewport-segments:
3 * ビューポートが水平方向に分割されている場合に、そのセグメント数をクエリするメディア特性です。
4 * 主に折りたたみ式デバイスやマルチスクリーン環境で、コンテンツのレイアウトを調整するために使用されます。
5 */
6
7/*
8 * 通常の（単一セグメントの）ビューポートでの基本的なスタイル。
9 * ここではコンテンツを中央に配置するシンプルなレイアウトを定義します。
10 */
11body {
12  font-family: sans-serif;
13  margin: 0;
14  padding: 20px;
15  background-color: #f4f4f4;
16  color: #333;
17}
18
19.main-content {
20  max-width: 960px;
21  margin: 0 auto;
22  padding: 20px;
23  background-color: #ffffff;
24  border-radius: 8px;
25  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
26}
27
28h1 {
29  color: #007bff;
30  margin-top: 0;
31}
32
33/*
34 * ビューポートが水平方向に2つのセグメントに分割されている場合に適用されるスタイル。
35 * 例: 完全に展開された折りたたみ式デバイスで、画面が左右に分割されている状態。
36 * このメディアクエリが一致した場合、`.main-content`がグリッドレイアウトになり、
37 * その子要素が2つのセグメントにまたがるように配置されます。
38 */
39@media (horizontal-viewport-segments: 2) {
40  body {
41    padding: 0; /* 複数のセグメントを画面いっぱいに表示するため、bodyの余白をリセット */
42    background-color: #e9ecef;
43  }
44
45  .main-content {
46    max-width: none; /* 画面幅に合わせてコンテンツの最大幅を解除 */
47    margin: 0;
48    padding: 16px;
49    border-radius: 0; /* デバイスの端に合わせるため角丸を解除 */
50    box-shadow: none;
51    display: grid; /* グリッドレイアウトで2つのセグメントを表現 */
52    grid-template-columns: 1fr 1fr; /* 2つのカラム（セグメント）を等しい幅で作成 */
53    gap: 16px; /* セグメント間の間隔 */
54    min-height: 100vh; /* 画面の高さ全体を占めるように */
55    box-sizing: border-box; /* paddingとborderを要素の幅に含める */
56  }
57
58  /*
59   * `.main-content` の直下の子要素がそれぞれのセグメントに配置されることを想定し、
60   * 最初のセグメントに視覚的な区切り線を追加する例です。
61   */
62  .main-content > *:first-child {
63    border-right: 1px solid #dee2e6; /* セグメント間の区切り線 */
64    padding-right: 8px; /* 区切り線とコンテンツの間隔 */
65  }
66
67  .main-content > *:last-child {
68    padding-left: 8px; /* 区切り線とコンテンツの間隔 */
69  }
70}

horizontal-viewport-segmentsは、CSSのメディア特性の一つで、ウェブページを表示するビューポート（画面領域）が水平方向にいくつのセグメントに分割されているかを判定するために使用されます。主に折りたたみ式デバイスや複数のスクリーンを持つ環境において、デバイスの表示状態に応じてコンテンツのレイアウトを最適化する際に役立ちます。この特性に引数や戻り値はありません。

サンプルコードでは、まず通常の（単一セグメントの）ビューポートにおける基本的なページのスタイルを定義しています。ここでは、コンテンツを中央に配置し、背景色や文字色などの一般的な装飾を設定しています。

次に、@media (horizontal-viewport-segments: 2)というメディアクエリを用いて、ビューポートが水平方向に2つのセグメントに分割されている場合に適用されるスタイルを設定しています。これは、例えば折りたたみ式スマートフォンを完全に開いた状態や、左右に並んだ複数のディスプレイ環境などを想定しています。この条件が満たされた場合、bodyの余白をリセットして画面いっぱいに表示し、.main-content要素は最大幅の制限を解除し、display: gridを使ってコンテンツを2つの等しい幅のカラム（セグメント）に配置するよう変更されます。さらに、それぞれのセグメント間に視覚的な区切り線を追加するスタイルも定義されており、コンテンツが複数の画面領域にまたがって自然に表示されるように調整しています。

Copy
1/*
2 * ビューポートが2つの水平セグメントに分割されている場合に適用されるスタイル。
3 * これは主に、折りたたみ式デバイスのデュアルスクリーンモードなどで利用されます。
4 */
5@media (horizontal-viewport-segments: 2) {
6  /*
7   * .viewport-segment-info クラスを持つ要素のスタイルを変更します。
8   * 背景色と文字色を調整し、デュアルスクリーンモードであることを視覚的に示します。
9   */
10  .viewport-segment-info {
11    background-color: #e0f7fa; /* 明るい水色 */
12    color: #00796b; /* 濃い青緑色 */
13    padding: 20px;
14    border: 2px dashed #00796b;
15    text-align: center;
16    font-family: sans-serif;
17  }
18
19  /*
20   * さらに、このモードでのテキストの表示を調整できます。
21   */
22  .viewport-segment-info p {
23    font-size: 1.2em;
24    margin-top: 10px;
25    font-weight: bold;
26  }
27}
28
29/*
30 * 通常のビューポート (水平セグメントが1つの場合など) に適用される基本スタイル。
31 * このスタイルは、上記のメディアクエリが適用されない場合に表示されます。
32 */
33.viewport-segment-info {
34  background-color: #f8f8f8; /* 薄い灰色 */
35  color: #333; /* 標準的な濃い灰色 */
36  padding: 15px;
37  border: 1px solid #ccc;
38  text-align: left;
39  font-family: sans-serif;
40}
41
42.viewport-segment-info p {
43  font-size: 1em;
44  margin-top: 5px;
45  font-weight: normal;
46}

horizontal-viewport-segmentsは、ウェブページが表示されるビューポート（表示領域）が、いくつの水平な区画（セグメント）に分割されているかを検出するためのCSSメディア特性です。この特性は、主に折りたたみ式デバイスのデュアルスクリーンモードや、複数の画面を持つデバイスなど、特殊な表示環境でウェブサイトのレイアウトやスタイルを最適化するために利用されます。

サンプルコードでは、@media (horizontal-viewport-segments: 2) というメディアクエリによって、ビューポートが2つの水平セグメントに分割されている場合に特定のスタイルが適用されるように設定されています。例えば、折りたたみ式デバイスがデュアルスクリーンモードで開かれているような状況で、.viewport-segment-infoクラスを持つ要素の背景色や文字色などが、通常の表示とは異なるデザインに変更されます。これにより、デュアルスクリーン環境に最適化された視覚的な情報を提供し、ユーザー体験を向上させることができます。

一方、メディアクエリの外側に記述されているスタイルは、horizontal-viewport-segments: 2の条件に合致しない、通常の1つの画面として表示されるビューポートなどに適用される基本デザインです。このhorizontal-viewport-segmentsという特性自体は引数を直接取らず、戻り値もありません。代わりに、メディアクエリ内で値（例: 2）を指定することで、その値が現在のビューポートの水平セグメント数と一致するかどうかを評価し、条件が真の場合にのみ対応するCSSスタイルを適用するという挙動を示します。この機能を使うことで、多様なデバイス環境に適応した柔軟なユーザーインターフェースの実装が可能になります。