From 4a011e23fc27f1ee0062e95e7f75956c1cebd149 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 23 Jan 2022 13:14:12 +0900
Subject: 2021/08/13 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/css/_colon_picture-in-picture/index.md  | 73 ++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 files/ja/web/css/_colon_picture-in-picture/index.md

(limited to 'files')

diff --git a/files/ja/web/css/_colon_picture-in-picture/index.md b/files/ja/web/css/_colon_picture-in-picture/index.md
new file mode 100644
index 0000000000..a234ae1e21
--- /dev/null
+++ b/files/ja/web/css/_colon_picture-in-picture/index.md
@@ -0,0 +1,73 @@
+---
+title: ':picture-in-picture'
+slug: Web/CSS/:picture-in-picture
+tags:
+  - CSS
+  - Picture-in-Picture
+  - Picture-in-Picture API
+  - 擬似クラス
+  - リファレンス
+  - セレクター
+  - 動画
+  - pip
+browser-compat: css.selectors.picture-in-picture
+translation_of: Web/CSS/:picture-in-picture
+---
+{{CSSRef}}
+
+**`:picture-in-picture`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、現在ピクチャインピクチャモードの要素に一致します。
+
+## 構文
+
+{{csssyntax}}
+
+## 使用上のメモ
+
+`:picture-in-picture` 擬似クラスを使用すると、動画がピクチャインピクチャと従来の表示モードの間で切り替わるときに、コンテンツの大きさ、スタイル、レイアウトを自動的に調整するようにスタイルシートを設定することができます。
+
+## 例
+
+この例では、動画が浮遊ウィンドウで表示されたときにボックスシャドウ付きになります。
+
+### HTML
+
+このページの HTML は次のようになります。
+
+```html
+<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>
+
+<p>This demo uses the <code>:picture-in-picture</code> pseudo-class to automatically
+  change the style of a video entirely using CSS.</p>
+
+<video id="pip-video"></video>
+```
+
+ID が `"pip-video"` の {{HTMLElement("video")}} は、ピクチャインピクチャの浮遊ウィンドウに表示されているかどうかで、赤いボックスシャドウを持つか持たないかが変化します。
+
+### CSS
+
+The magic happens in the CSS.
+
+```css
+:picture-in-picture {
+  box-shadow: 0 0 0 5px red;
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Picture-in-picture API](/ja/docs/Web/API/Picture-in-Picture_API)
+- {{DOMxRef("HTMLVideoElement.requestPictureInPicture()")}}
+- {{DOMxRef("HTMLVideoElement.autoPictureInPicture")}}
+- {{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}
+- {{DOMxRef("Document.pictureInPictureEnabled")}}
+- {{DOMxRef("Document.exitPictureInPicture()")}}
+- {{DOMxRef("Document.pictureInPictureElement")}}
-- 
cgit v1.2.3-54-g00ecf