【CSS Modules】device-postureメディア機能の使い方
device-postureメディア機能の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
device-postureプロパティは、デバイスの物理的な姿勢（ポスチャ）に関する情報を保持するプロパティです。これはCSS Modulesにおけるメディア特性の一つとして導入され、Webコンテンツが表示されているデバイスが現在どのような形状や配置になっているかを検知するために使用されます。例えば、折りたたみ式デバイスにおいて、デバイスが完全に開いた状態（unfolded）であるか、折りたたまれた状態（folded）であるか、またはノートPCのように傾けられた状態（laptop）であるかなどを判断することができます。
このプロパティを利用することで、開発者はデバイスの特定の姿勢に応じて異なるCSSスタイルやレイアウトを適用し、多様なデバイス環境で最適なユーザーインターフェースを提供することが可能になります。取りうる値には、folded、unfolded、laptopといったキーワードがあり、メディアクエリ内でこれらの値を条件として使用します。具体的には、デバイスが展開されている場合に広々としたレイアウトを適用したり、折りたたまれている場合に要素の配置を調整したりするなど、デバイスの物理的な状態に合わせたきめ細やかなデザイン制御が実現できます。これにより、スマートフォンやタブレットといったモバイルデバイスや、革新的なフォームファクタを持つデバイスへの対応がより柔軟に行えるようになります。
公式リファレンス: device-posture
構文(syntax)
1@media (device-posture: continuous) { 2 /* スタイルを記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません