【CSS Modules】horizontal-viewport-segmentsメディア機能の使い方
horizontal-viewport-segmentsメディア機能の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
horizontal-viewport-segmentsプロパティは、Webページの表示領域であるビューポートが水平方向にいくつのセグメント（区画）に分割されているかを保持するプロパティです。このプロパティは、特に折りたたみ式デバイスやデュアルスクリーンデバイスなど、物理的に画面が複数に分かれているデバイスのレイアウトに対応するために使用されるCSSのメディア特性の一つです。
このプロパティが示す値は、水平方向のセグメントの数を表す整数値です。例えば、ビューポートが水平に2つの画面に分かれているデバイスであれば、値は2となります。通常の単一画面デバイスでは、値は1です。開発者はこのhorizontal-viewport-segmentsプロパティをCSSの@mediaルール内で利用することで、デバイスの画面分割状況に応じた異なるスタイルを適用できるようになります。
これにより、複数のセグメントにわたってコンテンツを適切に配置したり、各セグメントに最適化されたレイアウトを提供したりすることが可能になります。例えば、2つのセグメントがある場合は、一方のセグメントにナビゲーションを、もう一方にメインコンテンツを表示するなど、柔軟なUI設計を実現できます。デバイスの物理的な特性に合わせたきめ細やかなレスポンシブデザインを実装する上で、非常に重要な役割を果たします。
公式リファレンス: horizontal-viewport-segments
構文(syntax)
1@media (horizontal-viewport-segments: 2) { 2 /* スタイルを記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません