HTML | hiddenで要素を非表示(display:none)にする方法

2021-12-24HTML,HTML 属性

CSSを使わずにdisplay:noneをHTMLのみで指定可能なHTMLのグローバル属性「hidden」と簡単な指定方法を紹介しています。

hiddenで要素を非表示にする

HTML5から追加された属性hiddenは、HTMLコードにて指定する事で要素を非表示の状態にする事が可能です。

See the Pen CSS | Shadows that make the text float by yochans (@yochans) on CodePen.

hidden属性は、要素のdisplayステータスをnoneに切り替えます。

hiddenの指定方法は下記のパターンでいずれも指定したHTML要素に対して「display:none」が設定されます。

<p hidden>この部分は非表示</p>
<p hidden="">この部分は非表示</p>

hiddenの上書き

hiddenとなっている要素はCSSのdisplayの値を変更する事で表示・非表示を切り替える事が可能です。
試してみた結果、初期状態ではHTMLよりCSSでの指定が優先されるようです。

<p class="hidden" hidden>この部分は非表示です</p>
.hidden {
	display: block;
}

hiddenの注意点として「hidden=""」で指定する場合、引数になにを入れても、例えば「none」「false」「no」などを入れても「display:none」となりますので注意して下さい。

JavaScriptなどで動的に表示・非表示を変更したい場合は、やはりCSSのdisplayの値を書き換えるべきかと思います。

また、display:noneを指定した要素は幅・高さのサイズを持たずスペースを確保しませんので、以降のHTML要素が詰まる事に注意が必要です。

2021-12-24HTML,HTML 属性

Posted by Yousuke.U