このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSの画面アスペクト比

記事Jan. 25th,2019
July 7th,2020
CSSの<ratio>値、画面アスペクト比について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

““<ratio>”値”とは?

<ratio>”値は画面アスペクト比を表します。メディアクエリで出力デバイスの描画域のアスペクト比を条件とするaspect-ratio”特性の値として使用できます。

<ratio>”値は画面の横幅と高さの比率をスラッシュ(“/”)を挟んだ2つの正の<integer>”値で表現します。一つ目の整数が横幅、2つ目の整数が高さを表します。

スラッシュ(“/”)の前後に半角スペースを入れることができます。

小数値は無効です。例えば“1.85/1”は“185/100”や“91/50”としなければなりません。

“画面アスペクト比”とは?

画面アスペクト比(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
185/100
91/50
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク