“<ratio>”値~比率

““<ratio>”値”とは？

“<ratio>”値は2つの数値の比率を表します。主にアスペクト比、横縦比を表すために使用され、“aspect-ratio”プロパティやメディアクエリの“aspect-ratio”メディア・フィーチャーの値として使用することができます。

“<ratio>”値はスラッシュ(“/”)を挟んだ2つの正の“<number>”値で表現します。スラッシュ(“/”)の前後にはをホワイトスペースを入れることができます。

スラッシュ(“/”)と2つ目の“<number>”値は省略可能で、省略された場合は2つ目の成分は“1”とみなされます。なお、2つ目の成分を省略した場合でもシリアル化の際には成分が2つある(2つ目の成分が“1”)ものとして扱われます。

“<ratio>”値の2つの成分のうちどちらかが“0”もしくは無限大である場合は“退化的比率(Degenerate ratio)”を表します。退化的比率は通常何もしません。

“<ratio>”値の混合

“<ratio>”値の補間は1つめの“<number>”値を2つ目の“<number>”値で除算した結果の対数をとって行われます。補間の結果の逆対数をとり、その数値を一つ目の成分、二つ目の成分を“1”として“<ratio>”値に戻されます。

“<ratio>”値が退化的比率の場合は補間できません。

“<ratio>”値は加算できません。

画面アスペクト比

“<ratio>”値はメディアクエリで出力デバイスの描画域のアスペクト比を条件とする“aspect-ratio”メディア・フィーチャーの値として使用できます。“<ratio>”値で画面アスペクト比を表す場合、1つ目の“<number>”値が画面の横幅、2つ目の“<number>”値が画面の高さを表します。

“画面アスペクト比(Display Aspect Ratio、単にアスペクト比とも)”とはパソコンやテレビなどの画面の大きさを表す表現で、横幅と高さの比の形(横縦比)で表します。

代表的な画面アスペクト比は“4:3”や“16:9”です。一般的なパソコンやスマートフォンの画面の画素は正方形なので横と縦に並ぶ画素の数の比率とアスペクト比は同じになります。画面解像度が“1024×768”や“1280×960”の画面の画面アスペクト比は“4:3”、“1280×720”や“1920×1080”の画面は“16:9”となります。

“<ratio>”値の例

以下は有効な“<ratio>”値の例です。

アスペクト比4:3
4/3

アスペクト比16:9
16/9

アスペクト比1.85:1
1.85/1

アスペクト比1:1
1/1
1


仕様書

定義されている仕様書

<ratio>