にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

【CSS】要素の非表示はどっちを使う?display:noneとvisibility:hiddenの違い

f:id:ChihaYuu:20170405171823j:plain

CSSの要素非表示にする主な手法として、display:none;visibility:hidden;があると思いますが、この2つの違いを知らずに使用していたので、調べてまとめました。

僕はdisplay:none;を頻繁に使用しており、visibility:hidden;をあまり使ったことがありませんでしたが、違いを知ることができ、要素の表示・非表示に対する幅が広がりました。

display:none;

CSSプロパティのdisplayで指定できる値のひとつ。displayでは「inline」や「block」などの値が選べますが、詳しいことはわかりません。詳しく知りたい方は以下のサイトを参考にしてみてください。
www.htmq.com

display:noneはSEO的に「悪」だからあまり使用しないほうがいいと言われていますが、SEOとか詳しくないし便利だから僕は使う。
seopack.jp

display:none;の動作は以下の通り。


display:none;適用前
f:id:ChihaYuu:20170406135940j:plain
display:none;適用後
f:id:ChihaYuu:20170406140949j:plain

visibility:hidden;

CSSプロパティのvisibilityで指定できる値のひとつ。visibilityプロパティでは「visible(表示)」や「hidden(非表示)」を指定する。
www.htmq.com

visibility:hidden;の動作は以下の通り。


visibility:hidden;適用前
f:id:ChihaYuu:20170406141839j:plain
visibility:hidden;適用後
f:id:ChihaYuu:20170406141848j:plain

display:noneとvisibility:hiddenの違い

2つの実行結果を見ればわかるように、display:noneは要素ごと消す。visibility:hiddenは要素を非表示にするということがわかります。

ここで注意したいのがdisplay:noneでの表示・非表示の切り替え。要素ごと消す効果があるので、レイアウトが変わる場合があるので注意しましょう。

子要素の表示・非表示はdisplay:noneでは出来ないけど、visibility:hiddenでは出来る。

まとめ

今までは知識もなく、非表示になればいいとdisplay:noneばかり使用していましたが、これを気に用途ごとに使い分けるようにします。

SEO的にはdisplay:noneよりvisibility:hiddenのほうがいいのかな?