From 7e6441ff570f21d62937045a7366effe282323da Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 00:20:03 +0900 Subject: CSS_Images の各ファイルの .html → .md 変換 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/element()/index.html | 101 ---------------------------------- files/ja/web/css/element()/index.md | 101 ++++++++++++++++++++++++++++++++++ 2 files changed, 101 insertions(+), 101 deletions(-) delete mode 100644 files/ja/web/css/element()/index.html create mode 100644 files/ja/web/css/element()/index.md (limited to 'files/ja/web/css/element()') diff --git a/files/ja/web/css/element()/index.html b/files/ja/web/css/element()/index.html deleted file mode 100644 index d8922ccaeb..0000000000 --- a/files/ja/web/css/element()/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: element() -slug: Web/CSS/element() -tags: - - CSS - - CSS 関数 - - CSS4-images - - Reference - - ウェブ - - レイアウト -translation_of: Web/CSS/element() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の element() 関数は、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。

- -

特に便利な使い道は、 {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。

- -

Gecko ブラウザでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。

- -

構文

- -
element(id)
- -

where:

- -
-
id
-
背景として使う要素の ID です。要素の HTML 属性 #id に定義されているものです。
-
- -

例

- -

この例は -moz-element() に対応している Firefox で実動例を見ることができます。

- -

ある程度現実的な例

- -

この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。

- -
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
-  <p>This box uses the element with the #myBackground1 ID as its background!</p>
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
-  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
-  </div>
-</div>
- -

"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの、背景に使われています。

- -

example1.png

- -

ある程度とっぴな例

- -

この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。

- -
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <button id="myBackground2" type="button">Evil button!</button>
-</div>
-
- -

example2.png

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}CSS3 Images から延期
- -

ブラウザーの対応

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

関連情報

- - diff --git a/files/ja/web/css/element()/index.md b/files/ja/web/css/element()/index.md new file mode 100644 index 0000000000..d8922ccaeb --- /dev/null +++ b/files/ja/web/css/element()/index.md @@ -0,0 +1,101 @@ +--- +title: element() +slug: Web/CSS/element() +tags: + - CSS + - CSS 関数 + - CSS4-images + - Reference + - ウェブ + - レイアウト +translation_of: Web/CSS/element() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の element() 関数は、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。

+ +

特に便利な使い道は、 {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。

+ +

Gecko ブラウザでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。

+ +

構文

+ +
element(id)
+ +

where:

+ +
+
id
+
背景として使う要素の ID です。要素の HTML 属性 #id に定義されているものです。
+
+ +

例

+ +

この例は -moz-element() に対応している Firefox で実動例を見ることができます。

+ +

ある程度現実的な例

+ +

この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。

+ +
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
+ +

"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの、背景に使われています。

+ +

example1.png

+ +

ある程度とっぴな例

+ +

この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。

+ +
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
+ +

example2.png

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}CSS3 Images から延期
+ +

ブラウザーの対応

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

関連情報

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