inert
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | グローバル属性 |
inert属性は、要素の不活性化を指定します。
この属性が指定された要素は、各種の操作が行えなくなります。
<div inert>操作できない要素</div>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性 | |||
inert |
要素の不活性化を指定 | （inert） |
値は省略可能 |
inert属性の動作
inert属性が指定された要素内にあるコンテンツは、選択、クリック、編集、ドラッグなどの操作ができなくなります。また、ブラウザはその要素内にあるコンテンツをページ内検索の対象から除外することがあります。
inert属性の用途
例えば、サイドメニューを開いた時にメニュー以外の領域を操作不可にしたり、
カルーセル（横方向にスライドするやつ）において、メイン以外のコンテンツをクリック不可にすることができます。
- 上記のような仕組みを作るには別途JavaScriptが必要です。
視覚的な変化を付ける
inert属性によって不活性化されたとしても、要素の視覚的な変化はもたらされません。
そのままだとユーザービリティが低下してしまう（まぎらわしくなってしまう）ため、不活性化された要素に対しては何らかの視覚的変化を付けることが推奨されています。（例えばグレーアウトさせるとか、透過度を変えるとか）
指定できる要素
inert属性はグローバル属性のため、全てのHTML要素に指定することができます。
- ただし、属性と要素の組み合わせによっては効果がない場合もあります。
- 旧HTMLからの変更点
-
- HTML LS：inert属性が定義されました。
使用例
<div inert>
<p>このテキストは選択できません</p>
<p><a href="index.html">このリンクはクリックできません</a></p>
<p><img src="image/sample.png" alt="SAMPLE" width="150" height="50"><br>
この画像はドラッグできません</p>
</div>
- 表示例
