HTML Living Standard/hidden属性
hidden属性
[編集]hidden属性は、要素を非表示にするためのグローバル属性です。この属性を使用することで、要素を画面上に表示しないように設定できます。ただし、単に見た目を隠すだけでなく、要素がセマンティックな理由で非表示であることを示す意味も持ちます。
基本構文
[編集]<element hidden></element>
hidden属性には値を指定せず、属性が存在するだけで有効になります。
効果
[編集]hidden属性が付加された要素は、以下のように動作します。
- 要素が非表示になります。
- 非表示は、CSSの
display: none;と同じ効果を持ちます。 - アクセシビリティツールにおいても、この要素は通常無視されます。
使用例
[編集]以下は、hidden属性を使用した例です。
<p>この段落は表示されます。</p> <p hidden>この段落は非表示です。</p>
この例では、2つ目の段落は画面上には表示されません。
JavaScriptを使用した制御
[編集]hidden属性は、JavaScriptで動的に追加・削除することが可能です。
<button id="toggleButton">表示/非表示を切り替え</button> <div id="content" hidden>これは非表示のコンテンツです。</div> <script> const toggleButton = document.getElementById("toggleButton"); const content = document.getElementById("content"); toggleButton.addEventListener("click", () => { content.hidden = !content.hidden; // hidden属性をトグル }); </script>
この例では、ボタンをクリックすることで、コンテンツの表示/非表示を切り替えることができます。
hidden属性とCSS
[編集]hidden属性をCSSと組み合わせることも可能です。
[hidden] { display: none; }
CSSでスタイルを変更することで、特定の状況でhidden属性を持つ要素を柔軟に扱えます。
注意点
[編集]hidden属性を持つ要素は完全に非表示になり、要素のスペースも確保されません。- 視覚的に非表示にしたい場合でも、セマンティックな意味を持たない場合はCSSの
display: none;やvisibility: hidden;を使用することを検討してください。 - アクセシビリティの観点から、ユーザーにとって重要な情報を単に非表示にするだけではなく、適切な代替手段を提供することが望ましいです。
互換性
[編集]互換性 ブラウザ サポート状況 Chrome 対応 Edge 対応 Firefox 対応 Safari 対応 Opera 対応