From 35918176145e2f9de541ac623706cd3ced71612d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 17:30:52 +0900 Subject: CSS Values and Units の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/19 時点の英語版に同期 --- files/ja/web/css/resolution/index.md | 118 +++++++++++++---------------------- 1 file changed, 45 insertions(+), 73 deletions(-) (limited to 'files/ja/web/css/resolution/index.md') diff --git a/files/ja/web/css/resolution/index.md b/files/ja/web/css/resolution/index.md index 4cdf4eadc3..435d8bd89e 100644 --- a/files/ja/web/css/resolution/index.md +++ b/files/ja/web/css/resolution/index.md @@ -4,96 +4,68 @@ slug: Web/CSS/resolution tags: - CSS - CSS データ型 - - Reference + - データ型 + - リファレンス - ウェブ - レイアウト +browser-compat: css.types.resolution translation_of: Web/CSS/resolution --- -
{{CSSRef}}
+{{CSSRef}} -

<resolution> は CSS の データ型 で、メディアクエリの resolution で使われ、出力端末のピクセル密度である、解像度を表します。

+**``** は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types) で、[メディアクエリ](/ja/docs/Web/CSS/Media_Queries)の [resolution](/ja/docs/Web/CSS/@media/resolution) で使われ、出力端末のピクセル密度である、解像度を表します。 -

画面では、長さは物理的な値ではなく、 CSS のインチ、センチメートル、またはピクセルと関連づけられます。

+画面では、長さは物理的な値ではなく、 CSS のインチ、センチメートル、またはピクセルと関連づけられます。 -

構文

+## 構文 -

<resolution> データ型は、厳密に正の {{cssxref("<number>")}} のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。

+`` データ型は、厳密に正の {{cssxref("<number>")}} のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。 -

単位

+### 単位 -
-
dpi
-
1 インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、1dpi ≈ 0.39dpcm です。
-
dpcm
-
センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、1dpcm ≈ 2.54dpi です。
-
dppx
-
ピクセル (px) あたりのドット数を表します。CSS の in と CSS の px の比率は 1:96 で固定なので、1dppx は 96dpi と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。
-
x
-
dppx の別名です。
-
+- `dpi` + - : [1 インチあたりのドット数](https://en.wikipedia.org/wiki/Dots_per_inch) を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、`1dpi ≈ 0.39dpcm` です。 +- `dpcm` + - : [センチメートルあたりのドット数](https://en.wikipedia.org/wiki/Dots_per_inch) を表します。1 インチは 2.54 cm なので、`1dpcm ≈ 2.54dpi` です。 +- `dppx` + - : ピクセル (`[px](/ja/docs/Web/CSS/length#px)`) あたりのドット数を表します。CSS の `in` と CSS の `px` の比率は 1:96 で固定なので、`1dppx` は `96dpi` と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。 +- `x` + - : `dppx` の別名です。 -
-

注記: 仮に値 0 に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると 0 は無効で、0dpi、0dpcm、0dppx のどれも表しません。

-
+> **Note:** 仮に値 `0` に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると `0` は無効で、`0dpi`、`0dpcm`、`0dppx` のどれも表しません。 -

例

+## 例 -

メディアクエリで使用する

+### メディアクエリーで使用する -
@media print and (min-resolution: 300dpi) { ... }
+```css +@media print and (min-resolution: 300dpi) { ... } +``` -

有効な解像度

+### 有効な解像度 -
96dpi
-50.82dpcm
-3dppx
-
+ 96dpi + 50.82dpcm + 3dppx -

無効な解像度

+### 無効な解像度 -
72 dpi     数値と単位の間に空白は許可されていません。
+```plain example-bad
+72 dpi     数値と単位の間に空白は許可されていません。
 ten dpi    数値は10進数しか使えません。
 0          単位は必須です。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Values', '#resolution', '<resolution>')}}{{Spec2('CSS4 Values')}}x 単位を追加
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}dppx 単位を追加
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}初回定義
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [resolution](/ja/docs/Web/CSS/@media/resolution) メディア特性 +- {{cssxref("image-resolution")}} プロパティ +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) -- cgit v1.2.3-54-g00ecf