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/orphaned/web/css/image-set()/index.html | 86 ----------------- files/ja/orphaned/web/css/paint()/index.html | 113 ----------------------- 2 files changed, 199 deletions(-) delete mode 100644 files/ja/orphaned/web/css/image-set()/index.html delete mode 100644 files/ja/orphaned/web/css/paint()/index.html (limited to 'files/ja/orphaned/web') 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")}}

- -

関連情報

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