From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/ratio/index.html | 97 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 files/ja/web/css/ratio/index.html (limited to 'files/ja/web/css/ratio') diff --git a/files/ja/web/css/ratio/index.html b/files/ja/web/css/ratio/index.html new file mode 100644 index 0000000000..dcd59c98ab --- /dev/null +++ b/files/ja/web/css/ratio/index.html @@ -0,0 +1,97 @@ +--- +title: +slug: Web/CSS/ratio +tags: + - CSS + - CSS Data Type + - Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/ratio +--- +

{{CSSRef}}

+ +

<ratio> は CSS のデータ型で、アスペクト比をメディアクエリ内で記述するために使用し、2つの単位のない値で比率を記述します。

+ +

構文

+ +

メディアクエリ Level 3 では、<ratio> データ型は、厳密な正の {{cssxref("<integer>")}}、スラッシュ ('/', Unicode の U+002F SOLIDUS)、2 番目の厳密な正の {{cssxref("<integer>")}} の順に記述します。スラッシュの前後にはスペースを入れてもかまいません。最初の数値は幅を、2番目の数値は高さを表します。

+ +

メディアクエリ Level 4 では、<ratio> データ型が更新され、厳密な正の {{cssxref("<number>")}}、スラッシュ ('/', Unicode の U+002F SOLIDUS)、2 番目の厳密な正の {{cssxref("<number>")}} の順に記述します。それに加えて、単独の {{cssxref("<number>")}} の値が許可されています。

+ +

例

+ +

メディアクエリでの使用

+ +
@media screen and (min-aspect-ratio: 16/9) { ... }
+ +

一般的なアスペクト比

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
比率用例
Ratio4_3.png4/320 世紀における伝統的な TV 画面の形状です。
Ratio16_9.png16/9現代の「ワイド画面」の TV の形状です。
Ratio1_1.85.png185/100 = 91/501960 年代から用いられている最も一般的な映画スクリーンの形状です。
Ratio1_2.39.png239/100「ワイドスクリーン」、アナモルフィックな映画スクリーンの形状です。
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS4 Media Queries')}}
{{SpecName('CSS3 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS3 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.ratio")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf