---
title: CSS 画像
slug: Web/CSS/CSS_Images
tags:
  - CSS
  - CSS 画像
  - Reference
  - 概要
translation_of: Web/CSS/CSS_Images
---
<div>{{CSSRef}}</div>

<p class="summary"><ruby><strong>CSS 画像</strong><rp> (</rp><rt>CSS Images</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("&lt;image&gt;")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。</p>

<h2 id="Reference" name="Reference">リファレンス</h2>

<h3 id="Properties" name="Properties">プロパティ</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("image-orientation")}}</li>
 <li>{{CSSxRef("image-rendering")}}</li>
 <li>{{CSSxRef("image-resolution")}}</li>
 <li>{{CSSxRef("object-fit")}}</li>
 <li>{{CSSxRef("object-position")}}</li>
</ul>
</div>

<h3 id="Functions" name="Functions">関数</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
 <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
 <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
 <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
 <li>{{CSSxRef("conic-gradient")}}</li>
 <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
 <li>{{CSSxRef("url", "url()")}}</li>
 <li>{{CSSxRef("element", "element()")}}</li>
 <li>{{CSSxRef("_image", "image()")}}</li>
 <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
</ul>
</div>

<h3 id="Data_types" name="Data_types">データ型</h3>

<div class="index">
<ul>
 <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
 <li>{{CSSxRef("&lt;image&gt;")}}</li>
</ul>
</div>

<h2 id="Guides" name="Guides">ガイド</h2>

<dl>
 <dt><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></dt>
 <dd>特殊な CSS 画像型である<em>グラデーション</em>と、その作り方や使い方を紹介します。</dd>
 <dt><a href="/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS での画像スプライトの実装</a></dt>
 <dd>単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。</dd>
</dl>

<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")}}</td>
   <td>{{Spec2("CSS4 Images")}}</td>
   <td>{{CSSxRef("image-resolution")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("_image", "image()")}} を追加</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Images")}}</td>
   <td>{{Spec2("CSS3 Images")}}</td>
   <td>{{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加</td>
  </tr>
  <tr>
   <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td>
   <td>{{Spec2("Compat")}}</td>
   <td><code>-webkit</code> の接頭辞が付いたグラデーション値の関数を標準化</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}</td>
   <td>{{Spec2("CSS3 Values")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1", "#url", "&lt;url&gt;")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>