hidden属性 - 無関係な要素
hidden属性は、要素がドキュメントとは関係がないことを表すための属性です。一般的なブラウザでは、この属性が付いた要素は非表示になります。
概要
値
hidden属性は、要素がドキュメントと関係な状態であることを表します。開かれていないダイアログボックスの内容などに指定することで、ユーザーエージェントがドキュメントの内容を理解しやすくなるよう助けます。一般的なブラウザではこの属性が付いた要素は非表示になりますが、非表示にすることを目的としてこの属性を使ってはいけません。
例えば、アコーディオンをマークアップする時に、閉じているタブの内容にhidden属性を指定するのは適切ではありません。アコーディオンの閉じているタブは、デザイン上、見た目をすっきりさせるために非表示になっているだけで、その内容はドキュメントと常に関係あるものだからです。
それに対して、例えば、一定の条件下で表示される警告の内容であるダイアログボックスは、表示される時にだけ、ドキュメントと関係がある存在です。こういったダイアログボックスの場合は、非表示状態の時にはhidden属性を付けるのが適切です。
例えば、Internet Explore 10以下など、一部の非対応ブラウザは、hidden属性を付けても非表示にはなりません。そのため、hidden属性を付ける時には、併せてスタイルシートでdisplay: none
を適用することをオススメします。
デモ
hidden属性のデモです。hidden属性を付けると、無関係な要素として非表示状態になります。
<!-- このコードは編集できます。 -->
<p>この要素はドキュメントと関係がある要素です。</p>
<p hidden>この要素はドキュメントとは無関係な要素です。</p>
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● 5.1+ | ● | ● 11+ | ● | ● | ● 4.0+ |
関連記事
- tabindex属性
- tabindex属性は、キーボードフォーカスにおいて、要素をどのような取り扱いにするのか設定するための属性です。対象外にしたり、順番を設定したりできます。また、この属性を付けることで、通常はフォーカスできない要素(p要素など)をフォーカス可能にすることもできます。
- title属性
- title属性は、要素のヒントを表す属性です。例えば、ハイパーリンクならリンク先のタイトル、画像ならクレジット情報、撮影者、パラグラフではテキストの脚注や注釈などを指定します。マウスデバイスだったらマウスホバー時にツールチップが表示されます。この属性が省略された場合、最も近い祖先のtitle属性が適用されます。継承を防ぐため、明示的に空の値を指定しても大丈夫です。
- lang属性
- lang属性は、要素の言語を表す属性です。省略した場合、存在するなら一番近い祖先要素の属性値が適用されます。
- spellcheck属性
- spellcheck属性は、要素の入力内容をスペルチェックするべきか否か、ユーザーエージェントにヒントを与えるための属性です。
- translate属性
- translate属性は、要素の内容を翻訳するべきか否か、ユーザーエージェントにヒントを与えるための属性です。翻訳アプリケーションによっては、ヒントに従って翻訳をしてくれるでしょう。