Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

CSS<image> データ型は、2 次元の画像を表現します。CSS では画像は 2 種類あります。URL を使って参照されることの多いごく普通の静的な画像と、グラデーションや木構造の一部分を表現するような動的に生成された画像です。

CSS はさまざま種類の画像を扱えます:

  • 自然なサイズである、固有の (intrinsic) 寸法のある画像。例えば jpeg 画像は決まった寸法を持っています。
  • 固有の寸法が複数ある画像。ファイル内に複数のバージョンを持っています。一部の .ico 形式が該当します。この場合、包含ボックスのものに最も近いアスペクト比を持つ、最大の画像の寸法が、固有の寸法として使われるでしょう。
  • 固有の寸法を持たないが、幅・高さの固有のアスペクト比のある画像。ベクター画像、例えば SVG 形式が該当します。
  • 固有の寸法がなく、固有のアスペクト比もない画像。例えば CSS のグラデーションです。

CSS は正しいオブジェクトサイズを、次の値から判断します。画像固有の寸法、CSS の widthheightbackground-size プロパティで定義された指定サイズ、画像を使うオブジェクトが定義するデフォルトのオブジェクトサイズ(以下):

オブジェクトの種類 デフォルトのオブジェクトサイズ
background-image 要素の background の置かれる領域のサイズ
list-style-image 1em の文字サイズ
border-image 要素のボーダー画像領域のサイズ
cursor ブラウザ定義のサイズのうち、使用システムのカーソルの、通常サイズにあうもの
置換コンテンツ。例えば CSS content プロパティと CSS 擬似要素 ::after::before の組み合わせ 300px × 150px の矩形

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

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

画像は非常にたくさんの CSS プロパティで使うことができます。例えば、background-imageborder-imagecontentlist-style-imagecursor などです。

注記: ブラウザによって、プロパティごとに使える画像の種類に制限があります。詳細は ブラウザ実装状況 をご覧ください。

構文

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

  • CSS の <uri> データ型と url() 関数で表される画像
  • CSS の <gradient>
  • element() 関数で定義される、ページの一部を画像化したもの

有効な <image> 値です:

url(test.jpg)                          url()関数。test.jpg が画像である限りは有効です
linear-gradient(to bottom, blue, red)  <gradient> データ型で示されたグラデーションです
element(#colonne3)                     element() 関数で画像化された、ページの一部です。
                                       colonne3 が そのページに実在する CSS id である限りは有効です

無効な <image> 値です:

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

仕様

仕様書 策定状況 コメント
CSS Image Values and Replaced Content Module Level 3
image() の定義
勧告候補 CSS3 以前には <image> データ型の明示的な定義はありませんでした。画像は url() 関数記法だけで定義できました

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
<uri> (有) (有) (有) (有) (有)
<gradient> (有)
以下に限定: background-image & background-moz
(有)-webkit IE 10-ms (有)-o (有)-webkit
element() 4.0 (2.0) では以下に限定: background-image & background-moz ? ? ? ?
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
<uri> (有) (有) (有) (有) (有)
<gradient> (有)
以下に限定: background-image & background-moz
? ? ? ?
element() 4.0 (2.0) では以下に限定: background-image & background-moz ? ? ? ?

関連情報

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

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