From 0d7035078d90cc0dfb4bf680042ae5aadb31668a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Oct 2021 01:29:53 +0900 Subject: Web/API/HTMLElement/inert を新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/21 時点の英語版に基づく --- files/ja/web/api/htmlelement/inert/index.md | 58 +++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 files/ja/web/api/htmlelement/inert/index.md (limited to 'files') diff --git a/files/ja/web/api/htmlelement/inert/index.md b/files/ja/web/api/htmlelement/inert/index.md new file mode 100644 index 0000000000..b4b7cdf0da --- /dev/null +++ b/files/ja/web/api/htmlelement/inert/index.md @@ -0,0 +1,58 @@ +--- +title: HTMLElement.inert +slug: Web/API/HTMLElement/inert +browser-compat: api.HTMLElement.inert +translation_of: Web/API/HTMLElement/inert +--- +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLElement")}} の **`inert`** プロパティは論理値で、存在する場合は、フォーカスイベントや支援技術からのイベントを含む、要素に対するユーザーの入力イベントをブラウザーが「無視」するようにします。ブラウザーは、要素でのページ検索やテキスト選択も無視することができます。これは、モーダルのような UI を構築する際に、モーダルが表示されているときにフォーカスをモーダル内に「閉じ込める」場合に便利です。 + +## 構文 + + isInert = HTMLElement.inert; + + HTMLElement.inert = true | false; + +### 値 + +論理値で、その要素が不活性である場合は `true`、それ以外の場合はこの値は `false` になります。 + +

+ +### HTML + +```html +
+ + +
+
+ + +
+``` + +### CSS + +```css +[inert] > * { + opacity: .5; +} +``` + +{{ EmbedLiveSample('Example', 560, 200) }} + +> **Note:** この属性は、それ自体では、ブラウザーに表示されるコンテンツは視覚的変化を与えません。上の例では、inert 属性を持つ要素の直系の子孫が半透明になるように CSS が適用されています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [inert のポリフィル](https://github.com/WICG/inert) -- cgit v1.2.3-54-g00ecf