【CSS Modules】aspect-ratioメディア機能の使い方
aspect-ratioメディア機能の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
aspect-ratioプロパティは、ウェブページを表示しているデバイスの表示領域、つまりビューポートの幅と高さの比率（アスペクト比）に関する情報を保持するプロパティです。
このプロパティはCSSのメディアクエリ内で使用されます。メディアクエリとは、デバイスの種類や画面サイズ、解像度などの特性に応じて異なるスタイルを適用するための機能です。aspect-ratioプロパティを使用することで、PCの横長の画面（ワイドスクリーン）やスマートフォンの縦長の画面（ポートレート）といった、デバイスのアスペクト比の違いに基づいてウェブサイトのデザインを最適化できます。
具体的な利用方法としては、@media (aspect-ratio: 16/9)のように記述し、幅が高さに対して16対9の比率であるデバイスにのみ、特定のCSSスタイルを適用できます。また、特定のアスペクト比の範囲にスタイルを適用したい場合は、最小値を指定するmin-aspect-ratioや最大値を指定するmax-aspect-ratioといったメディア特性と組み合わせて使用することが一般的です。これにより、多様な画面比率を持つデバイスに対して、それぞれ最適なレイアウトやデザインを提供することが可能となります。
システムエンジニアとして、ユーザーの利用デバイスに合わせてレイアウトやデザインを調整する「レスポンシブデザイン」の実現は重要です。aspect-ratioプロパティは、このレスポンシブデザインを効果的に実現するための基本的なツールの一つとして、その活用が求められます。
公式リファレンス: aspect-ratio
構文(syntax)
1@media (aspect-ratio: <width-ratio>/<height-ratio>) { 2 /* ここにスタイルを記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません