diff options
| -rw-r--r-- | files/ja/web/css/_colon_defined/index.md | 96 |
1 files changed, 40 insertions, 56 deletions
diff --git a/files/ja/web/css/_colon_defined/index.md b/files/ja/web/css/_colon_defined/index.md index a3f4eec448..691cdc036e 100644 --- a/files/ja/web/css/_colon_defined/index.md +++ b/files/ja/web/css/_colon_defined/index.md @@ -1,31 +1,31 @@ --- title: ':defined' -slug: 'Web/CSS/:defined' +slug: Web/CSS/:defined tags: - CSS - - HTML - レイアウト - 擬似クラス - リファレンス - - ウェブ - セレクター - - 擬似クラス -translation_of: 'Web/CSS/:defined' + - ウェブ +browser-compat: css.selectors.defined +translation_of: Web/CSS/:defined --- {{ CSSRef }} -<span class="seoSummary">[CSS](/ja/docs/Web/CSS) の ``:defined`` [擬似クラス](/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes)は、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。</span> +**`:defined`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/CSS/Pseudo-classes)で、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。 -<pre class="brush: css no-line-numbers">/* 定義されたすべての要素を選択 */ +```css +/* 定義されたすべての要素を選択 */ :defined { - font-style: italic; + font-style: italic; } /* 特定の custom 要素のすべてのインスタンスを選択 */ simple-custom:defined { - display: block; + display: block; } -</pre> +``` ## 構文 @@ -33,9 +33,14 @@ simple-custom:defined { ## 例 -この最初の例は `<simple-custom>` [カスタム要素](/ja/docs/Web/Web_Components/Using_custom_elements)を定義するスクリプトを含んでいます。 +### 定義されるまで要素を非表示にする + +以下のスニペットは、 [defined-pseudo-class](https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class) のデモから取ったものです ([ライブでも参照してください](https://mdn.github.io/web-components-examples/defined-pseudo-class/)). + +このデモでは、非常にシンプルで些細なカスタム要素を定義しています。 -<pre class="brush: js">customElements.define('simple-custom', +```js +customElements.define('simple-custom', class extends HTMLElement { constructor() { super(); @@ -46,78 +51,57 @@ simple-custom:defined { let shadowRoot = this.attachShadow({mode: 'open'}) .appendChild(divElem); } -})</pre> +}) +``` -次に、 `<simple-custom>` 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。 +次に、この要素のコピーを、標準的な `<p>` と共に文書に挿入します。 -<pre class="brush: html"><simple-custom text="Custom element example text"></simple-custom> +```html +<simple-custom text="Custom element example text"></simple-custom> -<p>Standard paragraph example text</p></pre> +<p>Standard paragraph example text</p> +``` -それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 `:defined` セレクターを使用して定義された要素テキストをすべて斜体で表示します。 +CSS では、まず以下のルールを設定します。 -<pre class="brush: css">/* 2つの要素を背景で区別できるようにする */ +```css +/* 2 つの要素を背景で区別できるようにする */ p { background: yellow; } simple-custom { - display: block; background: cyan; } /* カスタム要素と組み込み要素を両方イタリック体にする */ :defined { font-style: italic; -}</pre> +} +``` -それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。 +それから、カスタム要素が定義されていないときには非表示にし、定義されていたらブロックレベル要素として定義して表示するという 2 つのルールを設定します。 -<pre class="brush: css">simple-custom:not(:defined) { - opacity: 0; +```css +simple-custom:not(:defined) { + display: none; } simple-custom:defined { - opacity: 0.75; - text-decoration: underline; -}</pre> + display: block; +} +``` これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。 -<h3 id="Result" name="Result">結果</h3> - -以上のコードを実行した結果は次の通りです。 +## 仕様書 -{{EmbedLiveSample('Examples')}} +{{Specifications}} -## 仕様書 +## ブラウザーの互換性 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 [https://github.com/mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) をチェックアウトしてプルリクエストを送信してください。 - -{{Compat("css.selectors.defined")}} +{{Compat}} ## 関連情報 - [ウェブコンポーネント](/ja/docs/Web/Web_Components) -- {{cssxref(":host")}} -- {{cssxref(":host()")}} -- {{cssxref(":host-context()")}} |