【HTML Living Standard】hidden属性値の使い方
hidden属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
hiddenプロパティは、HTML要素の表示状態を制御するためのブール値を保持するプロパティです。HTML要素にhidden属性が追加されると、その要素はブラウザによって既定で画面に表示されなくなります。これは、ウェブページ上で一時的に表示したくない要素や、特定の条件下でのみ表示すべき要素に対して利用されます。例えば、ユーザーの操作に応じて表示・非表示を切り替えるような動的なコンテンツや、初期状態では隠しておきたいエラーメッセージなどに適用できます。
このプロパティが持つtrueの値は、関連するコンテンツが、現在のページのコンテキストにおいてまだ、またはもはや関連性がないことを意味論的に示します。ブラウザは、この意味論に基づいて要素をレンダリングツリーから除外し、視覚的に非表示にします。開発者は、JavaScriptを使用してこのhiddenプロパティの値を動的に変更することで、要素の表示・非表示を切り替えることが可能です。
ただし、hidden属性は、あくまでコンテンツの関連性を示すものであり、セキュリティ目的で機密情報を隠すためのものではありません。スクリーンリーダーなどの補助技術は、hidden属性が適用された要素の内容を読み上げる可能性があるため、注意が必要です。また、CSSを用いてhidden属性の表示を強制的に変更することも技術的には可能ですが、その場合、属性が持つ意味論的な目的と視覚的な表示状態が乖離するため、推奨されません。正確かつ適切なウェブコンテンツの提供のためには、その意味論を理解し、適切に利用することが重要です。
構文(syntax)
1<p hidden>この要素は非表示になります。</p>
引数(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>hidden属性のデモンストレーション</h1> 10 11 <!-- このp要素は通常通り表示されます --> 12 <p>これは「hidden属性なし」の段落です。Webページに表示されます。</p> 13 14 <!-- hidden属性が指定されているため、このp要素は初期状態では表示されません --> 15 <p hidden>これは「hidden属性あり」の段落です。初期状態ではWebページに表示されません。</p> 16 17 <p> 18 上記「hidden属性あり」の段落は、ブラウザのデベロッパーツールでHTML要素としては存在することを確認できますが、 19 画面上にはレンダリングされません。 20 </p> 21</body> 22</html>
HTMLのhidden属性は、Webページ上の特定の要素を初期状態で非表示にするための属性です。この属性は、<body>タグ内に記述されるほとんどすべてのHTML要素に適用することができます。要素にhidden属性が指定されると、ブラウザはその要素を画面に描画（レンダリング）しないため、Webページ上ではユーザーに見えない状態となります。
hidden属性は「ブール属性」の一種であり、値（引数）を必要としません。属性名が要素に存在するかしないかだけで機能が決まるため、特定の値を指定したり、何らかの値を返す（戻り値）といった概念は存在しません。属性があることで「非表示」の状態が有効になります。
ただし、hidden属性によって非表示になった要素は、HTMLドキュメント内からは削除されずに存在し続けます。これは、ブラウザのデベロッパーツールなどでHTML構造を確認すれば、非表示の要素も存在していることがわかります。そのため、JavaScriptなどを使って後からこの属性を削除したり追加したりすることで、要素の表示・非表示を切り替えることも可能です。
提供されたサンプルコードでは、最初の段落<p>にはhidden属性がないため、通常通り「これは『hidden属性なし』の段落です。」というテキストがWebページに表示されます。一方、次の段落<p hidden>にはhidden属性が指定されているため、「これは『hidden属性あり』の段落です。」というテキストはWebページ上には表示されません。この比較によって、hidden属性の具体的な働きを理解することができます。
hidden属性は、要素を初期状態で画面に表示させないための属性です。この属性が付与された要素は、ブラウザのデベロッパーツールなどで確認できるように、HTMLのソースコード上には存在し続けます。これは要素が完全に削除されるわけではなく、JavaScriptなどを用いて後から表示・非表示を切り替えることを想定した利用が一般的です。ただし、この属性はあくまでUI上の非表示機能であり、セキュリティ目的で機密情報を隠すために使用してはいけません。ソースコードを閲覧すれば誰でも内容を確認できるため、取り扱いには注意が必要です。ユーザーの操作に応じて表示するコンテンツや、現時点では関連性の低いコンテンツに適切に活用することをお勧めします。
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>hidden属性の使い方</h1> 10 11 <p>この段落は通常通り表示されます。</p> 12 13 <!-- hidden属性を持つ要素は、ブラウザによって初期状態で非表示になります。 --> 14 <!-- これはユーザーインターフェースから要素を隠すために使用されます。 --> 15 <p hidden>この段落はhidden属性が指定されているため、初期状態では表示されません。</p> 16 17 <p>この段落も通常通り表示されます。</p> 18</body> 19</html>
HTMLのhidden属性は、Webページ上のHTML要素を初期状態で非表示にするための属性です。この属性をHTML要素に指定すると、その要素はブラウザによって画面に表示されなくなります。これは、ユーザーには見せないが、JavaScriptなどを使って後から動的に表示する可能性がある要素に対して利用されます。
上記のサンプルコードでは、「この段落はhidden属性が指定されているため、初期状態では表示されません。」というテキストを含む<p>要素にhidden属性が追加されています。そのため、このWebページをブラウザで開くと、その段落だけが画面に表示されず、他の通常の段落は表示されます。
hidden属性は、その属性が存在すること自体が意味を持つため、値を設定する引数はありません。また、HTML要素の属性であるため、関数のように何らかの値を返す戻り値もありません。シンプルな記述で要素の表示・非表示を制御できるため、Webページのユーザーインターフェースを柔軟に構築する際に役立ちます。
hidden属性は、要素をブラウザ上で視覚的に非表示にするためのブーリアン属性です。この属性が指定された要素は、DOMからは削除されず、JavaScriptなどを使って後から表示・非表示を切り替えることが可能です。
hidden属性は「そのコンテンツが現在のページの他の部分とは関係ない」ことを示すセマンティックな意味合いを持ちます。単にスタイルで非表示にしたい場合はCSSのdisplay: none;も使用できますが、用途が異なりますので注意が必要です。
重要な点として、hidden属性を持つ要素はスクリーンリーダーによって通常読み上げられないため、アクセシビリティに配慮が求められます。ユーザーが操作するべき要素や重要な情報をhiddenで初期状態で隠す際は、後から表示させる手段や代替情報を適切に提供してください。また、CSSでdisplayプロパティが設定されていると、hidden属性による非表示が上書きされる場合があるので注意しましょう。