resolution

  • リビジョンの URL スラッグ: Web/CSS/resolution
  • リビジョンのタイトル: resolution
  • リビジョンの ID: 413017
  • 作成日:
  • 作成者: sosleepy
  • 現行リビジョン はい
  • コメント 訳文追加

このリビジョンの内容

{{CSSRef}}

概要

CSS の <resolution> データ型は メディアクエリーで使われ、出力デバイスのピクセル密度である、解像度を表します。他の CSS の寸法と同じく、<number> のすぐ後ろに解像度の単位 (dpi, dpcm, ...) を続けます。単位のリテラルと数字の間に空白はありません。

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

仮に値 0 に対してすべての単位が同じ解像度を表すとしても、これは {{xref_csslength}} ではないので、単位を省略してはいけません。0 は無効で、0dpi0dpcm0dppx のどれも表しません。

単位

dpi
1インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、1dpi ≈ 2.54dpcm です。
dpcm
センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、 1dpcm ≈ 0.39dpi です。
dppx
ピクセル(px)あたりのドット数を表します。CSS の inch と CSS の px の比率は 1.96 で固定なので、1dppx96dpi と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像のデフォルトの解像度に一致します。

以下は <resolution> 値の正しい使い方です:

96dpi                                              正しい使い方: <number>(ここでは <integer>)に続けて単位があります。
@media print and (min-resolution: 300dpi) { ... }  メディアクエリーのコンテキストでは正しい使い方

以下は正しくない使い方です:

72 dpi                                             誤り: <number> と単位の間に空白を置いてはいけません
ten dpi                                            誤り: 数字以外を使ってはいけません
0                                                  誤り: 0 値 の単位を省略できるのは <length> データ型 だけです。

仕様

仕様書 策定状況 コメント
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}} {{Spec2('CSS3 Values')}} 型を因数分解してより一般的な列挙にした。変更なし
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}} {{Spec2('CSS3 Images')}}  dppx 単位を追加
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}} {{Spec2('CSS3 Media Queries')}} 初回定義

ブラウザ実装状況

{{CompatibilityTable}}
機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート {{CompatNo}} [*] 3.5 (1.9.1) [**] 9 9.5 {{CompatNo}} [*]
dppx {{CompatUnknown}} {{CompatGeckoDesktop("16.0")}} {{CompatUnknown}} 12.10 * {{CompatUnknown}}
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート {{CompatNo}} [*] yes ? yes {{CompatNo}} [*]
dppx {{CompatUnknown}} {{CompatGeckoMobile("16.0")}} {{CompatUnknown}} 12.10 {{CompatUnknown}}

[*] Webkit エンジンは 仕様書にあるように CSS の resolution クエリーをサポートしておらず、Chrome や Safari のようなブラウザでは 非標準の device-pixel-ratio クエリーの利用が必要です。bug 16832 をご覧ください。

[**] Firefox 8 (Gecko 8.0) 以前は、誤って {{xref_cssinteger}} に単位を続けた CSS の寸法 だけを受け入れていました。このバージョンからは有効な CSS 寸法({{xref_cssnumber}} に単位が続くもの)をすべてサポートしています。

関連情報

このリビジョンのソースコード

