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

Copy
1/*
2 * このCSSは、デバイスのビューポートが垂直方向にどのように分割されているかに応じて、
3 * 要素のレイアウトを調整する例を示しています。
4 * 主に二つ折りデバイスや複数のスクリーンを持つデバイスでの利用が想定されます。
5 */
6
7/*
8 * .content-area クラスは、ページの主要なコンテンツを保持するコンテナです。
9 * デフォルトでは、ビューポートが単一の場合（例: 標準的なスマートフォンやPCブラウザ）に適用されるスタイルです。
10 */
11.content-area {
12  display: flex; /* 子要素（例えばカード）を柔軟に配置 */
13  flex-direction: column; /* デフォルトでは縦方向に並べる */
14  gap: 20px; /* 子要素間の間隔 */
15  padding: 20px; /* コンテナの内側の余白 */
16  max-width: 800px; /* コンテナの最大幅を設定 */
17  margin: 0 auto; /* ページの中央に配置 */
18  background-color: #f4f4f4; /* 背景色 */
19  border-radius: 8px; /* 角丸 */
20}
21
22/*
23 * .item クラスは、コンテナ内の個々の要素（例: 各セグメントに表示されるカードや情報ブロック）を表します。
24 */
25.item {
26  background-color: #ffffff; /* アイテムの背景色 */
27  border: 1px solid #e0e0e0; /* アイテムの境界線 */
28  padding: 15px; /* アイテムの内側の余白 */
29  border-radius: 6px; /* アイテムの角丸 */
30  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 軽い影 */
31  text-align: center; /* テキストを中央揃え */
32  font-family: Arial, sans-serif; /* フォントの指定 */
33  color: #333; /* 文字色 */
34}
35
36/*
37 * @media (vertical-viewport-segments: 2)
38 * このメディアクエリは、デバイスのビューポートが垂直方向に2つのセグメントに分割されている場合に適用されます。
39 * 例えば、二つ折りのスマートフォンを開いたときに、左右の画面がそれぞれ異なるビューポートセグメントとして
40 * 扱われるような状況で検出されます。
41 *
42 * このような状況では、レイアウトを2つのセグメントに最適化するために、flex-directionをrow（横並び）に変更し、
43 * 各アイテムがそれぞれのセグメントに収まるように調整します。
44 */
45@media (vertical-viewport-segments: 2) {
46  .content-area {
47    flex-direction: row; /* 2つのセグメントに合わせて子要素を横並びに変更 */
48    justify-content: space-around; /* アイテムを均等に配置 */
49    align-items: flex-start; /* アイテムを上揃えに配置 */
50    height: 100vh; /* ビューポートの高さ全体を使用 */
51    max-width: none; /* 最大幅の制限を解除し、ビューポート幅に合わせる */
52    margin: 0; /* 左右中央寄せのマージンをリセット */
53    padding: 10px 0; /* 上下のパディングを残し、左右はセグメントに合わせて調整 */
54  }
55
56  .item {
57    flex: 1; /* 各アイテムが利用可能なスペースを均等に占める */
58    max-width: 45%; /* 2つのセグメントにほぼ半分の幅を割り当てる（余白を考慮） */
59    margin: 0 10px; /* アイテム間の左右の余白 */
60  }
61}
62
63/*
64 * @media (min-vertical-viewport-segments: 3)
65 * このメディアクエリは、ビューポートが垂直方向に3つ以上のセグメントに分割されている場合に適用されます。
66 * 例えば、より複雑なマルチスクリーンデバイスや、未来のデバイスでの利用が考えられます。
67 */
68@media (min-vertical-viewport-segments: 3) {
69  .content-area {
70    flex-wrap: wrap; /* アイテムが収まらない場合は次の行に折り返す */
71    justify-content: space-evenly; /* アイテムを均等に配置し、端にスペースを設ける */
72    padding: 15px;
73  }
74
75  .item {
76    flex: 1 1 calc(33% - 30px); /* 各アイテムが約1/3の幅を占めるように調整 */
77    margin: 10px; /* アイテム間の上下左右の余白 */
78    background-color: #e6ffe6; /* 背景色を変更して視覚的に区別 */
79    border-color: #90ee90;
80  }
81}

vertical-viewport-segmentsは、デバイスのビューポートが垂直方向にいくつのセグメントに分割されているかを検出するCSSのメディア特性です。この特性は、二つ折りデバイスや複数のスクリーンを持つデバイスなど、特殊な表示環境でレイアウトを最適化するために使用されます。このメディア特性には引数も戻り値もなく、検出されたセグメント数を条件としてスタイルを適用します。

サンプルコードでは、まず.content-areaと.itemクラスで、通常の単一ビューポートにおける基本的なレイアウトが定義されています。これは、コンテンツを縦方向に並べ、ページの中央に配置するスタイルです。

次に、@media (vertical-viewport-segments: 2) のメディアクエリでは、ビューポートが垂直方向に2つのセグメントに分割されている場合に適用されるスタイルが記述されています。例えば、二つ折りのデバイスを開いた際に、コンテンツは横並び (flex-direction: row) に変更され、各アイテムが利用可能なスペースを均等に占めるように調整されます。これにより、2画面を効率的に活用したレイアウトが実現されます。

さらに、@media (min-vertical-viewport-segments: 3) のメディアクエリは、ビューポートが垂直方向に3つ以上のセグメントに分割されている場合に適用されます。この場合、アイテムはさらに柔軟に配置され、複数の画面領域にわたってコンテンツが適切に表示されるよう調整されるとともに、視覚的な区別のため背景色も変更されています。

