CSS<image> データ型は、二次元の画像を表現します。画像には、 <url> で参照されるプレーンな画像と、 <gradient> または element() で生成される動的生成画像とがあります。画像は 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) 画像が使用されるプロパティの種類によって指定された、以下のような既定の寸法によって特定します。

オブジェクトの種類 既定のオブジェクトの寸法
background-image 要素の background の置かれる領域の寸法
list-style-image 1em の文字の寸法
border-image 要素の境界画像領域の寸法
cursor クライアントのシステムにおける通常のカーソルの寸法に合うブラウザーが定義した寸法
border-image-source ?
mask-image ?
shape-outside ?
mask-border-source ?
content と疑似要素 (::after または ::before) を組み合わせた場合の置換コンテンツ 300px × 150px の矩形

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

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

構文

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

  • <url> データ型で記述された画像
  • <gradient> データ型
  • element() 関数で定義されたウェブページの一部

有効な画像

url(test.jpg)               /* <url>、但し test.jpg は実在する画像 */
linear-gradient(blue, red)  /* <gradient> */
element(#realid)            /* element() 関数で参照されるウェブページの一部、
                               ページ上に "realid" が実在する ID である場合 */

無効な <image> 値です。

cervin.jpg        /* 画像ファイルは url() 関数を使って定義する必要があります。 */
url(report.pdf)   /* url() 関数に渡すファイルは画像でなければなりません */
element(#fakeid)  /* fakeid が、そのページに実在しない CSS id である場合 */

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

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

仕様書

仕様書 状態 備考
CSS Images Module Level 4
<image> の定義
草案 element(), image(),  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 ?
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 未対応 なし

凡例

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

関連情報

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

このページの貢献者: mfuji09, SphinxKnight, slayslot, mrstork, fscholz, ethertank, sosleepy
最終更新者: mfuji09,