【入門編】hidden属性によるテキストの非表示制御 – HTML実践ガイド

Web開発の入り口に立った皆さん、こんにちは！

HTMLを学び始めると、「画面から消したい要素」に出会うことがよくありますよね。「今は見せたくないけど、後でボタンを押したら出したい」「スマホの時だけ隠したい」といった要望は、Web制作の現場では日常茶飯事です。

そんな時、CSSの`display: none`を使うことが多いかと思いますが、実はHTML5から登場した`hidden`属性という、もっとシンプルで「HTMLの作法」にかなった隠し方があるんです。

今日は、この`hidden`属性が一体何者なのか、CSSの隠し方と何が違うのかを、現場の知見を交えながら優しく紐解いていきましょう。

—

`hidden`属性は、HTMLタグの中にポイっと書き込むだけで、その要素を「非表示」にしてくれる便利な属性です。

使い方はとても簡単。隠したいタグの中に `hidden` と書くだけ。たったこれだけです。

まるで、クローゼットの中に洋服をそっとしまっておくような感覚ですね。「今は使わないから、とりあえずここに隠しておこう」というHTMLとしての意思表示、それが `hidden` 属性です。

ここが一番のつまずきポイントです。「どっちを使えばいいの？」と迷ってしまいますよね。

結論から言うと、「役割」と「優先度」が違います。

「見た目を制御する」ための手段です。例えば「スマホの時は隠すけど、PCの時は出す」というような、画面サイズに応じたレイアウトの調整にはこちらが適しています。

「存在そのものを隠す」ための手段です。例えば「今はログインしていないから、このメニューは表示させない」といった、データの状態によって中身を出し分ける時に使います。

実は、ブラウザは内部的に `hidden` 属性がついた要素に対して、自動的に `display: none` を適用しています。つまり、「見た目を消す」という結果は同じなんです。

ただ、HTML側に `hidden` と書いてあると、後からコードを読んだ人が「あ、これは意図的に隠されている要素なんだな」とすぐに意図を理解できます。CSSだけで隠すと、どのファイルに隠す命令が書いてあるか探すのが大変になることもありますからね。

視覚障がいをお持ちの方が使う「スクリーンリーダー（画面読み上げソフト）」にとって、`display: none` や `hidden` は「そこには何も存在しない」とみなされます。

つまり、どちらを使っても読み上げられることはありません。これは、「ユーザーに伝えなくていい情報を、機械にも無視させる」というアクセシビリティの観点からは、どちらも正解といえます。

ただし、CSSで「透明にする（`opacity: 0`）」や「画面外に飛ばす」ような隠し方をしてしまうと、機械は「ここにはまだ要素がある！」と勘違いして読み上げようとしてしまいます。これだと、ユーザーを混乱させてしまいますよね。

その点、`hidden` は「隠すならこれ！」と決まっている安心な属性なんです。

では、ボタンを押すと隠されたテキストが表示される簡単な仕組みを作ってみましょう。

このように、JavaScriptから `message.hidden = true` とするだけで、パッと消したり出したりできるんです。CSSクラスを付け替えるよりもずっと直感的だと思いませんか？

—

今日の内容をまとめると、たったこれだけです。

1. `hidden` は「HTMLの意思表示」: 「隠す」という情報をタグ自体に持たせられる。
2. 使い分け: レイアウト調整ならCSS、データの表示・非表示なら `hidden` がスマート。
3. 安心感: スクリーンリーダーにも優しく、意図が誰にでも伝わりやすい。

最初は「どっちを使えばいいんだろう？」と悩むかもしれませんが、Web制作には「これが絶対の正解」というものはありません。まずは `hidden` を使ってみて、「あ、これはCSSでやるほうが楽かも」と気づいたらそちらに変える。その繰り返しで、皆さんのコーディングスキルは確実に磨かれていきますよ。

焦らず、一つずつ「道具箱」の中身を増やしていきましょうね！応援しています！