HTML Living Standard/inert属性
inert属性
[編集]inert属性は、要素とその子孫要素を操作不能にするためのグローバル属性です。この属性を設定すると、要素はフォーカスを受け取ることができず、ユーザーの入力や操作も無効化されます。ダイアログやモーダルの実装時に、それ以外の要素を操作不能にするためによく使用されます。
基本構文
[編集]<element inert></element>
inert属性は、値を指定せずに属性が存在するだけで有効になります。
効果
[編集]inert属性を持つ要素とその子孫要素は、キーボードフォーカスやマウスクリックなどのユーザー操作が無効化されます。- ユーザーエージェントは、これらの要素をアクセシビリティツールからも除外します。
- ビジュアル的なスタイルには影響を与えません。
使用例
[編集]以下は、inert属性を使用して要素を操作不能にする例です。
<div> <p>この段落は操作可能です。</p> <div inert> <p>この段落は操作不能です。</p> <button>このボタンも操作不能です。</button> </div> </div>
この例では、inert属性が付与された
内のすべての要素が操作不能になります。
JavaScriptを使用した制御
[編集]inert属性は、JavaScriptを使って動的に設定または解除することができます。
<button id="toggleInert">操作不能を切り替え</button> <div id="content"> <p>このコンテンツは操作可能です。</p> <button>ボタン</button> </div> <script> const toggleButton = document.getElementById("toggleInert"); const content = document.getElementById("content"); toggleButton.addEventListener("click", () => { content.toggleAttribute("inert"); // inert属性をトグル }); </script>
この例では、ボタンをクリックすることでinert属性が追加または削除され、要素の操作可能状態を切り替えることができます。
モーダルダイアログでの使用
[編集]inert属性は、モーダルダイアログを実装する際に、背景部分を操作不能にするためによく使われます。
<div id="dialog" role="dialog"> <p>モーダルダイアログの内容です。</p> <button>閉じる</button> </div> <div id="background" inert> <p>背景のコンテンツは操作不能です。</p> </div>
この例では、ダイアログが表示されている間、背景のコンテンツはinert属性によって操作不能になります。
注意点
[編集]inert属性は、すべてのブラウザで完全にはサポートされていません。一部のブラウザではinert属性をサポートするために追加のポリフィルが必要です。- 視覚的なスタイルの変更は行われないため、必要に応じてCSSを併用して明示的にスタイルを変更することが推奨されます。
互換性
[編集]互換性 ブラウザ サポート状況 Chrome 対応 Edge 対応 Firefox 対応 Safari 対応 Opera 対応
完全な互換性については、最新のブラウザ情報を確認してください。