SYNCERのロゴ
アイキャッチ画像

hidden属性 - 無関係な要素

hidden属性は、要素がドキュメントとは関係がないことを表すための属性です。一般的なブラウザでは、この属性が付いた要素は非表示になります。

概要

DOM Interface
HTMLElement.hidden
仕様書
https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute

hidden属性は、要素がドキュメントと関係な状態であることを表します。開かれていないダイアログボックスの内容などに指定することで、ユーザーエージェントがドキュメントの内容を理解しやすくなるよう助けます。一般的なブラウザではこの属性が付いた要素は非表示になりますが、非表示にすることを目的としてこの属性を使ってはいけません。

例えば、アコーディオンをマークアップする時に、閉じているタブの内容にhidden属性を指定するのは適切ではありません。アコーディオンの閉じているタブは、デザイン上、見た目をすっきりさせるために非表示になっているだけで、その内容はドキュメントと常に関係あるものだからです。

それに対して、例えば、一定の条件下で表示される警告の内容であるダイアログボックスは、表示される時にだけ、ドキュメントと関係がある存在です。こういったダイアログボックスの場合は、非表示状態の時にはhidden属性を付けるのが適切です。

例えば、Internet Explore 10以下など、一部の非対応ブラウザは、hidden属性を付けても非表示にはなりません。そのため、hidden属性を付ける時には、併せてスタイルシートでdisplay: noneを適用することをオススメします。

デモ

hidden属性のデモです。hidden属性を付けると、無関係な要素として非表示状態になります。

<!-- このコードは編集できます。 -->

<p>この要素はドキュメントと関係がある要素です。</p>
<p hidden>この要素はドキュメントとは無関係な要素です。</p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
5.1+ 11+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。