CSSの「非表示」指定、どっちを使う？ display: none; と visibility: hidden; の違い

display:noneとvisibility: hidden両方HTMLから要素を非表示にしてくれます。

しかし、こちらをきちんと意味を理解して使い分けられているでしょうか？

こちらをきちんと理解して活用しないと実務で思わぬ不具合が生じる可能性があります。

display: none;とvisibility: hidden; の違いをまとめると以下になります。

以上になります。

ここからは具体的にどのようにこの２つを使い分けるかについて解説していきます。

display: none;を活用する場面

display:none;を活用する場面は、要素の幅が画面上に残られると困る場面です。

例えば、モーダルウインドウやポップアップを作りたい時はdisplay: none;を活用します。

これらをvisibility: hidden;で設定してしまうと、ユーザーが本来クリックしたい場所と要素が重なり、クリックしたい所がクリックできないなどの不具合が生じます。

visibility: hidden; を活用する場面

visibility: hidden; を活用する場面は、要素の幅を画面上に残しておきたい場面です。

例えば、アコーディオンやスライドメニューを作りたい時はvisibility: hidden;を活用します。

ここでdisplay:none;を使ってしまうと、クリックした瞬間メニューが出現するという、デザイン的にあまりよくないコードになってしまいます。

要素をDOMからも完全に削除したい時

実はこれらのプロパティ両方とも画面から消えたとしても完全にDOMから消えてはいません。

もし完全にDOMから削除したい時はJavascriptのremove()を使います。

const object = document.querySelector(".object");
//要素を完全にDOMから削除
object.remove();

これでOKです。

まとめ

display: none;とvisibility: hidden;は同じように見えて実は違う挙動をします。

また、完全に要素から削除したい時は、Javascriptのremove()を使えばDOMからも完全に削除出来ます。

ぜひこれらを使い分けてWEB制作者としてのスキルを高めてください。