<div>
  {{CSSRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p><a href="/ja/docs/Web/CSS">CSS</a> <code>の &lt;resolution&gt;</code> データ型は <a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリー</a>で使われ、出力デバイスのピクセル密度である、解像度を表します。他の CSS の寸法と同じく、<a href="number" rel="custom"><code>&lt;number&gt;</code></a> のすぐ後ろに解像度の単位 (<code>dpi</code>, <code>dpcm</code>, ...) を続けます。単位のリテラルと数字の間に空白はありません。</p>
<p>画面では、長さは 物理的な値ではなく、CSS のインチ、センチメートル、またはピクセルと関連づけられます。</p>
<p>仮に値 <code>0</code> に対してすべての単位が同じ解像度を表すとしても、これは {{xref_csslength}} ではないので、単位を省略してはいけません。<code>0</code> は無効で、<code>0dpi</code>、<code>0dpcm</code>、<code>0dppx</code> のどれも表しません。</p>
<h2 id="Units" name="Units">単位</h2>
<dl>
  <dt>
    <code>dpi</code></dt>
  <dd>
    <a href="http://en.wikipedia.org/wiki/Dots_per_inch">1インチあたりのドット数</a> を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、<code>1dpi ≈ 2.54dpcm</code> です。</dd>
  <dt>
    <code>dpcm</code></dt>
  <dd>
    <a href="http://en.wikipedia.org/wiki/Dots_per_centimetre">センチメートルあたりのドット数</a> を表します。1 インチは 2.54 cm なので、 <code>1dpcm ≈ 0.39dpi</code> です。</dd>
  <dt>
    <code>dppx</code></dt>
  <dd>
    ピクセル(<code>px</code>)あたりのドット数を表します。CSS の <code>inch と </code>CSS の <code>px</code> の比率は 1.96 で固定なので、<code>1dppx</code> は <code>96dpi</code> と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像のデフォルトの解像度に一致します。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<p>以下は <code>&lt;resolution&gt;</code> 値の正しい使い方です:</p>
<pre>
96dpi                                              正しい使い方: <a href="/ja/docs/Web/Guide/CSS/number">&lt;number&gt;</a>(ここでは <a href="/ja/docs/Web/Guide/CSS/integer">&lt;integer&gt;)</a>に続けて単位があります。
@media print and (min-resolution: 300dpi) { ... }  <a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリー</a>のコンテキストでは正しい使い方
</pre>
<p>以下は正しくない使い方です:</p>
<pre>
72 dpi                                             誤り: <a href="/ja/docs/Web/Guide/CSS/number">&lt;number&gt;</a> と単位の間に空白を置いてはいけません
ten dpi                                            誤り: 数字以外を使ってはいけません
0                                                  誤り: 0 値 の単位を省略できるのは <a href="/ja/docs/Web/Guide/CSS/length">&lt;length&gt;</a> データ型 だけです。
</pre>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">仕様書</th>
      <th scope="col">策定状況</th>
      <th scope="col">コメント</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}</td>
      <td>{{Spec2('CSS3 Values')}}</td>
      <td>型を因数分解してより一般的な列挙にした。変更なし</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS3 Images', '#resolution-units', '&lt;resolution&gt;')}}</td>
      <td>{{Spec2('CSS3 Images')}}</td>
      <td>&nbsp;<code>dppx</code> 単位を追加</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</td>
      <td>{{Spec2('CSS3 Media Queries')}}</td>
      <td>初回定義</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{CompatNo}} [*]</td>
        <td>3.5 (1.9.1) [**]</td>
        <td>9</td>
        <td>9.5</td>
        <td>{{CompatNo}} [*]</td>
      </tr>
      <tr>
        <td><code>dppx</code></td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop("16.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>12.10 <a href="http://my.opera.com/desktopteam/blog/2012/08/03/summer-core-update">*</a></td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{CompatNo}} [*]</td>
        <td>yes</td>
        <td>?</td>
        <td>yes</td>
        <td>{{CompatNo}} [*]</td>
      </tr>
      <tr>
        <td><code>dppx</code></td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("16.0")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>12.10</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[*] Webkit エンジンは 仕様書にあるように CSS の resolution クエリーをサポートしておらず、Chrome や Safari のようなブラウザでは 非標準の <code>device-pixel-ratio</code> クエリーの利用が必要です。<a href="https://bugs.webkit.org/show_bug.cgi?id=16832" title="https://bugs.webkit.org/show_bug.cgi?id=16832">bug 16832</a> をご覧ください。</p>
<p>[**] Firefox 8 (Gecko 8.0) 以前は、誤って {{xref_cssinteger}} に単位を続けた CSS の寸法 だけを受け入れていました。このバージョンからは有効な CSS 寸法({{xref_cssnumber}} に単位が続くもの)をすべてサポートしています。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li><a href="/ja/docs/Web/Guide/CSS/Media_queries">CSS メディアクエリ</a></li>
  <li>CSS データ型 : {{CSSDataTypes}}</li>
</ul>
Revert to this revision