【CSS Modules】ratio型の使い方
ratio型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
ratio定数は、CSSにおいて要素のアスペクト比（縦横比）を表す際に用いられる値の形式を指す定数です。これは、特定の数値を指す定数というよりは、CSSのプロパティ値としてアスペクト比を定義する「型」として機能します。
アスペクト比は、ウェブサイトやアプリケーションのレイアウトを整える重要な概念です。画像や動画、コンテナなどの要素が、画面サイズが変わっても歪まずに、常に一定の縦横比を保ちたい場合に利用されます。
ratioは、通常「幅 / 高さ」の形式で記述されます。例えば、「16 / 9」は一般的なワイドスクリーンのアスペクト比を示し、「1 / 1」は正方形を表します。この形式は、CSSのaspect-ratioプロパティなどの値として直接指定することで、要素の縦横比を固定します。これにより、内容の読みやすさやデザインの一貫性を保ちます。
CSS Modulesの環境下においても、このratioの概念は通常のCSSの記述と同様に利用できます。モジュール内でスタイルを定義する際に、要素のアスペクト比を明示的に指定することで、異なるコンポーネント間でのレイアウトの一貫性を確保しやすくなります。この値の形式を理解することで、レスポンシブデザインの実現や、予測可能なUI（ユーザーインターフェース）の構築に役立ちます。
公式リファレンス: <ratio>
構文(syntax)
1@media (aspect-ratio: 16/9) { 2 /* ビューポートの縦横比が16対9の場合に適用されるスタイルを記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません