hidden グローバル属性 は、要素はまだ、あるいはもはや関連性がないことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。ブラウザーは、 hidden 属性を設定している要素を表示しません。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
hidden 属性は、別の表現方法で表示することが正当であるはずのコンテンツを隠すために使用してはいけません。例えば、タブ付きダイアログでパネルを隠すために hidden 属性を使用するのは不適切です。これはタブ付きインターフェイスが、単に内容がはみ出ていることを示す表現の一種であり、スクロールバーを使用してひとつの大きなページにすべてのフォームコントロールを表示するのと同等であるためです。同様に、ある表現方法からコンテンツを隠すためにこの属性を使用するのも不適切です。何かを隠した場合は、例えばスクリーンリーダーを含むすべての表現方法から隠されます。
隠された要素は、隠されていない要素からリンクしないようにしてください。また、隠された要素の子孫要素は依然アクティブです。これは script 要素が実行可能、またフォーム要素が送信可能であるということです。
例えば、 href 属性を使用して hidden 属性が設定された部分にリンクを張るのは不適切です。コンテンツが利用できないか無関係ならば、リンクする理由がないからです。
しかし、 ARIA の aria-describedby 属性を使って隠された要素の記述を参照することは良いことです。記述を隠すことは、それ自身では役に立たないことを意味しますが、記述された要素から参照される特定の文脈に限っては有用であるように記述することができます。
同様に、 canvas 要素に hidden 属性をつけたものはオフスクリーンバッファーとしてグラフィックエンジンを記述することができますし、フォーム制御では hidden のフォーム要素をフォーム属性を使用して参照することができます。
メモ: hidden 属性を持つ要素について、 CSS の display プロパティの値を変更すると、挙動を上書きします。例えば display: flex を設定した要素は、 hidden 属性が存在しても表示されます。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard hidden の定義 |
現行の標準 | 最新のスナップショットである HTML 5.1 から変更なし。 |
| HTML Living Standard Hidden elements の定義 |
現行の標準 | CSS による hidden 属性のデフォルトレンダリング方法の案を定義 |
| HTML 5.1 hidden の定義 |
勧告 | HTML Living Standard のスナップショットであり、この属性を初めて定義しました。 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | あり | 11 | あり | あり |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | 4 | あり | あり | あり | あり | あり | あり |
関連情報
- すべての グローバル属性。