path: root/files/ja/web/css/image/index.html

---
title: <image>
slug: Web/CSS/image
tags:
  - CSS
  - CSS Data Type
  - CSS Images
  - Data Type
  - Graphics
  - Layout
  - Reference
  - Web
translation_of: Web/CSS/image
---
<p>{{CSSRef}}</p>

<p><strong><code>&lt;image&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、二次元の画像を表現します。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<p><code>&lt;image&gt;</code> データ型は以下のいずれかによって表すことができます。</p>

<ul>
 <li>{{CSSxRef("&lt;url&gt;")}} データ型で記述された画像</li>
 <li>{{CSSxRef("&lt;gradient&gt;")}} データ型</li>
 <li>{{CSSxRef("element")}} 関数で定義されたウェブページの一部</li>
 <li>{{CSSxRef("image()")}} 関数で定義された画像、画像フラグメント、単色の色</li>
 <li>{{CSSxRef("cross-fade")}} 関数で定義された2つ以上の画像の合成</li>
 <li>{{CSSxRef("image-set")}} 関数で定義された、解像度に基づいて定義された画像の選択</li>
</ul>

<h2 id="Description" name="Description">解説</h2>

<p>CSS はさまざま種類の画像を扱うことができます。</p>

<ul>
 <li>JPEG や PNG やその他の<a href="https://en.wikipedia.org/wiki/Raster_graphics">ラスタ形式</a>など、<ruby><em>固有の寸法</em><rp> (</rp><rt><em>intrinsic dimensions</em></rt><rp>)</rp></ruby> (自然の寸法) を持つ画像。</li>
 <li>一部の .ico 形式のように、単一のファイルの中に複数のバージョンが存在する、<em>複数の固有の寸法</em>を持つ画像。 (この場合、固有の寸法は領域に収まる最も大きな画像であり、かつアスペクト比が包含ボックスに最も近いものになります。)</li>
 <li>SVG またはその他の<a href="https://en.wikipedia.org/wiki/Vector_graphics">ベクター形式</a>のように、固有の寸法を持たないが、幅と高さの間に固有のアスペクト比のある画像。</li>
 <li id="no_intrinsic">CSS のグラデーションなど、<em>固有の寸法がなく、固有のアスペクト比もない</em>画像。</li>
</ul>

<p>CSS はオブジェクトの<em>正しい</em>寸法を、 (1) <em>固有の寸法</em>、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などの CSS プロパティで定義された<em>指定された寸法</em>、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような<em>既定の寸法</em>によって特定します。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">オブジェクトの種類 (CSS プロパティ)</th>
   <th scope="col">既定のオブジェクトの寸法</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{CSSxRef("background-image")}}</td>
   <td>要素の background の置かれる領域の寸法</td>
  </tr>
  <tr>
   <td>{{CSSxRef("list-style-image")}}</td>
   <td><code>1em</code> の文字の寸法</td>
  </tr>
  <tr>
   <td>{{CSSxRef("border-image-source")}}</td>
   <td>要素の境界画像領域の寸法</td>
  </tr>
  <tr>
   <td>{{CSSxRef("cursor")}}</td>
   <td>クライアントのシステムにおける通常のカーソルの寸法に合うブラウザーが定義した寸法</td>
  </tr>
  <tr>
   <td>{{CSSxRef("mask-image")}}</td>
   <td>?</td>
  </tr>
  <tr>
   <td>{{CSSxRef("shape-outside")}}</td>
   <td>?</td>
  </tr>
  <tr>
   <td>{{CSSxRef("mask-border-source")}}</td>
   <td>?</td>
  </tr>
  <tr>
   <td>@counter-style の {{CSSxRef("symbols")}}</td>
   <td>危険性のある機能です。対応している場合、クライアントのシステムでのカーソルの寸法に合わせたブラウザー定義の寸法です。</td>
  </tr>
  <tr>
   <td>擬似要素 ({{CSSxRef("::after")}} または {{cssxref("::before")}}) の {{CSSxRef("content")}}</td>
   <td>300px × 150px の矩形</td>
  </tr>
 </tbody>
</table>

<p>正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。</p>

<ul>
 <li>指定された寸法に<em>幅と高さの両方</em>が定義されていれば、その値が実際の寸法に使われます。</li>
 <li>指定された寸法に<em>幅と高さのどちらかのみ</em>が定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、既定のオブジェクトの寸法の値。</li>
 <li>指定された寸法が<em>幅と高さを定義していない</em>ときは、画像固有のアスペクト比に一致し、既定のオブジェクトの寸法をどの方向にも超過しないような値が計算され、実際のオブジェクト寸法に使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さは既定のオブジェクトサイズからとられます。</li>
</ul>

<div class="note"><strong>注:</strong> すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は<a href="#Browser_compatibility">ブラウザーの互換性</a>の節をご覧ください。</div>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。</p>

<ul>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Valid_images" name="Valid_images">有効な画像</h3>

<pre class="brush: css example-good notranslate">url(test.jpg)               /* &lt;url&gt;、但し test.jpg は実在する画像 */
linear-gradient(blue, red)  /* &lt;gradient&gt; */
element(#realid)            /* element() 関数で参照されるウェブページの一部、
                               ページ上に "realid" が実在する ID である場合 */
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /* arrow.png が対応している画像であれば、 &lt;url&gt; の元画像の
                               左上から 16x16 を選択し、そうでなければ赤一色の見本になります。
                               言語が右書きの場合は、画像は水平方向に反転します。 */
cross-fade(20% url(twenty.png), url(eighty.png))
                            /* 多重露光の画像で、 twenty が 20% の露光で、
                               eighty が 80% の露光になる */
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /* 様々な解像度による画像の選択 */</pre>

<h3 id="Invalid_images" name="Invalid_images">無効な画像</h3>

<pre class="brush: css example-bad notranslate">nourl.jpg            /* 画像ファイルは url() 関数により示す必要がある */
url(report.pdf)      /* url() 関数で指すファイルは画像でなければならない */
element(#fakeid)     /* 要素 ID はページ上に実在する ID でなければならない */
image(z.jpg#xy=0,0)  /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */
</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("CSS4 Images", "#typedef-image", "&lt;image&gt;")}}</td>
   <td>{{Spec2("CSS4 Images")}}</td>
   <td>Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, {{CSSxRef("image-resolution")}} を追加</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}}</td>
   <td>{{Spec2("CSS3 Images")}}</td>
   <td>初回定義。これ以前は <code>&lt;image&gt;</code> データ型の明示的な定義はなし。画像は <code>url()</code> 関数記法でしか定義できなかった</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.types.image")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
 <li>{{CSSxRef("element")}}</li>
 <li>{{CSSxRef("imagefunction", "image()")}}</li>
 <li>{{CSSxRef("image-set")}}</li>
 <li>{{CSSxRef("cross-fade")}}</li>
</ul>