hiddenグローバル属性は列挙型属性であり、ブラウザーがその要素の中身を表示すべきではないことを示します。例えば、ログイン処理が完了するまで使用できないページの要素を非表示にするために使用することができます。

試してみましょう

<p>  このコンテンツは重要ですので、今すぐお読みください。これを見つけることができて、本当に良かったですね！</p><p hidden>  このコンテンツは、現在このページには関連がないため、表示すべきではありません。  ここには何もありません。何もありません。</p>

p {  background: #ffe8d4;  border: 1px solid #f69d3c;  padding: 5px;  border-radius: 5px;}

解説

hidden 属性は、要素の中身をユーザーに表示しないことを示すために使用されます。この属性は以下の値のいずれかを取ることができます。

• キーワードhidden
• キーワードuntil-found
• 空文字列または値なし

無効なhidden の値を指定した場合も、その要素はhidden 状態に設定されます。従って、以下のものはすべて、要素をhidden の状態に設定します。

<span hidden>I'm hidden</span><span hidden="">I'm also hidden</span><span hidden="hidden">I'm hidden too!</span><span hidden="bananas">I'm equally as hidden!</span>

以下のものは、要素をhidden until found の状態に設定します。

<span hidden="until-found">I'm hidden until found</span>

hidden 状態

hidden 状態は、その要素が現在ページに関連していないこと、または、ページの他の部分で再利用するためのコンテンツを宣言するために使用されており、ユーザーに直接表示すべきではないことを示しています。ブラウザーはhidden 状態にある要素を描画しません。

ウェブブラウザーはdisplay: none を使用してhidden 状態を実装することができ、その場合、その要素はページレイアウトに参加しません。これはまた、hidden 状態の要素で CSS のdisplay プロパティの値を変更すると、その状態が上書きされるということでもあります。例えば、display: block とスタイル設定された要素は、hidden属性があるにもかかわらず、表示されることになります。

hidden until found 状態

hidden until found の状態では、要素は非表示になりますが、ブラウザーの「ページ内検索」機能やフラグメントナビゲーションでは、そのコンテンツにアクセスできます。これらの機能によってhidden until found サブツリーの要素にスクロールが発生した場合、ブラウザーは次のようになります。

• 非表示の要素にbeforematch イベントが発生します
• その要素からhidden 属性を取り除きます
• 要素までスクロールします

これにより、開発者はコンテンツのセクションを折りたたみながら、フラグメントナビゲーションで検索およびアクセスできるようにすることができます。

ブラウザーは通常content-visibility: hidden を使用してhidden until found を実装していることに注意してください。これは、hidden 状態の要素とは異なり、hidden until found 状態の要素には生成されたボックスがある、ということを意味しています。

• この要素はページレイアウトに参加します
• 要素の margin, borders, padding, background がレンダリングされます

また、その要素を明らかにするためには、レイアウトコンテインメントの影響を受けている必要があります。これは、hidden until found 状態の要素のdisplay 値がnone、contents、inline の何れかである場合、その要素はページまたはフラグメントナビゲーションでの検索によって明らかにされないことを意味しています。

使用上のメモ

hidden 属性は、 1 つの表現方法からのみコンテンツを隠す目的で使用してはいけません。何かが hidden とマークされている場合、それは、例えばスクリーンリーダーを含むすべての表現方法から隠されます。

非表示の要素は、hidden="until-found" を使用する場合を除き、表示されている要素からリンクしてはいけません。例えば、hidden 属性を持つ領域にリンクするためにhref 属性を使用することは不適切です。コンテンツが適用可能または関連性がない場合は、リンクしてはいけません。

しかし、ARIA のaria-describedby 属性を使用して、それ自身が隠されている記述を参照することは問題ないでしょう。記述を隠すことは、それ自身は有用でないことを意味しますが、それらが記述された要素から参照されるという固有の文脈で有用であるように書くことができます。

同様に、hidden 属性のついたキャンバス要素はスクリプト化されたグラフィックエンジンによってオフスクリーンバッファーとして使用することができ、フォームコントロールはその form 属性を使用して隠されたフォーム要素を参照することができます。

最後に、非表示の要素の子孫である要素は引き続き有効であり、スクリプト要素は引き続き実行可能であり、フォーム要素は引き続き送信可能であることに気を付けてください。

<div hidden>  <script>    console.warn("Boo! I'm hidden *and* running!");  </script></div>

例

hidden 属性の使用

この例には、3 つの<div> 要素があります。最初の要素と 3 つ目の要素は非表示ではありませんが、2 つ目の要素はhidden 属性が設定されています。非表示の要素には生成されたボックスがないことに注意してください。

<div>I'm not hidden</div><div hidden>I'm hiding!</div><div>I'm not hidden, either</div>

div {  height: 40px;  width: 300px;  border: 5px dashed black;  margin: 1rem 0;  padding: 1rem;  font-size: 2rem;}

until-found の使用

この例には、 3 つの<div> 要素があります。最初のものと 3 つ目は非表示になっていませんが、2 つ目にはhidden="until-found" とid="until-found-box" 属性があります。until-found-box の id に対応する要素には、赤い点線の境界線と灰色の背景が表示されます。

また、"until-found-box" フラグメントをターゲットとするリンクと、その非表示要素で発生するbeforematch イベントをリッスンする JavaScript もあります。イベントハンドラーは、hidden until found 状態が除去されようとしているときに発生する措置を示すために、ボックスのテキストコンテンツを変更します。

HTML

<a href="#until-found-box">非表示コンテンツへ移動</a><div>隠されていません</div><div hidden="until-found">Hidden until found</div><div>隠されていません</div>

<button>リセット</button>

CSS

div {  height: 40px;  width: 300px;  border: 5px dashed black;  margin: 1rem 0;  padding: 1rem;  font-size: 2rem;}div#until-found-box {  color: red;  border: 5px dotted red;  background-color: lightgray;}

#until-found-box {  scroll-margin-top: 200px;}

JavaScript

const untilFound = document.querySelector("#until-found-box");untilFound.addEventListener(  "beforematch",  () => (untilFound.textContent = "正体がバレた!"),);

document.querySelector("#reset").addEventListener("click", () => {  document.location.hash = "";  document.location.reload();});

結果

［非表示コンテンツへ移動］ボタンをクリックすると、hidden until found の要素へ移動します。beforematch イベントが発行され、テキストコンテンツが更新され、要素のコンテンツが表示されます。要素のコンテンツは非表示ですが、要素にはボックスが生成され、レイアウト内の空間を占め、背景と境界が描画されていることに注意してください。

この例を再度実行するには、［リセット］をクリックしてください。

仕様書

ブラウザーの互換性

関連情報

• HTMLElement.hidden
• すべてのグローバル属性。
• aria-hidden 属性
• beforematch イベント