path: root/files/ja/web/css/image-set()/index.html

---
title: image-set()
slug: Web/CSS/image-set()
tags:
  - CSS
  - CSS Function
  - CSS-4 Images
  - Function
  - Reference
  - Web
translation_of: Web/CSS/image-set()
---
<div>{{cssref}}</div>

<p class="summary"><strong><code>image-set()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。</p>

<p>解像度と帯域は端末やネットワークアクセスによって様々です。 <code>image-set()</code> 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。</p>

<p><code>image-set()</code> はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。</p>

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

<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
where &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; and
      &lt;string&gt; is an &lt;url&gt;
</pre>

<h3 id="Values" name="Values">値</h3>

<p>もっともよく見かけるのは <code>url()</code> または <code>&lt;string&gt;</code> 値ですが、 <code><a href="/ja/docs/Web/CSS/image">&lt;image&gt;</a></code> は画像セット以外のあらゆる画像型を取ることができます。 <code>image-set()</code> 関数は他の <code>image-set()</code> 関数の中に入れることはできません。</p>

<p><code><a href="/ja/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> の単位には、ピクセル当たりのドット数を表す <code>x</code> または <code>dppx</code>、インチ当たりのドット数を表す <code>dpi</code>、センチメートル当たりのドット数を表す <code>dpcm</code> があります。 <code>image-set()</code> の中の画像はすべて、固有の解像度が必要です。</p>

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

<h3 id="Using_image-set_to_provide_alternative_background-image_options" name="Using_image-set_to_provide_alternative_background-image_options">image-set() を使用して代替の background-image オプションを提供する</h3>

<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x,
                             "cat-2x.png" 2x,
                             "cat-print.png" 600dpi);</pre>

<p>この例は <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。</p>

<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 Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>仕様書</th>
   <th>状態</th>
   <th>備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

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

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

<ul>
 <li>{{cssxref("image")}}</li>
 <li>{{cssxref("_image", "image()")}}</li>
 <li>{{cssxref("element")}}</li>
 <li>{{cssxref("url")}}</li>
 <li>{{cssxref("&lt;gradient&gt;")}}</li>
 <li>{{cssxref("cross-fade")}}</li>
</ul>