From 511fbcfed2365d74a99a8b14e329c86078d960e7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 14 Aug 2021 02:27:23 +0900 Subject: CSS image 配下の関数を整備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - orphaned/Web/CSS/image-set() を Web/CSS/image/image-set() へ移動 - orphaned/Web/CSS/paint() を Web/CSS/image/paint() へ移動 - Web/CSS/image 以下を Markdown 化し 2021/08/13 時点の英語版に同期 --- files/ja/_redirects.txt | 8 +- files/ja/_wikihistory.json | 28 ++-- files/ja/orphaned/web/css/image-set()/index.html | 86 ----------- files/ja/orphaned/web/css/paint()/index.html | 113 --------------- files/ja/web/css/image/image()/index.md | 155 ++++++++++++++++++++ files/ja/web/css/image/image-set()/index.md | 93 ++++++++++++ files/ja/web/css/image/index.html | 174 ----------------------- files/ja/web/css/image/index.md | 114 +++++++++++++++ files/ja/web/css/image/paint()/index.md | 103 ++++++++++++++ 9 files changed, 483 insertions(+), 391 deletions(-) delete mode 100644 files/ja/orphaned/web/css/image-set()/index.html delete mode 100644 files/ja/orphaned/web/css/paint()/index.html create mode 100644 files/ja/web/css/image/image()/index.md create mode 100644 files/ja/web/css/image/image-set()/index.md delete mode 100644 files/ja/web/css/image/index.html create mode 100644 files/ja/web/css/image/index.md create mode 100644 files/ja/web/css/image/paint()/index.md (limited to 'files') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 35c4e4acda..7f7c33f788 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3724,8 +3724,8 @@ /ja/docs/Web/CSS/grid-column-gap /ja/docs/Web/CSS/column-gap /ja/docs/Web/CSS/grid-gap /ja/docs/Web/CSS/gap /ja/docs/Web/CSS/grid-row-gap /ja/docs/Web/CSS/row-gap -/ja/docs/Web/CSS/image-set /ja/docs/orphaned/Web/CSS/image-set() -/ja/docs/Web/CSS/image-set() /ja/docs/orphaned/Web/CSS/image-set() +/ja/docs/Web/CSS/image-set /ja/docs/Web/CSS/image/image-set() +/ja/docs/Web/CSS/image-set() /ja/docs/Web/CSS/image/image-set() /ja/docs/Web/CSS/linear-gradient /ja/docs/orphaned/Web/CSS/linear-gradient() /ja/docs/Web/CSS/linear-gradient() /ja/docs/orphaned/Web/CSS/linear-gradient() /ja/docs/Web/CSS/margin-new /ja/docs/Web/CSS/margin @@ -3734,8 +3734,8 @@ /ja/docs/Web/CSS/min /ja/docs/Web/CSS/min() /ja/docs/Web/CSS/minmax /ja/docs/Web/CSS/minmax() /ja/docs/Web/CSS/normal /ja/docs/Web/CSS/font-variant -/ja/docs/Web/CSS/paint /ja/docs/orphaned/Web/CSS/paint() -/ja/docs/Web/CSS/paint() /ja/docs/orphaned/Web/CSS/paint() +/ja/docs/Web/CSS/paint /ja/docs/Web/CSS/image/paint() +/ja/docs/Web/CSS/paint() /ja/docs/Web/CSS/image/paint() /ja/docs/Web/CSS/radial-gradient /ja/docs/orphaned/Web/CSS/radial-gradient() /ja/docs/Web/CSS/radial-gradient() /ja/docs/orphaned/Web/CSS/radial-gradient() /ja/docs/Web/CSS/repeat /ja/docs/Web/CSS/repeat() diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 243b94cab0..dd48a5234c 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -31311,6 +31311,20 @@ "sosleepy" ] }, + "Web/CSS/image/image-set()": { + "modified": "2020-11-16T08:53:38.885Z", + "contributors": [ + "chrisdavidmills", + "mfuji09" + ] + }, + "Web/CSS/image/paint()": { + "modified": "2020-11-16T09:09:19.836Z", + "contributors": [ + "chrisdavidmills", + "mfuji09" + ] + }, "Web/CSS/image-orientation": { "modified": "2020-10-15T21:46:42.965Z", "contributors": [ @@ -49487,13 +49501,6 @@ "mfuji09" ] }, - "orphaned/Web/CSS/image-set()": { - "modified": "2020-11-16T08:53:38.885Z", - "contributors": [ - "chrisdavidmills", - "mfuji09" - ] - }, "orphaned/Web/CSS/linear-gradient()": { "modified": "2020-11-16T08:57:22.063Z", "contributors": [ @@ -49511,13 +49518,6 @@ "FredB" ] }, - "orphaned/Web/CSS/paint()": { - "modified": "2020-11-16T09:09:19.836Z", - "contributors": [ - "chrisdavidmills", - "mfuji09" - ] - }, "orphaned/Web/CSS/radial-gradient()": { "modified": "2020-11-18T14:42:27.892Z", "contributors": [ diff --git a/files/ja/orphaned/web/css/image-set()/index.html b/files/ja/orphaned/web/css/image-set()/index.html deleted file mode 100644 index 1e8e370e2a..0000000000 --- a/files/ja/orphaned/web/css/image-set()/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: image-set() -slug: orphaned/Web/CSS/image-set() -tags: - - CSS - - CSS Function - - CSS-4 Images - - Function - - Reference - - Web -translation_of: Web/CSS/image-set() -original_slug: Web/CSS/image-set() ---- -
{{cssref}}
- -

image-set() は CSS の関数表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。

- -

解像度と帯域は端末やネットワークアクセスによって様々です。 image-set() 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。

- -

image-set() はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。

- -

構文

- -
image-set() = image-set( <image-set-option># )
-where <image-set-option> = [ <image> | <string> ] <resolution> and
-      <string> is an <url>
-
- -

値

- -

もっともよく見かけるのは url() または <string> 値ですが、 <image> は画像セット以外のあらゆる画像型を取ることができます。 image-set() 関数は他の image-set() 関数の中に入れることはできません。

- -

<resolution> の単位には、ピクセル当たりのドット数を表す x または dppx、インチ当たりのドット数を表す dpi、センチメートル当たりのドット数を表す dpcm があります。 image-set() の中の画像はすべて、固有の解像度が必要です。

- -

例

- -

image-set() を使用して代替の background-image オプションを提供する

- -
background-image: image-set( "cat.png" 1x,
-                             "cat-2x.png" 2x,
-                             "cat-print.png" 600dpi);
- -

この例は image-set() の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。

- -

アクセシビリティの考慮

- -

ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/orphaned/web/css/paint()/index.html b/files/ja/orphaned/web/css/paint()/index.html deleted file mode 100644 index 9f29cb31e3..0000000000 --- a/files/ja/orphaned/web/css/paint()/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: paint() -slug: orphaned/Web/CSS/paint() -tags: - - CSS - - CSS Function - - CSS 関数 - - CSS4-images - - Houdini - - Reference - - Web - - ウェブ -translation_of: Web/CSS/paint() -original_slug: Web/CSS/paint() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

paint() は CSS の関数で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。

- -

構文

- -
paint(workletName, parameters)
- -

凡例

- -
-
workletName
-
登録された Worklet の名前です。
-
parameters
-
PaintWorklet へ渡される省略可能な追加の引数です。
-
- -

例

- -

CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。

- - - - - -
li {
-   --boxColor: hsla(55, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, stroke, 2px);
-}
-
-li:nth-of-type(3n) {
-   --boxColor: hsla(155, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, filled,  3px);
-}
-
-li:nth-of-type(3n+1) {
-   --boxColor: hsla(255, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, stroke, 1px);
-}
- -

boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。

- -

{{EmbedLiveSample("Examples", 300, 300)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}{{Spec2('CSS Painting API')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/image/image()/index.md b/files/ja/web/css/image/image()/index.md new file mode 100644 index 0000000000..e550541331 --- /dev/null +++ b/files/ja/web/css/image/image()/index.md @@ -0,0 +1,155 @@ +--- +title: image() +slug: Web/CSS/image/image() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Reference + - Web +browser-compat: css.types.image.image +translation_of: Web/CSS/image/image() +--- +{{CSSRef}} + +The **`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 + +> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", 'HTMLImageElement のコンストラクターである Image()', '', 1)}} と混同しないでください。 + +## 構文 + +{{CSSSyntax("image()")}} + +ここで + +- `image-tags`{{Optional_Inline}} + - : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。 +- `image-src` {{Optional_Inline}} + - : 0 個以上の {{CSSxRef("url()")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。 +- `color`{{Optional_Inline}} + - : 色であり、 `image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。 + +### 書字方向の認識 + +`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。 + +### 画像フラグメント + +`url()` と `image()` の大きな違いは、メディアフラグメント識別子 (開始点の x 軸と y 軸、幅と高さ) を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。 + +```css +background-image: image('myimage.webp#xywh=0,20,40,60'); +``` + +要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。 + + +`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。[メディア仕様書の spacial dimension definition](https://www.w3.org/TR/media-frags/#naming-space) によると、パーセント値にも対応しています。 + +```css +xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ +``` + +イメージフラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。 + +`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。 + +### 色による代替 + +`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。 + +画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。 + +色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。 + +## 例 + +

書字方向を意識した画像

+ +```html + +``` + +```css +ul { + list-style-image: image(ltr 'rightarrow.png'); +} +``` + +左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `
  • ` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scalex(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。 + +{{EmbedLiveSample("Directionally-sensitive_images", "100%", 200)}} + +

    背景画像のある範囲の表示

    + +```html +
    この上にカーソルを移動してください。どのように見えますか？
    +``` + +```css +.box:hover { + cursor: image("sprite.png#xywh=32,64,16,16"); +} +``` + +ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。 + +{{EmbedLiveSample("Displaying_a_section_of_the_background_image", "100%", 100)}} + +

    背景画像の上に色を配置

    + +```css hidden +.quarterlogo {height: 200px; width: 200px; border: 1px solid;} +``` + +```css +.quarterlogo { + background-image: + image(rgba(0, 0, 0, 0.25)), + url("firefox.png"); + background-size: 25%; + background-repeat: no-repeat; +} +``` + +```html + +``` + +上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 {{cssxref("background-color")}} プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と {{CSSxRef("background-size")}} プロパティを使用し、 {{CSSxRef("background-repeat")}} プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。 + +{{EmbedLiveSample("Putting_color_on_top_of_a_background_image", "100%", 220)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## See also + +- {{CSSxRef("<image>")}} +- {{CSSxRef("element()")}} +- {{CSSxRef("url()")}} +- {{CSSxRef("clip-path")}} +- {{CSSxRef("-moz-image-rect")}} +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("image/image-set()")}} +- {{CSSxRef("cross-fade()")}} diff --git a/files/ja/web/css/image/image-set()/index.md b/files/ja/web/css/image/image-set()/index.md new file mode 100644 index 0000000000..8fbb72453c --- /dev/null +++ b/files/ja/web/css/image/image-set()/index.md @@ -0,0 +1,93 @@ +--- +title: image-set() +slug: Web/CSS/image/image-set() +tags: + - CSS + - CSS Function + - CSS-4 Images + - Function + - Reference + - Web +browser-compat: css.types.image.image-set +translation_of: Web/CSS/image/image-set() +original_slug: Web/CSS/image-set() +--- +{{cssref}} + +**`image-set()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。 + +解像度と帯域は端末やネットワークアクセスによって様々です。 `image-set()` 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシーとして使用することができます。 — 高解像度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。 + +`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。 + +## 構文 + +```css +image-set() = image-set( # ) +where = [ | ] and + is an +``` + +### 値 + +- `` + - : [``](/ja/docs/Web/CSS/image) は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。 +- `` + - : 画像への `url()` です。 +- ``{{optional_inline}} + - : [``](/ja/docs/Web/CSS/resolution) の単位には、 `x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像すべて、解像度が固有でなければなりません。 +- `type()`{{optional_inline}} + - : 有効な MIME タイプの文字列、例えば "image/jpeg" です。 + +## 例 + +### image-set() を使用して代替の background-image オプションの提供 + +この例は [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) を使用して 2 つの代替 {{cssxref("background-image")}} オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。 + +{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}} + +> **Note:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。 + +### image-set() を使用して別な画像形式を提供 + +次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。 + +{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}} + +#### 代替画像の提供 + +`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 `image-set()` を使用する行の前に別の宣言が必要です。 + +```css +.box { + background-image: url("large-balloons.jpg"); + background-image: image-set( + url("large-balloons.avif") type("image/avif"), + url("large-balloons.jpg") type("image/jpeg")); +} +``` + +## アクセシビリティの考慮 + +

    ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

    + +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("element()")}} +- {{cssxref("url()")}} +- {{cssxref("<gradient>")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/index.html b/files/ja/web/css/image/index.html deleted file mode 100644 index a719ebf3e6..0000000000 --- a/files/ja/web/css/image/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -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> データ型は以下のいずれかによって表すことができます。

    - -
      -
    • {{CSSxRef("<url>")}} データ型で記述された画像
      • -
    • {{CSSxRef("<gradient>")}} データ型
      • -
    • {{CSSxRef("element")}} 関数で定義されたウェブページの一部
      • -
    • {{CSSxRef("image()")}} 関数で定義された画像、画像フラグメント、単色の色
      • -
    • {{CSSxRef("cross-fade")}} 関数で定義された2つ以上の画像の合成
      • -
    • {{CSSxRef("image-set")}} 関数で定義された、解像度に基づいて定義された画像の選択
      • -
    - -

    解説

    - -

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

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

    - -

    関連情報

    - -
      -
    • {{CSSxRef("<gradient>")}}
      • -
    • {{CSSxRef("element")}}
      • -
    • {{CSSxRef("imagefunction", "image()")}}
      • -
    • {{CSSxRef("image-set")}}
      • -
    • {{CSSxRef("cross-fade")}}
      • -
    diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md new file mode 100644 index 0000000000..26c1d0939c --- /dev/null +++ b/files/ja/web/css/image/index.md @@ -0,0 +1,114 @@ +--- +title: +slug: Web/CSS/image +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image +translation_of: Web/CSS/image +--- +{{CSSRef}} + +**``** は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types)で、二次元の画像を表現します。 + +## 構文 + +`` データ型は以下のいずれかによって表すことができます。 + +- {{CSSxRef("url()", "url()")}} データ型で記述された画像 +- {{CSSxRef("")}} データ型 +- {{CSSxRef("element()","element()")}} 関数で定義されたウェブページの一部 +- {{CSSxRef("image/image()","image()")}} 関数で定義された画像、画像フラグメント、単色の色 +- {{CSSxRef("cross-fade()","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成 +- {{CSSxRef("image/image-set()","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択 + +## 解説 + +CSS はさまざま種類の画像を扱うことができます。 + +- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、*自身の寸法* (自然の寸法) を持つ画像。 +- 単一のファイルの中に複数のバージョンが存在する、*複数の自身の寸法*を持つ画像。 (この場合、自身の寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。) +- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、自身の寸法を持たないが、幅と高さの間に自身の縦横比のある画像。 +- CSS グラデーションなど、*自身の寸法がなく、固有の縦横比もない*画像。 + + +CSS はオブジェクトの*実際の*寸法を、 (1) *自身の寸法*、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。 + +| オブジェクトの種類 (CSS プロパティ) | 既定のオブジェクトの寸法 | +| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| {{CSSxRef("background-image")}} | 要素の背景が配置される領域の寸法 | +| {{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 の矩形 | + +正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。 + +- 指定された寸法に*幅と高さの両方*が定義されている場合は、その値が実際の寸法に使われます。 +- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像自身の寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。 +- 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。 + +> **Note:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +### 有効な画像 + +```css example-good +url(test.jpg) /* 、但し test.jpg は実在する画像 */ +linear-gradient(blue, red) /* */ +element(#realid) /* element() 関数で参照されるウェブページの一部、 + ページ上に "realid" が実在する ID である場合 */ +image(ltr 'arrow.png#xywh=0,0,16,16', red) + /* arrow.png が対応している画像であれば、 の元画像の + 左上から 16x16 を選択し、そうでなければ赤一色の見本になります。 + 言語が右書きの場合は、画像は水平方向に反転します。 */ +cross-fade(20% url(twenty.png), url(eighty.png)) + /* 多重露光の画像で、 twenty が 20% の露光で、 + eighty が 80% の露光になる */ +image-set('test.jpg' 1x, 'test-2x.jpg' 2x) + /* 様々な解像度による画像の選択 */ +``` + +### 無効な画像 + +```css example-bad +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) /* 画像セット内の画像はすべて異なる解像度でなければならない */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("element()","element()")}} +- {{CSSxRef("image/image()", "image()")}} +- {{CSSxRef("image/image-set()","image-set()")}} +- {{CSSxRef("cross-fade()","cross-fade()")}} diff --git a/files/ja/web/css/image/paint()/index.md b/files/ja/web/css/image/paint()/index.md new file mode 100644 index 0000000000..78368413bd --- /dev/null +++ b/files/ja/web/css/image/paint()/index.md @@ -0,0 +1,103 @@ +--- +title: paint() +slug: Web/CSS/image/paint() +tags: + - CSS + - CSS Function + - CSS4-images + - Function + - Houdini + - Reference + - Web +browser-compat: css.types.image.paint +translation_of: Web/CSS/image/paint() +original_slug: Web/CSS/paint() +--- +{{CSSRef}}{{SeeCompatTable}} + +**`paint()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。 + +## 構文 + +```css +paint(workletName, parameters) +``` + +凡例 + +- _workletName_ + - : 登録された Worklet の名前です。 +- _parameters_ + - : PaintWorklet へ渡される省略可能な追加の引数です。 + +## 例 + +

    基本的な使用例

    + +CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。 + +```html hidden +
      +    
    • item 1
      • +    
    • item 2
      • +    
    • item 3
      • +    
    • item 4
      • +    
    • item 5
      • +    
    • item 6
      • +    
    • item 7
      • +    
    • item 8
      • +    
    • item 9
      • +    
    • item 10
      • +    
    • item 11
      • +    
    • item 12
      • +    
    • item 13
      • +    
    • item 14
      • +    
    • item 15
      • +    
    • item 16
      • +    
    • item 17
      • +    
    • item 18
      • +    
    • item 19
      • +    
    • item 20
      • +
    +``` + +```js hidden + CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); +``` + +```css +li { + --boxColor: hsla(55, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 2px); +} + +li:nth-of-type(3n) { + --boxColor: hsla(155, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, filled, 3px); +} + +li:nth-of-type(3n+1) { + --boxColor: hsla(255, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 1px); +} +``` + +boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。 + +{{EmbedLiveSample("Basic_usage_example", 300, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref('PaintWorklet')}} +- {{domxref('CSS Painting API')}} +- [CSS Painting API の使用](/ja/docs/Web/API/CSS_Painting_API/Guide) +- {{cssxref("<image>")}} +- {{domxref("canvas")}} -- cgit v1.2.3-54-g00ecf