From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/image/index.html | 176 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/ja/web/css/image/index.html (limited to 'files/ja/web/css/image') diff --git a/files/ja/web/css/image/index.html b/files/ja/web/css/image/index.html new file mode 100644 index 0000000000..04758c43d3 --- /dev/null +++ b/files/ja/web/css/image/index.html @@ -0,0 +1,176 @@ +--- +title: +slug: Web/CSS/image +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/image +--- +

{{CSSRef}}

+ +

<image> は CSS のデータ型で、二次元の画像を表現します。

+ +

構文

+ +

<image> データ型は以下のいずれかによって表すことができます。

+ + + +

解説

+ +

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

+ + + +

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

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

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

+ + + +
注: すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細はブラウザーの互換性の節をご覧ください。
+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

+ + + +

例

+ +

有効な画像

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

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Images", "#typedef-image", "<image>")}}{{Spec2("CSS4 Images")}}Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, {{CSSxRef("image-resolution")}} を追加
{{SpecName("CSS3 Images", "#typedef-image", "<image>")}}{{Spec2("CSS3 Images")}}初回定義。これ以前は <image> データ型の明示的な定義はなし。画像は url() 関数記法でしか定義できなかった
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.image")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf