diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-05 09:56:16 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-14 23:10:22 +0900 |
commit | d30cae5555b0a7fd10c7d1059531e903fc4d2cc8 (patch) | |
tree | ccc26cccc513aa51f11393b6ec4223fee0a40115 /files/ja/web | |
parent | 8194b458fd09215b2f22e71eb9e5ade0f7639f0b (diff) | |
download | translated-content-d30cae5555b0a7fd10c7d1059531e903fc4d2cc8.tar.gz translated-content-d30cae5555b0a7fd10c7d1059531e903fc4d2cc8.tar.bz2 translated-content-d30cae5555b0a7fd10c7d1059531e903fc4d2cc8.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web')
-rw-r--r-- | files/ja/web/css/_colon_defined/index.md | 48 |
1 files changed, 23 insertions, 25 deletions
diff --git a/files/ja/web/css/_colon_defined/index.md b/files/ja/web/css/_colon_defined/index.md index 2c3884160d..a3f4eec448 100644 --- a/files/ja/web/css/_colon_defined/index.md +++ b/files/ja/web/css/_colon_defined/index.md @@ -4,17 +4,17 @@ slug: 'Web/CSS/:defined' tags: - CSS - HTML - - Layout - - Pseudo-class - - Reference - - Web + - レイアウト + - 擬似クラス + - リファレンス + - ウェブ - セレクター - 擬似クラス translation_of: 'Web/CSS/:defined' --- -<div>{{ CSSRef }}</div> +{{ CSSRef }} -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:defined</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>は、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。</span></p> +<span class="seoSummary">[CSS](/ja/docs/Web/CSS) の ``:defined`` [擬似クラス](/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes)は、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。</span> <pre class="brush: css no-line-numbers">/* 定義されたすべての要素を選択 */ :defined { @@ -27,13 +27,13 @@ simple-custom:defined { } </pre> -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p>この最初の例は <code><simple-custom></code> <a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素</a>を定義するスクリプトを含んでいます。</p> +この最初の例は `<simple-custom>` [カスタム要素](/ja/docs/Web/Web_Components/Using_custom_elements)を定義するスクリプトを含んでいます。 <pre class="brush: js">customElements.define('simple-custom', class extends HTMLElement { @@ -48,13 +48,13 @@ simple-custom:defined { } })</pre> -<p>次に、 <code><simple-custom></code> 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。</p> +次に、 `<simple-custom>` 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。 <pre class="brush: html"><simple-custom text="Custom element example text"></simple-custom> <p>Standard paragraph example text</p></pre> -<p>それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 <code>:defined</code> セレクターを使用して定義された要素テキストをすべて斜体で表示します。</p> +それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 `:defined` セレクターを使用して定義された要素テキストをすべて斜体で表示します。 <pre class="brush: css">/* 2つの要素を背景で区別できるようにする */ p { @@ -71,7 +71,7 @@ simple-custom { font-style: italic; }</pre> -<p>それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。</p> +それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。 <pre class="brush: css">simple-custom:not(:defined) { opacity: 0; @@ -82,15 +82,15 @@ simple-custom:defined { text-decoration: underline; }</pre> -<p>これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。</p> +これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。 <h3 id="Result" name="Result">結果</h3> -<p>以上のコードを実行した結果は次の通りです。</p> +以上のコードを実行した結果は次の通りです。 -<p>{{EmbedLiveSample('Examples')}}</p> +{{EmbedLiveSample('Examples')}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 <table class="standard-table"> <thead> @@ -111,15 +111,13 @@ simple-custom:defined { <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> -<p>このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> +このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 [https://github.com/mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) をチェックアウトしてプルリクエストを送信してください。 -<p>{{Compat("css.selectors.defined")}}</p> +{{Compat("css.selectors.defined")}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/Web_Components">ウェブコンポーネント</a></li> - <li>{{cssxref(":host")}}</li> - <li>{{cssxref(":host()")}}</li> - <li>{{cssxref(":host-context()")}}</li> -</ul> +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) +- {{cssxref(":host")}} +- {{cssxref(":host()")}} +- {{cssxref(":host-context()")}} |