diff options
Diffstat (limited to 'files/ja/web/css')
| -rw-r--r-- | files/ja/web/css/_colon_host/index.md | 110 |
1 files changed, 45 insertions, 65 deletions
diff --git a/files/ja/web/css/_colon_host/index.md b/files/ja/web/css/_colon_host/index.md index 661dccdaea..227804393c 100644 --- a/files/ja/web/css/_colon_host/index.md +++ b/files/ja/web/css/_colon_host/index.md @@ -1,56 +1,54 @@ --- title: ':host' -slug: 'Web/CSS/:host' +slug: Web/CSS/:host tags: - ':host' - CSS - DOM - - Layout - - Pseudo-class - - Reference - - Selector - - Web - - Web Components - - shadow - - shadow dom + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ - ウェブコンポーネント + - shadow - シャドウ DOM - - セレクター - - 擬似クラス -translation_of: 'Web/CSS/:host' +browser-compat: css.selectors.host +translation_of: Web/CSS/:host --- -<div>{{ CSSRef }}</div> +{{ CSSRef }} -<p><span class="seoSummary"><strong><code>:host</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、その CSS を含む<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。</span></p> +**`:host`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、その CSS を含む[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。 -<div class="note"> -<p><strong>注</strong>: これはシャドウ DOM の外で使われたときには効果がありません。</p> -</div> +> **Note:** これはシャドウ DOM の外で使われたときには効果がありません。 -<pre class="brush: css no-line-numbers notranslate">/* シャドウのルートホストを選択 */ +```css +/* シャドウのルートホストを選択 */ :host { font-weight: bold; } -</pre> +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="notranslate">:host -</pre> + :host -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Styling_the_shadow_host" name="Styling_the_shadow_host">シャドウホストのスタイル付け</h3> +### シャドウホストのスタイル付け -<p>以下のスニペットは、 <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">host セレクターの例</a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">ライブでも参照してください</a>) から取りました。</p> +以下のスニペットは、 [host セレクターの例](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([ライブでも参照してください](https://mdn.github.io/web-components-examples/host-selectors/)) から取りました。 -<p>この例では、テキストの周りを囲むことができる簡単なカスタム要素 — <code><context-span></code> — を使います。</p> +この例では、テキストの周りを囲むことができる簡単なカスタム要素 — `<context-span>` — を使います。 -<pre class="brush: html notranslate"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> +```html +<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1> +``` -<p>要素のコンストラクターの中で、 <code>style</code> および <code>span</code> 要素を作成し、 <code>span</code> の中をカスタム要素の中身で埋め、 <code>style</code> 要素をいくつかの CSS 規則で埋めます。</p> +要素のコンストラクターの中で、 `style` および `span` 要素を作成し、 `span` の中をカスタム要素の中身で埋め、 `style` 要素をいくつかの CSS ルールで埋めます。 -<pre class="brush: js notranslate">let style = document.createElement('style'); +```js +let style = document.createElement('style'); let span = document.createElement('span'); span.textContent = this.textContent; @@ -63,39 +61,21 @@ style.textContent = 'span:hover { text-decoration: underline; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + - ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre> - -<p><code>:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }</code> の規則は、文書中の <code><context-span></code> 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS Scope', '#host-selector', ':host') }}</td> - <td>{{ Spec2('CSS Scope') }}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.selectors.host")}}</p> -</div> - -<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-context()")}}</li> -</ul> + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; +``` + +`:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` のルールは、文書中の `<context-span>` 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) +- {{cssxref(":host()")}} +- {{cssxref(":host-context()")}} |