【CSS】非表示にするならどっち?display:noneとvisibility:hiddenの違い

どうも@De_webdesignです。

CSSで要素非表示にする際の主な方法としてdisplay:none;visibility:hidden;があると思いますが、先日コーディングしていてふとこの二つの違いを知らないなーと思ったので調べてまとめました。

あまりvisibility:hiddenの方はdisplay:noneに比べて利用する機会が少なかったため、今まで違いを知らずにいたのですが、この二つの違いを理解して使うことで様々な要素の表示・非表示に対応できると思います。

display:none;

CSSプロパティのdisplayで指定できる値の一つ。他に指定できる値は「inline」とか「block」とかなどがありますが詳しい説明をご覧になりたい方は下記のURLが参考になりますのでどうぞご覧ください。

display:noneは文字通りディスプレイをなしにするので指定された要素は非表示になります。ただ*DOMからは消えないのでHTMLコード上では存在していることになります。ブラウザの開発者モードで確認してもらうと、HTMLコードの中にdisplay:noneをしたものが残っていると思います。

DOM:Document Object Modelの略。

visibility:hidden;

こちらもCSSプロパティのvisibilityで指定できる値の一つ。他には「visible」、「collapse」なども指定できます。ここではhiddenの値しか説明しませんので他のvisibilityの値について知りたい方は詳細は下記URLを参考にしてください。

visibility:hiddendisplay:noneと同様、要素を非表示にします。DOMにもちゃんと残ります

display:none と visibility:hiddenの違い

・要素をなくすか非表示にだけするか

両方とも要素を非表示にできるCSSプロパティですが、「非表示にするだけ」か「要素自体をなくす」かの違いがあります。

visility:hidden サンプル
visibility:hidden 適用前
このボックスにvisibility:hiddenを適用します。

 

適用後
このボックスにvisibility:hiddenを適用します。

 
「visibility:hidden」は要素を非表示にするだけなので、上記サンプルを見てもらえばわかる通り、要素がしっかりと残っていて見えなくなっているだけです。

display:none サンプル
display:none 適用前
このボックスにdisplay:noneを適用します。

 

適用後
このボックスにdisplay:noneを適用します。

 
「display:none」は要素ごと消してしまう(DOMには残りますよ)ので、上記サンプルの通り要素がつまります。ですのでdisplay:noneを使用して表示・非表示を切り替える場合はレイアウトが少し変わる場合があります。

・子孫要素の表示・非表示
visibility:hidden サンプル
visibility:hidden 適用前
子要素
適用後
子要素

また、visibility:hiddenは子孫要素を表示することができます。
上記のコードのように、親要素にvisibility:hiddenを子要素にvisibility:visibleを指定してあげると親要素だけ非表示になり、子要素は表示されたままになります。

display:none サンプル
display:none 適用前
子要素
適用後
子要素

display:noneでは親要素にdisplay:noneを指定し、子孫要素でdisplay:blockなどを指定しても表示させてあげることができません。

まとめ

今まで感覚的につかっていたdisplay:nonevisibility:hiddenですが上記の違い、特に子孫要素の箇所は全然知らなかったので今後親要素だけ非表示にしたいみたいなところがあったときにはvisibility:hiddenを使用していこうと思います。(そんな機会があるかはわかりませんが)

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。