【CSS】display:noneの解除方法

CSS

「display:none」は、HTML要素を非表示にするCSSのプロパティです。該当の要素をHTML上から削除したのと同じ効果をもち、スクリーンリーダーにも読み上げられないので、非表示にしたい要素に使用します。

「display:none」を解除するには、「display:block」や「display:inline」などに変更します。例えば以下のように記述します。

HTML:

<div id="target" style="display: none;">この要素は非表示になっています</div>

JavaScript:

document.getElementById("target").style.display = "block";

CSS:

#target {
  display: block;
}

また、JavaScriptのようにスクリプトを使って、クリックやタイマーイベントなどによって、表示非表示を切り替えることもできます。

このように「display:none」を解除することで、非表示になっていたHTML要素が再度表示されるようになります。ただし、「visibility:hidden」や「opacity」などによる非表示には、解除方法が異なります。