【inert属性】要素や子孫要素を不活性化する。「HTML・属性・初心者向け」- ノブレコ
nobreco
inert属性とは
inart属性は、ブラウザーに「不活性化」を指定するための属性です。
不活性化とは、指定した要素や子孫要素に対して、クリック操作、入力操作などのボタン操作をできない状態にすることをいいます。
ただし視覚的効果を期待されているものではなく、指定された要素が不活性化していることは明示されないので、分かりづらくなっています。そのため不活性化した要素に対しては、透過度を変更するなどの視覚的効果を付与することが推奨されます。
【仕様】html living standerd
★属性の区分
グローバル属性
★対応ブラウザ
・Chrome
・Edge
・Safari
・Fire Fox
・Opera
【使用目的】
この属性は、ボタン操作や編集などの、ユーザー操作を無効化したい場合に使用します。
不活性化させる目的で使われる代表的な例は、<dialog>要素のモーダルダイアログのバックドロップのような使い方があります。
モーダルダイアログが表示されている間は、その背景の内容に対してクリックや他の操作が無効になりますが、このいinert属性もモーダルダイアログと同じような効果を意図して得たい場合に使用することが多いです。
【使用上の注意点】
① 使用にはアクセシビリティ上に注意する。
視覚的効果で明示する属性ではないので、ユーザーが操作しやすいようにアクティブコンテンツと、不活性コンテンツとを明確にする必要があります。可能な限り視覚的効果を付与することが望ましいです。
【指定できる要素】
insert属性は、グローバル属性のため、全てのHTML要素に指定することができます。
ですが、指定したHTML要素との組み合わせ次第では、属性の効果が発揮されないことがあるので注意してください。
★旧HTMLからの変更点
・HTML LS：insert属性が定義されました。
実用例
■inert属性の例
★inert属性の記述例
まとめ
この記事では、inert属性についての解説をいたしました。
この属性はモーダルダイアログの効果を意図して使用するために定義された属性です。
もとはグローバル属性ではなかったのですが、様々な経緯から今はグローバル属性として定義されています。
必要な操作以外を無効にしたい場合に便利な属性となります。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん(*/ω＼*)