このようにvertical-viewport-segmentsを用いることで、多様なデバイスの画面構成に対応し、ユーザーにとって最適な表示を提供することが可能になります。

Copy
1/*
2 * vertical-viewport-segments: 垂直方向のビューポートセグメント数をクエリするメディア特性。
3 * 折りたたみデバイスやデュアルスクリーンデバイスなどで、ビューポートが垂直に分割されている場合に、そのセグメントの数を検出します。
4 * 例えば、2つのセグメントを持つデバイスでは、ビューポートが縦方向に2つの独立した表示領域に分割されていることを示します。
5 *
6 * このサンプルコードでは、「css vertical slider」というキーワードに沿って、
7 * 複数の垂直セグメントがあるデバイスで、コンテンツのレイアウトを調整する例を示します。
8 * 複数のスライダーコンテンツ（.content-item）が、各セグメントに効率的に表示されるようなレイアウトを想定しています。
9 */
10
11/* デフォルトのスタイル: 1つの垂直セグメント（通常のデバイス）を想定 */
12.vertical-slider-container {
13  display: flex; /* 子要素を柔軟に配置 */
14  flex-direction: column; /* 子要素を縦方向に並べる */
15  gap: 20px; /* 子要素間の間隔 */
16  padding: 20px; /* 内側の余白 */
17  background-color: #f0f0f0; /* 背景色 */
18  border-radius: 8px; /* 角丸 */
19  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
20  /* スライダーのような縦長のコンテンツを想定 */
21  max-height: 100vh; /* ビューポートの高さに制限 */
22  overflow-y: auto; /* コンテンツがはみ出す場合にスクロール可能にする */
23}
24
25.content-item {
26  min-height: 150px; /* アイテムの最小高さ */
27  background-color: #ffffff; /* アイテムの背景色 */
28  border: 1px solid #e0e0e0; /* アイテムの境界線 */
29  border-radius: 6px; /* アイテムの角丸 */
30  padding: 15px; /* アイテムの内側の余白 */
31  display: flex; /* テキスト中央揃えのため */
32  align-items: center; /* 垂直方向中央揃え */
33  justify-content: center; /* 水平方向中央揃え */
34  font-size: 1.2em; /* フォントサイズ */
35  color: #333; /* 文字色 */
36}
37
38/*
39 * @media (vertical-viewport-segments: 2):
40 * ビューポートが垂直方向に2つのセグメントに分割されている場合に適用されるスタイル。
41 * 例えば、2画面の折りたたみスマートフォンを縦向きで使用する場合など。
42 */
43@media (vertical-viewport-segments: 2) {
44  .vertical-slider-container {
45    /* 2つのセグメントがある場合、コンテンツを2つの等しい列に配置 */
46    display: grid; /* グリッドレイアウトに変更 */
47    grid-template-columns: 1fr 1fr; /* 2つの等幅列を作成 */
48    gap: 20px; /* グリッドアイテム間の間隔 */
49    padding: 0; /* 各セグメントがビューポート全体を使うため、コンテナのパディングはなしに */
50    background-color: transparent; /* 背景色を透明に */
51    box-shadow: none; /* 影をなしに */
52    height: 100vh; /* ビューポートの高さ全体を使用 */
53    max-height: none; /* 最大高さの制限を解除 */
54    overflow-y: hidden; /* コンテナ全体のスクロールはなし */
55  }
56
57  .content-item {
58    min-height: auto; /* アイテムの最小高さを自動に */
59    height: 100%; /* 各セグメント内で高さを100%に */
60    border-radius: 0; /* 角丸をなしに */
61    overflow-y: auto; /* 各セグメント内でコンテンツがはみ出す場合にスクロール可能にする */
62  }
63}

vertical-viewport-segmentsは、CSSのメディア特性の一つで、ウェブページを表示するビューポートが垂直方向にいくつのセグメント（区画）に分割されているかを検出します。これは、折りたたみスマートフォンやデュアルスクリーンデバイスのような、画面が複数に分かれるデバイスで特に役立ちます。この特性には、特定の引数や戻り値はありません。

提供されたサンプルコードは、「css vertical slider」というテーマに沿って、この特性を使ってデバイスの画面構成に応じた柔軟なレイアウトを実現する例を示しています。

まず、通常の1つのビューポートを想定したデフォルトのスタイルでは、.vertical-slider-containerがdisplay: flexとflex-direction: columnで、複数の.content-itemを縦方向に並べたスライダーのようなレイアウトを作成しています。コンテンツが画面に収まらない場合は、overflow-y: autoにより縦スクロールが可能になります。

次に、@media (vertical-viewport-segments: 2)というメディアクエリが適用されると、ビューポートが垂直方向に2つのセグメントに分割されているデバイス、例えば縦向きの折りたたみスマートフォンなどで、特別なスタイルが適用されます。この条件が満たされた場合、.vertical-slider-containerはdisplay: gridとgrid-template-columns: 1fr 1frによって、コンテンツを2つの等しい列に配置するよう変更されます。これにより、各セグメントが独立した表示領域として機能し、.content-itemは各セグメント内でoverflow-y: autoによって個別にスクロールできるようになります。

このようにvertical-viewport-segmentsを利用することで、単一のコードベースで多様な画面構成を持つデバイスに対応し、ユーザーに最適な表示と操作性を提供することが可能です。