7cc@はてなブログ

JavaScriptとかとか

visibility: hidden と display: none の違いは2つ

この2つのCSSの違いについてはよく、「visibility: hiddenは空白を残す」ということだけ説明されている。しかし、詳しく説明するとそれ以外の違いもある。

レイアウトへの影響

visibility: hiddenはレイアウトへの影響を残す。 具体的には次の3つ。

  1. 要素の表示領域を残す
    「要素が生成するボックスのみ残り、要素自体は無くなる」と考えると分かりやすい
    • 要素の表示域が空白になる。
    • クリックなどのマウスイベントを受け付けなくなる。
  2. 子孫要素を表示可
    • visibility: visibleを指定することで、指定の子孫要素以下を可視化できる。
  3. 他の要素への影響を残す
    • marginやfloatなども有効なままで、単に空白を残すだけではない
    • これを利用して、疑似要素と合わせたclearfixがよく使われていた

display: noneはその要素の表示と、影響を完全に無くす。
子孫要素を表示する方法も無い。

transitionの可否

visibility: hiddenは可能。
display: noneは不可能。

「visibility + transition」の動作は、n秒後にvisibilityの値が変わる、というもの。他のアニメーションと違い段々とは変化しない。

デモ

この文字が表示されましたね?ソースは開発者ツールから見てください。

これは、ツールチップやドロップダウンに利用できる。実際的な例。