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/element()/index.html | 103 ++++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 files/ja/web/css/element()/index.html (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 new file mode 100644 index 0000000000..3eddb0dbbf --- /dev/null +++ b/files/ja/web/css/element()/index.html @@ -0,0 +1,103 @@ +--- +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