【HTML Living Standard】hidden属性の使い方
hidden属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
hiddenプロパティは、HTML要素が現在ユーザーに表示されるべきではない状態であるかを示す真偽値を保持するプロパティです。このプロパティがHTML要素に指定されると、その要素はブラウザのレンダリングツリーから除外され、画面上には表示されなくなります。これにより、まだ表示する準備ができていないコンテンツや、特定の条件下でのみ表示されるべきコンテンツを一時的に隠す際に活用できます。
hiddenプロパティが適用された要素は、視覚的には非表示になりますが、DOM（Document Object Model）上には引き続き存在します。そのため、JavaScriptなどのスクリプトからは、非表示状態の要素にもアクセスしてその内容を操作したり、状態を変更したりすることが可能です。
このプロパティは真偽属性として機能し、要素にhidden属性が存在するだけで値がtrueと見なされ、要素が非表示になります。属性が存在しない場合はfalseと見なされ、要素は通常通り表示されます。技術的にはCSSのdisplay: none;に似た効果をもたらしますが、hiddenプロパティは要素がセマンティックに非表示であるべき状況を示すという点で、単なるスタイル設定とは異なる意味合いを持ちます。
注意点として、CSSのdisplayプロパティが明示的に設定されている場合、その設定がhiddenプロパティよりも優先されることがあるため、意図した表示にならない可能性もあります。JavaScriptを使用して、要素のDOMオブジェクトのhiddenプロパティの値を動的に変更することで、要素の表示・非表示を簡単に切り替えることが可能です。このプロパティは、HTMLのすべての要素に適用できるグローバル属性の一つです。
構文(syntax)
1<element hidden>コンテンツ</element>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML hidden属性で要素を隠す
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML hidden 属性のサンプル</title> 7</head> 8<body> 9 <h1>HTML hidden 属性のデモンストレーション</h1> 10 11 <!-- 12 以下のp要素には`hidden`属性が設定されていません。 13 そのため、この段落はブラウザで通常通り表示されます。 14 --> 15 <p> 16 この段落は通常の表示です。 17 「hidden」属性がないため、このテキストは画面に表示されます。 18 </p> 19 20 <!-- 21 以下のdiv要素には`hidden`属性が設定されています。 22 この属性がある場合、要素は初期状態でブラウザに表示されません。 23 ユーザーには見えなくなりますが、DOM上には存在します。 24 --> 25 <div hidden> 26 <h3>非表示のセクション</h3> 27 <p> 28 このセクション（h3とp要素を含む）は`hidden`属性が設定されているため、 29 初期状態ではブラウザに表示されません。 30 このテキストは見えないはずです。 31 </p> 32 </div> 33 34 <!-- 35 以下のp要素も`hidden`属性が設定されていません。 36 この段落は、上の非表示のセクションの下に表示されます。 37 --> 38 <p> 39 こちらも通常の表示です。 40 上の`hidden`属性が付いたセクションは表示されず、この段落が直接続きます。 41 </p> 42 43 <!-- 44 補足: 45 `hidden`属性はJavaScriptを使って動的に表示/非表示を切り替える際によく使用されます。 46 例えば、ボタンクリックで非表示の要素を表示させることができます。 47 例: document.getElementById('elementId').hidden = false; // 表示 48 例: document.getElementById('elementId').hidden = true; // 非表示 49 --> 50</body> 51</html>
HTMLのhidden属性は、すべてのHTML要素に適用できるグローバル属性の一つです。この属性を要素に設定すると、その要素はウェブページ上で初期状態で非表示になります。ブラウザには表示されませんが、要素自体はHTMLドキュメントの構造（DOM）上には存在し続けます。
サンプルコードでは、最初の段落と最後の段落にはhidden属性が設定されていないため、ブラウザに通常通り表示されます。一方、中央のdiv要素にはhidden属性が付与されているため、このdiv要素とその内部に含まれる見出し（h3）や段落（p）は、ページが読み込まれた時点では画面に表示されません。
hidden属性は、属性が存在するかどうかで機能するブール属性です。そのため、特定の値を引数として渡す必要はなく、この属性自体から直接何らかの値を戻す（戻り値）こともありません。この属性は、ユーザーの操作に応じてJavaScriptを使って要素の表示・非表示を動的に切り替えたい場合に非常に有用です。例えば、ボタンをクリックしたときに詳細情報を表示したり、条件に応じて特定のエラーメッセージを表示したりする際などに活用され、ウェブページのユーザビリティ向上に貢献します。
hidden属性は、要素を初期状態でブラウザに表示させないためのグローバル属性です。この属性が付いた要素は画面上では見えなくなりますが、HTMLの構造（DOM）上には存在し続けます。そのため、JavaScriptを使用すれば、後から属性を操作して要素を動的に表示・非表示に切り替えることが可能です。ただし、スクリーンリーダーなどの支援技術によっては、hidden属性が付いていても内容を読み上げてしまう場合があるため、機密情報などを完全に隠す目的では利用しないでください。また、CSSでdisplayプロパティを設定すると、hidden属性による非表示が上書きされて表示されてしまうことがありますので、スタイル適用順序にも注意が必要です。