【HTML】hidden 属性の使い方｜要素を非表示にする方法と display:none との違い

要素を一時的に隠したいとき、CSS で display: none を指定する方法がよく知られています。ですが、HTML には要素を隠すための hidden という属性が標準で用意されています。JavaScript との相性もよく、CSS を書かなくても表示・非表示を切り替えられます。この記事では、hidden 属性の基本、JavaScript での切り替え、そして display: none との違いや注意点まで、初心者向けに解説します。

hidden 属性でできること

hidden は、その要素を「今は関係ない・表示すべきでない」ものとしてブラウザに隠させる属性です。真偽値属性（値を持たない属性）なので、タグに hidden と書くだけで有効になります。隠された要素は画面に表示されず、レイアウト上の場所も取りません。スクリーンリーダーからも読み上げられなくなるため、単に見えなくするだけでなく「存在しないものとして扱う」のに向いています。

基本の使い方

隠したい要素に hidden を付けるだけです。次の例では、2つ目の段落が非表示になります。

<p>この段落は表示されます。</p>

<!-- hidden を付けた要素は表示されない -->
<p hidden>この段落は画面に表示されません。</p>

値を書く必要はありません。hidden と書けば隠れ、外せば表示されます。CSS を一切書かなくても、HTML だけで「初期状態は非表示」を表現できるのが手軽なところです。

JavaScript で表示・非表示を切り替える

hidden 属性の便利な点は、JavaScript から 要素.hidden という真偽値のプロパティで簡単に操作できることです。true にすれば隠れ、false にすれば表示されます。次のデモは、ボタンを押すたびに段落の表示・非表示を切り替えます。実際に動かしてみてください。

<button id="toggle">メッセージの表示・非表示</button>

<p id="message" hidden>この段落は hidden 属性で最初は隠れています。ボタンで切り替わります。</p>

button {
  padding: 8px 16px;
  font-size: 15px;
  cursor: pointer;
}

#message {
  margin-top: 12px;
  padding: 12px;
  background: #eef6ff;
  border-radius: 6px;
}

const button = document.getElementById("toggle");
const message = document.getElementById("message");

button.addEventListener("click", () => {
  // hidden プロパティを反転させて表示・非表示を切り替える
  message.hidden = !message.hidden;
});

message.hidden = !message.hidden は、現在の状態を反転させる書き方です。classList.toggle で CSS クラスを付け外しする方法と比べても、専用の CSS を用意しなくてよいぶん、シンプルに書けます。

display: none との違い

見た目の結果だけを見ると、hidden 属性は display: none とよく似ています。実際、ブラウザは hidden 属性の要素に対して、初期スタイルとして display: none を適用しています。ではどう使い分けるのか、性格の違いを整理しておきましょう。

hidden は「この要素は今は不要」という意味を HTML そのものに持たせられるのが特徴です。一方 display: none は、あくまで見た目のためのスタイル指定です。「意味として隠したい」なら hidden、「レイアウトの都合で隠したい」なら CSS、と考えると選びやすくなります。

CSS の display に負ける点に注意

hidden 属性が効くのは、あくまで「ブラウザが与える初期スタイルが display: none だから」です。そのため、CSS で display の値を明示的に指定すると、hidden を付けていても表示されてしまいます。

/* これを書くと、hidden を付けた要素まで表示されてしまう */
p {
  display: block;
}

意図せずこうした指定をしていると、「hidden を付けたのに隠れない」という現象が起きます。心配なときは、CSS 側で [hidden] { display: none; } のように明示しておくと、他のスタイルに上書きされにくくなり確実です。

まとめ

hidden 属性は、CSS を書かずに HTML だけで要素を隠せる便利な属性です。真偽値属性なので hidden と書くだけで有効になり、JavaScript からは 要素.hidden という真偽値プロパティで手軽に切り替えられます。見た目は display: none と似ていますが、「今は関係ない要素」という意味を HTML に持たせられる点が異なります。ただし CSS で display を明示すると上書きされてしまうため、隠れないときはスタイルの指定を見直してみてください。ちょっとした表示・非表示の切り替えには、まず hidden 属性を思い出すとよいでしょう。

参考ページ

• hidden – HTML: ハイパーテキストマークアップ言語 | MDN
• HTMLElement: hidden プロパティ – Web API | MDN