CSS<image> データ型は、二次元の画像を表現します。画像には、 <url> で参照されるプレーンな画像と、 <gradient> または element で生成される動的生成画像とがあります。それ以外の CSS 画像関数には image(), image-set, cross-fade などがあります。画像は background-image, border-image, content, cursor, list-style-image のような様々な CSS プロパティで使用されます。

画像種別

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

  • JPEG や PNG やその他のラスタ形式など、固有の寸法 (intrinsic dimensions) (自然の寸法) を持つ画像。
  • 一部の .ico 形式のように、単一のファイルの中に複数のバージョンが存在する、複数の固有の寸法を持つ画像。 (この場合、固有の寸法は領域に収まる最も大きな画像であり、かつアスペクト比が包含ボックスに最も近いものになります。)
  • SVG またはその他のベクター形式のように、固有の寸法を持たないが、幅と高さの間に固有のアスペクト比のある画像。
  • CSS のグラデーションなど、固有の寸法がなく、固有のアスペクト比もない画像。

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

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

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

  • 指定された寸法に幅と高さの両方が定義されていれば、その値が実際の寸法に使われます。
  • 指定された寸法に幅と高さのどちらかのみが定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、既定のオブジェクトの寸法の値。
  • 指定された寸法が幅と高さを定義していないときは、画像固有のアスペクト比に一致し、既定のオブジェクトの寸法をどの方向にも超過しないような値が計算され、実際のオブジェクト寸法に使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さは既定のオブジェクトサイズからとられます。
メモ: すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細はブラウザーの対応の節をご覧ください。

構文

CSS の <image> データ型は、次のいずれかを表します。

  • <url> データ型で記述された画像
  • <gradient> データ型
  • element 関数で定義されたウェブページの一部
  • image() 関数で定義された画像、画像の一部、色の固定パッチ
  • cross-fade 関数で定義された二つ以上の画像の合成
  • image-set 関数で定義された解像度に基づいて選択された画像の選択

有効な画像

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

無効な画像

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) /* 画像セット内の画像はすべて異なる解像度でなければならない */

アクセシビリティの考慮事項

支援技術は背景画像を解釈できません。画像がページ全体の目的を理解するために必須の情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

仕様書

仕様書 状態 備考
CSS Images Module Level 4
<image> の定義
草案 Adds element(), image(), image-set, conic-gradient, repeating-conic-gradient(), image-resolution を追加
CSS Images Module Level 3
<image> の定義
勧告候補 初回定義。これ以前は <image> データ型の明示的な定義はなし。画像は url() 関数記法でしか定義できなかった

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
<gradient>Chrome 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 あり
補足
完全対応 あり
補足
補足 Gradients are limited to background-image, border-image, and mask-image.
IE 完全対応 10
接頭辞付き
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 あり
補足
完全対応 あり
補足
補足 Gradients are limited to background-image, border-image, and mask-image.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
conic-gradient()Chrome 完全対応 69
完全対応 69
完全対応 59
無効
無効 From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 56Safari ?
補足
?
補足
補足 In Safari Technology Preview Release 66
WebView Android 完全対応 69
完全対応 69
完全対応 59
無効
無効 From version 59: this feature is behind the Enable Experimental Web Platform Features preference.
Chrome Android 完全対応 69
完全対応 69
完全対応 59
無効
無効 From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 完全対応 56Safari iOS ?
補足
?
補足
補足 In Safari Technology Preview Release 66
Samsung Internet Android 未対応 なし
element()
実験的
Chrome 未対応 なしEdge ? Firefox 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 element() is limited to background-image and background.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 element() is limited to background-image and background.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
image()
実験的
Chrome ? Edge ? Firefox ?
補足
?
補足
補足 The -moz-image-rect() function supports fragments as of Firefox 4.
IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ?
補足
?
補足
補足 The -moz-image-rect() function supports fragments as of Firefox 4.
Opera Android ? Safari iOS ? Samsung Internet Android ?
image-set()
実験的
Chrome 完全対応 21
接頭辞付き
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1107646.
IE ? Opera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 部分対応 6
接頭辞付き 補足
部分対応 6
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android 完全対応 4.4
接頭辞付き
完全対応 4.4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1107646.
Opera Android 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 部分対応 6
接頭辞付き 補足
部分対応 6
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android 完全対応 4.0
接頭辞付き
完全対応 4.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
cross-fade()
実験的
Chrome 完全対応 17
接頭辞付き 補足
完全対応 17
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Edge ? Firefox ? IE 未対応 なしOpera 完全対応 15
接頭辞付き 補足
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Safari 完全対応 10
補足
完全対応 10
補足
補足 Supports the original dual-image with percentage implementation only.
完全対応 5.1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
WebView Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Chrome Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Edge Mobile ? Firefox Android ? Opera Android 完全対応 15
接頭辞付き 補足
完全対応 15
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Safari iOS 完全対応 9.3
補足
完全対応 9.3
補足
補足 Support for the original dual-image with percentage implementation only.
完全対応 5
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Supports the original dual-image with percentage implementation only.
Samsung Internet Android 完全対応 あり
接頭辞付き 補足
完全対応 あり
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Support for the original dual-image with percentage implementation only.

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

最終更新者: mdnwebdocs-bot,