From d2a9c594e446e7592360c3ada8469fde590649f7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 00:15:25 +0900 Subject: その他の CSS 擬似クラスの記事を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_defined/index.html | 125 ----------------------------- files/ja/web/css/_colon_defined/index.md | 125 +++++++++++++++++++++++++++++ 2 files changed, 125 insertions(+), 125 deletions(-) delete mode 100644 files/ja/web/css/_colon_defined/index.html create mode 100644 files/ja/web/css/_colon_defined/index.md (limited to 'files/ja/web/css/_colon_defined') diff --git a/files/ja/web/css/_colon_defined/index.html b/files/ja/web/css/_colon_defined/index.html deleted file mode 100644 index 2e146cdd24..0000000000 --- a/files/ja/web/css/_colon_defined/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: ':defined' -slug: 'Web/CSS/:defined' -tags: - - CSS - - HTML - - Layout - - Pseudo-class - - Reference - - Web - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:defined' ---- -
{{ CSSRef }}
- -

CSS の :defined 疑似クラスは、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。

- -
/* 定義されたすべての要素を選択 */
-:defined {
-  font-style: italic;
-}
-
-/* 特定の custom 要素のすべてのインスタンスを選択 */
-simple-custom:defined {
-  display: block;
-}
-
- -

構文

- -{{csssyntax}} - -

例

- -

この最初の例は <simple-custom> カスタム要素を定義するスクリプトを含んでいます。

- -
customElements.define('simple-custom',
-  class extends HTMLElement {
-    constructor() {
-      super();
-
-      let divElem = document.createElement('div');
-      divElem.textContent = this.getAttribute('text');
-
-      let shadowRoot = this.attachShadow({mode: 'open'})
-        .appendChild(divElem);
-  }
-})
- -

次に、 <simple-custom> 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。

- -
<simple-custom text="Custom element example text"></simple-custom>
-
-<p>Standard paragraph example text</p>
- -

それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 :defined セレクターを使用して定義された要素テキストをすべて斜体で表示します。

- -
/* 2つの要素を背景で区別できるようにする */
-p {
-  background: yellow;
-}
-
-simple-custom {
-  display: block;
-  background: cyan;
-}
-
-/* カスタム要素と組み込み要素を両方イタリック体にする */
-:defined {
-  font-style: italic;
-}
- -

それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。

- -
simple-custom:not(:defined) {
-  opacity: 0;
-}
-
-simple-custom:defined {
-  opacity: 0.75;
-  text-decoration: underline;
-}
- -

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

- -

結果

- -

以上のコードを実行した結果は次の通りです。

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }} 
- -

ブラウザーの対応

- -

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

- -

{{Compat("css.selectors.defined")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_defined/index.md b/files/ja/web/css/_colon_defined/index.md new file mode 100644 index 0000000000..2c3884160d --- /dev/null +++ b/files/ja/web/css/_colon_defined/index.md @@ -0,0 +1,125 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - HTML + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:defined' +--- +
{{ CSSRef }}
+ +

CSS の :defined 擬似クラスは、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。

+ +
/* 定義されたすべての要素を選択 */
+:defined {
+  font-style: italic;
+}
+
+/* 特定の custom 要素のすべてのインスタンスを選択 */
+simple-custom:defined {
+  display: block;
+}
+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

この最初の例は <simple-custom> カスタム要素を定義するスクリプトを含んでいます。

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

次に、 <simple-custom> 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。

+ +
<simple-custom text="Custom element example text"></simple-custom>
+
+<p>Standard paragraph example text</p>
+ +

それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 :defined セレクターを使用して定義された要素テキストをすべて斜体で表示します。

+ +
/* 2つの要素を背景で区別できるようにする */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+/* カスタム要素と組み込み要素を両方イタリック体にする */
+:defined {
+  font-style: italic;
+}
+ +

それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。

+ +
simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}
+ +

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

+ +

結果

+ +

以上のコードを実行した結果は次の通りです。

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }} 
+ +

ブラウザーの対応

+ +

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

+ +

{{Compat("css.selectors.defined")}}

+ +

関連情報

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