hidden グローバル属性 は、要素はまだ、あるいはもはや関連性がないことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。ブラウザーは、hidden 属性を設定している要素を表示しません。
hidden 属性は、別の表現方法で表示することが正当であるはずのコンテンツを隠すために使用してはいけません。例えば、ラベル付きのダイアログでパネルを隠すために hidden 属性を使用するのは不適切です。これはタブインターフェイスが、単に内容がはみ出ていることを示す表現の一種であり、スクロールバーを使用してひとつの大きなページにすべてのフォームコントロールを表示するのと同等であるためです。同様に、ひとつの表現方法からコンテンツを隠すためだけにこの属性を使用するのも不適切です。何かを隠した場合は、例えばスクリーンリーダーを含むすべての表現方法から隠されます。
隠された要素は、隠されていない要素からリンクしないようにしてください。また、隠された要素の子孫要素は依然アクティブです。これは script 要素が実行可能、またフォーム要素が送信可能であるということです。
注記: hidden 属性を持つ要素の display CSS プロパティの値を変更すると、動作をオーバーライドします。例えば display: flex を設定した要素は、hidden 属性が与えられていても表示されます。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard hidden の定義 |
現行の標準 | 最新のスナップショットである HTML 5.1 から変更なし。 |
| WHATWG HTML Living Standard Hidden elements の定義 |
現行の標準 | CSS による hidden 属性のデフォルトレンダリング方法の案を定義 |
| HTML 5.1 hidden の定義 |
勧告 | WHATWG HTML Living Standard のスナップショットであり、この属性を初めて定義しました。 |
ブラウザー実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | (有) | 4.0 (2) | 11 | (有) | (有) |
| 機能 | Android | Android 版 Chrome | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | 4 | (有) | 4.0 (2) | 11 | (有) | (有) |
関連情報
- すべての グローバル属性。