diff options
Diffstat (limited to 'files/ja/web/css/_doublecolon_part/index.html')
| -rw-r--r-- | files/ja/web/css/_doublecolon_part/index.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/files/ja/web/css/_doublecolon_part/index.html b/files/ja/web/css/_doublecolon_part/index.html new file mode 100644 index 0000000000..f4af2fa823 --- /dev/null +++ b/files/ja/web/css/_doublecolon_part/index.html @@ -0,0 +1,128 @@ +--- +title: '::part()' +slug: 'Web/CSS/::part' +tags: + - '::part' + - CSS + - Draft + - Experimental + - NeedsBrowserCompatibility + - NeedsExample + - Pseudo-element + - Reference + - Selector + - セレクター + - 擬似要素 +translation_of: 'Web/CSS/::part' +--- +<div>{{CSSRef}}</div> + +<p><strong><code>::part</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、一致する {{HTMLAttrxRef("part")}} 属性を持つ<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウツリー</a>内の要素を表します。</p> + +<pre class="brush: css no-line-numbers notranslate">custom-element::part(foo) { + /* Styles to apply to the `foo` part */ +} +</pre> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><template id="tabbed-custom-element"> +<style type="text/css"> +*, ::before, ::after { + box-sizing: border-box; + padding: 1rem; +} +:host { + display: flex; +} +</style> +<div part="tab active">Tab 1</div> +<div part="tab">Tab 2</div> +<div part="tab">Tab 3</div> +</template> + +<tabbed-custom-element></tabbed-custom-element></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">tabbed-custom-element::part(tab) { + color: #0c0c0dcc; + border-bottom: transparent solid 2px; +} + +tabbed-custom-element::part(tab):hover { + background-color: #0c0c0d19; + border-color: #0c0c0d33; +} + +tabbed-custom-element::part(tab):hover:active { + background-color: #0c0c0d33; +} + +tabbed-custom-element::part(tab):focus { + box-shadow: + 0 0 0 1px #0a84ff inset, + 0 0 0 1px #0a84ff, + 0 0 0 4px rgba(10, 132, 255, 0.3); +} + +tabbed-custom-element::part(active) { + color: #0060df; + border-color: #0a84ff !important; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">let template = document.querySelector("#tabbed-custom-element"); +globalThis.customElements.define(template.id, class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.appendChild(template.content); + } +}); +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Examples')}}</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 Shadow Parts", "#part", "::part")}}</td> + <td>{{Spec2("CSS Shadow Parts")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.selectors.part")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLAttrxRef("part")}} 属性 - <code>::part()</code> セレクタで選択できるパーツを定義するために使用されます</li> + <li>{{HTMLAttrxRef("exportparts")}} 属性 - ネストされたシャドウツリーにシャドウパーツを推移的にエクスポートするために使用されます。</li> + <li><a href="https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md">Explainer: CSS Shadow ::part and ::theme</a></li> +</ul> |