display noneの2通りの解除方法と使える表示の値7つ

出典: Source Code | HD photo by Alexander Sinn (@swimstaralex) ...

display noneはCSSのプロパティのひとつであり、役割は「要素を非表示にすること」です。 一時的に要素ごと非表示にしたい時や、条件によって非表示にしたい時に使います。displayプロパティに値を指定することで、表示形式を切り替えることができます。 noneの値を変更することで、非表示を解除したり、適切な表示方法に変更することもできます。

出典: Display, electronics, monitor and screen | HD photo by Am...

display noneは、要素の非表示を実行します。 見た目的には、単に非表示になるだけですが、動作的には要素ごと消えています。指定した部分が、まるごと消えます。 同じ役割を持つプロパティとして、visibility hiddenがあります。visibility hiddenは要素を非表示にするだけですが、display noneは要素ごと消えます。

出典: Key Keyhole Lock - Free image on Pixabay

display noneは、要素を非表示にしたい時に便利なプロパティです。コンテンツの一部分を、一時的に消したい時などに活用されています。 ですが、display noneを解除したい時もあるでしょう。display noneの解除方法を2つ紹介しますので、参考にしてください。

出典: Source Code Pictures | Download Free Images on Unsplash

display noneの解除方法として、visibility hiddenを使うことが挙げられます。 visibility hiddenも、display noneと同じで、要素を非表示にする役割があります。display noneを解除して、代わりにvisibility hiddenを使うことができます。 ですが、display noneとvisibility hiddenは、動作的には微妙に違いがあります。

visibility hiddenの特性として、要素自体の削除を防ぐ効果があります。 display noneは、要素を非表示にするというよりは、「要素ごと消す」機能です。対してvisibility hiddenは、要素を非表示にするだけです。 要素自体は削除したくない、非表示にしてそこに残したい場合は、visibility hiddenを使いましょう。

出典: Apple iMac: close up of monitor, mouse and keyboard · Fre...

display noneの解除方法として、表示の値を指定することも挙げられます。 displayプロパティは、none以外にも値を指定することができます。noneだと非表示になるので、この値を別の値にすれば、display noneを解除することができます。 displayプロパティで指定できる値には、さまざまなものがあります。指定する値を変えれば、表示のレイアウトも変わってきます。

display noneを解除したい場合は、非表示から表示に切り替える方法があります。 単純に非表示を解除したいだけであれば、noneの値を書き換える必要はありません。単純に、display noneの記述を削除すればいいだけです。 あるいは、displayプロパティを残したまま、noneを別の値に書き換えることです。別の値に書き換えて表示するには、レイアウトとなる値を指定する必要があります。