Add interactive example URLs (#17400)

* Add interactive example URLs

* revert commit because it was fixed in another commit

* revert commit because it was fixed in another commit

files/ja/web/css/@media/index.md

@@ -9,6 +9,8 @@ slug: Web/CSS/@media
 
 > **メモ:** JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。
 
+{{EmbedInteractiveExample("pages/tabbed/at-rule-media.html", "tabbed-standard")}}
+
 ## 構文
 
 `@media` アットルールは、コードの最上位に配置したり、他の[条件付きグループアットルール](/ja/docs/Web/CSS/At-rule#条件付きグループルール)の中に入れ子にして配置したりすることができます。

files/ja/web/css/@namespace/index.md

@@ -8,6 +8,8 @@ slug: Web/CSS/@namespace
 **`@namespace`** は[アットルール](/ja/docs/Web/CSS/At-rule)で、
 [CSS](/ja/docs/Glossary/CSS) [スタイルシート](/ja/docs/Web/API/StyleSheet) で使用する [XML 名前空間](/ja/docs/Namespaces)を定義します。
 
+{{EmbedInteractiveExample("pages/tabbed/at-rule-namespace.html", "tabbed-shorter")}}
+
 ## 構文
 
 ```css

files/ja/web/css/@supports/index.md

@@ -23,6 +23,8 @@ slug: Web/CSS/@supports
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/at-rule-supports.html", "tabbed-standard")}}
+
 JavaScript では `@supports` は CSS オブジェクトモデルインターフェイスの {{DOMxRef("CSSSupportsRule")}} からアクセスできます。
 
 ## 構文

files/ja/web/css/_colon_any-link/index.md

@@ -14,6 +14,8 @@ slug: Web/CSS/:any-link
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-any-link.html", "tabbed-shorter")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_autofill/index.md

@@ -7,6 +7,8 @@ slug: Web/CSS/:autofill
 
 **`:autofill`** は CSS の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完された時に一致します。このクラスはユーザーがフィールドを編集すると一致しなくなります。
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-autofill.html", "tabbed-shorter")}}
+
 > **メモ:** 多くのブラウザーのユーザーエージェントスタイルシートでは、 `:-webkit-autofill` スタイル定義に `!important` を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。例えば、 Chrome では内部スタイルシートで次のようになっています。
 >
 > ```css

files/ja/web/css/_colon_checked/index.md

@@ -15,6 +15,8 @@ slug: Web/CSS/:checked
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-checked.html", "tabbed-shorter")}}
+
 ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。
 
 > **メモ:** ブラウザーは `<option>` を[置換要素](/ja/docs/Web/CSS/Replaced_element)として扱うことが多いので、 `:checked` 擬似クラスでスタイルが適用される部分の大きさはブラウザーによって異なります。

files/ja/web/css/_colon_default/index.md

@@ -7,6 +7,8 @@ slug: Web/CSS/:default
 
 **`:default`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-default.html", "tabbed-shorter")}}
+
 このセレクターが何に一致するかについては、 [HTML Standard §4.16.3 Pseudo-classes](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default) で定義されています。 — {{htmlelement("button")}}、[`<input type="checkbox">`](/ja/docs/Web/HTML/Element/input/checkbox)、[`<input type="radio">`](/ja/docs/Web/HTML/Element/input/radio)、{{htmlelement("option")}} 要素に一致させることができます。
 
 - 既定の option 要素は `selected` 属性が付いた最初のもの、または DOM 順で最初の有効な選択肢です。 `multiple` が付いた {{htmlelement("select")}} は、複数の `selected` がついた選択肢を持つことができますので、すべてが `:default` に一致します。

files/ja/web/css/_colon_disabled/index.md

@@ -14,6 +14,8 @@ input:disabled {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-disabled.html", "tabbed-standard")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_enabled/index.md

@@ -14,6 +14,8 @@ input:enabled {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-enabled.html", "tabbed-standard")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_first-child/index.md

@@ -15,6 +15,8 @@ p:first-child {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-first-child.html", "tabbed-shorter")}}
+
 > **メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文

files/ja/web/css/_colon_first-of-type/index.md

@@ -14,6 +14,8 @@ p:first-of-type {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-first-of-type.html", "tabbed-shorter")}}
+
 > **メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文

files/ja/web/css/_colon_focus-visible/index.md

@@ -9,6 +9,8 @@ slug: Web/CSS/:focus-visible
 
 このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-focus-visible.html", "tabbed-shorter")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_focus-within/index.md

@@ -14,6 +14,8 @@ div:focus-within {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-focus-within.html", "tabbed-shorter")}}
+
 このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} 全体を強調する場合に便利です。
 
 ## 構文

files/ja/web/css/_colon_focus/index.md

@@ -14,6 +14,8 @@ input:focus {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-focus.html", "tabbed-shorter")}}
+
 > **メモ:** この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を*含む*要素を選択したい場合は、{{CSSxRef(":focus-within")}} を使用してください。
 
 ## 構文

files/ja/web/css/_colon_host/index.md

@@ -16,6 +16,8 @@ slug: Web/CSS/:host
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host.html", "tabbed-shorter")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_host_function/index.md

@@ -19,6 +19,8 @@ slug: Web/CSS/:host_function
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-host_function.html", "tabbed-shorter")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_in-range/index.md

@@ -15,6 +15,8 @@ input:in-range {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-in-range.html", "tabbed-shorter")}}
+
 この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。
 
 > **メモ:** この擬似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。

files/ja/web/css/_colon_invalid/index.md

@@ -14,6 +14,8 @@ input:invalid {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-invalid.html", "tabbed-shorter")}}
+
 この擬似クラスは、フィールドのエラーをユーザーに強調表示するのに便利です。
 
 ## 構文

files/ja/web/css/_colon_lang/index.md

@@ -14,6 +14,8 @@ p:lang(en) {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-function-lang.html", "tabbed-shorter")}}
+
 > **メモ:** HTML では、言語は [`lang`](/ja/docs/Web/HTML/Global_attributes#lang) 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。
 
 ## 構文

files/ja/web/css/_colon_last-child/index.md

@@ -15,6 +15,8 @@ p:last-child {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-last-child.html", "tabbed-shorter")}}
+
 > **メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文

files/ja/web/css/_colon_last-of-type/index.md

@@ -14,6 +14,8 @@ p:last-of-type {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-last-of-type.html", "tabbed-shorter")}}
+
 > **メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文

files/ja/web/css/_colon_nth-child/index.md

@@ -19,6 +19,8 @@ li:nth-child(2) {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-child.html", "tabbed-shorter")}}
+
 ## 構文
 
 `:nth-child()` 擬似クラスは、引数を 1 つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は 1 から始まります。

files/ja/web/css/_colon_nth-last-child/index.md

@@ -15,6 +15,8 @@ slug: Web/CSS/:nth-last-child
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-last-child.html", "tabbed-shorter")}}
+
 > **メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。
 
 ## 構文

files/ja/web/css/_colon_nth-last-of-type/index.md

@@ -15,6 +15,8 @@ p:nth-last-of-type(4n) {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-last-of-type.html", "tabbed-shorter")}}
+
 > **メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。
 
 ## 構文

files/ja/web/css/_colon_nth-of-type/index.md

@@ -15,6 +15,8 @@ p:nth-of-type(4n) {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-of-type.html", "tabbed-shorter")}}
+
 ## 構文
 
 `nth-of-type` 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。

files/ja/web/css/_colon_only-child/index.md

@@ -14,6 +14,8 @@ p:only-child {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-child.html", "tabbed-shorter")}}
+
 > **メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文

files/ja/web/css/_colon_only-of-type/index.md

@@ -14,6 +14,8 @@ p:only-of-type {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-of-type.html", "tabbed-shorter")}}
+
 > **メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
 
 ## 構文

files/ja/web/css/_colon_optional/index.md

@@ -14,6 +14,8 @@ input:optional {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-optional.html", "tabbed-standard")}}
+
 この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。
 
 > **メモ:** {{cssxref(":required")}} 擬似クラスは<em>必須</em>のフォーム欄を選択します。

files/ja/web/css/_colon_out-of-range/index.md

@@ -15,6 +15,8 @@ input:out-of-range {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-out-of-range.html", "tabbed-shorter")}}
+
 この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。
 
 > **メモ:** この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。

files/ja/web/css/_colon_placeholder-shown/index.md

@@ -14,6 +14,8 @@ slug: Web/CSS/:placeholder-shown
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-placeholder-shown.html", "tabbed-shorter")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_read-only/index.md

@@ -18,6 +18,8 @@ p:read-only {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-read-only.html", "tabbed-shorter")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_read-write/index.md

@@ -18,6 +18,8 @@ p:read-write {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-read-write.html", "tabbed-shorter")}}
+
 ## 構文
 
 ```

files/ja/web/css/_colon_required/index.md

@@ -14,6 +14,8 @@ input:required {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-required.html", "tabbed-standard")}}
+
 この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。
 
 > **メモ:** {{cssxref(":optional")}} 擬似クラスは*省略可能*なフォーム欄を選択します。

files/ja/web/css/_colon_valid/index.md

@@ -14,6 +14,8 @@ input:valid {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-class-valid.html", "tabbed-shorter")}}
+
 この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。
 
 ## 構文

files/ja/web/css/_doublecolon_after/index.md

@@ -14,6 +14,8 @@ a::after {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-after.html", "tabbed-standard")}}
+
 > **メモ:** `::before` および `::after` によって作成される擬似要素は[要素の整形ボックスに含まれるため](https://www.w3.org/TR/CSS2/generate.html#before-after-content)、 {{htmlelement("img")}} や {{htmlelement("br")}} のような[置換要素](/ja/docs/Web/CSS/Replaced_element)には適用されません。
 
 ## 構文

files/ja/web/css/_doublecolon_before/index.md

@@ -14,6 +14,8 @@ a::before {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-before.html", "tabbed-standard")}}
+
 > **メモ:** `::before` および `::after` によって作成される擬似要素は[要素の整形ボックスに含まれるため](https://www.w3.org/TR/CSS2/generate.html#before-after-content)、 {{htmlelement("img")}} や {{htmlelement("br")}} のような[置換要素](/ja/docs/Web/CSS/Replaced_element)には適用されません。
 
 ## 構文

files/ja/web/css/_doublecolon_cue/index.md

@@ -14,6 +14,8 @@ slug: Web/CSS/::cue
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-cue.html", "tabbed-shorter")}}
+
 このプロパティは、あたかも 1 つの部品であるかのように、一連のキュー全体に適用されます。 `background` とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。
 
 ## 構文

files/ja/web/css/_doublecolon_first-line/index.md

@@ -14,6 +14,8 @@ p::first-line {
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-first-line.html", "tabbed-shorter")}}
+
 > **メモ:** CSS3 では `::first-line` という (二重コロン付き) 表記が、[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された `:first-line` も使用できます。
 
 ## 利用可能なプロパティ

files/ja/web/css/_doublecolon_marker/index.md

@@ -14,6 +14,8 @@ slug: Web/CSS/::marker
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-marker.html", "tabbed-shorter")}}
+
 ## 利用できるプロパティ
 
 `::marker` 擬似要素では、一部の CSS プロパティのみが利用できます。

files/ja/web/css/_doublecolon_placeholder/index.md

@@ -14,6 +14,8 @@ slug: Web/CSS/::placeholder
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-placeholder.html", "tabbed-shorter")}}
+
 セレクターに `::placeholder` を使ったルールを使用できるのは、{{cssxref("::first-line")}} 擬似要素に適用できる CSS プロパティだけです。
 
 > **メモ:** 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。

files/ja/web/css/_doublecolon_selection/index.md

@@ -13,6 +13,8 @@ slug: Web/CSS/::selection
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-selection.html", "tabbed-shorter")}}
+
 ## 利用できるプロパティ
 
 `::selection` 擬似要素では、特定の CSS プロパティのみが利用できます。

files/ja/web/css/_doublecolon_slotted/index.md

@@ -21,6 +21,8 @@ slug: Web/CSS/::slotted
 }
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-slotted.html", "tabbed-shorter")}}
+
 ## 構文
 
 {{csssyntax}}

files/ja/web/css/aspect-ratio/index.md

@@ -18,6 +18,8 @@ aspect-ratio: revert;
 aspect-ratio: unset;
 ```
 
+{{EmbedInteractiveExample("pages/css/aspect-ratio.html")}}
+
 ### 値
 
 - `auto`

files/ja/web/css/attr/index.md

@@ -26,6 +26,8 @@ attr(data-width px, inherit);
 attr(data-something, "default");
 ```
 
+{{EmbedInteractiveExample("pages/tabbed/function-attr.html", "tabbed-shorter")}}
+
 ## 構文
 
 ### 値