サイト制作

HTMLでhiddenをfalseにしても消えたまま？属性の値と非表示の基本

慈愛妃きづな

2026-11-07

この記事には広告・アフィリエイトリンクが含まれます。

hidden属性へfalseという文字を指定しても、通常は表示へ戻りません。属性を外す操作や、CSSの影響も含めて整理します。

falseという文字は、表示に戻す合図ではない

HTMLのhidden属性は、今は表示すべきでない内容を示します。ここへfalseという文字列を書けば表示に戻る、と考えるとつまずきやすくなります。無効な値でもhidden状態になるためです。

表示へ戻す基本は、hidden属性を取り除くことです。JavaScriptのプロパティへ真偽値を設定する操作と、HTMLの属性へ文字列を記述することは区別しましょう。同じfalseという見た目でも、扱っているものが違います。

通常のhidden状態では、その要素は表示されません。ただし、CSSのdisplay設定によっては表示が上書きされることがあります。属性を付けたのに見えている場合は、適用されているスタイルも確認します。

反対に、属性を外しても別のCSSで非表示にしていれば、見えるようにはなりません。HTMLとCSSの両方で何を指定しているかを調べると、理由を切り分けやすくなります。

hiddenは表示の扱いを変えるもので、秘密情報を保護する仕組みではありません。画面に出ない内容でも、ページへ送った情報そのものを隠し通せるわけではないので、表示条件とアクセス制御は分けて考えます。

なお、until-foundという値には、ページ内検索などで見つかったときに表示する別の仕組みがあります。普通のhiddenと同じ前提で使わず、必要な動作と対象ブラウザーを確認しましょう。