display: none

display: none は何も生成しない

Last update: 2008-09-09

display プロパティの値に [none] を指定した要素は生成されなくなる。
表示に関するプロパティの visibility で [hidden] を値に指定したブロック要素の効果は、該当ブロックを「隠す」となり、対象ブロック部分には空白が「表示される」。これに対し display で [none] を値に指定した場合は、該当するブロック要素自体が生成されないため「存在しない」レンダリング結果となる。これが両セレクタの大きな違いだ。
以下 display: none と visibility: hidden のレンダリングサンプル。

display: none と visibility: hidden のレンダリング結果

パラグラフ中の単語 Firefox に span 要素を設定して、display: none、visibility: hidden を指定したレンダリングテスト。

標準テキスト
Firefox は、圧倒的なスピード、革新的な新機能、最高の安全性を提供します。
visibility: hidden
は、圧倒的なスピード、革新的な新機能、最高の安全性を提供します。
display: none
は、圧倒的なスピード、革新的な新機能、最高の安全性を提供します。

display プロパティで [none] を指定した場合、 Firefox 自体が存在していないようにレンダリングされる。visible: hidden との違いが分かれば display: none との使い分けができるはずだ。

ただし、display: none を手軽に利用してはいけない。というよりも、現状、検索エンジンスパム扱いされる可能性があるので、必要性がない限り利用しない方が良い。この問題については「display: none 注意」などをキーワードに Web 上で検索してみると良い。

▲ Return to Top