display:noneとvisiblity:hiddenはどちらも要素を非表示にする時に指定しますが、display:noneは要素を「非表示にする」だけでなく、その要素自体がレイアウト計算から完全に除外されます。で、visibility:hiddenは要素を「非表示」にするものの、レイアウトのスペースは維持されます。
display:none と visibility:hiddenの違い
| セル1 | セル２ | セル4 |
上のサンプルで動作を確認してもらうとわかるかと思いますが、セル2はvisibility:hidden;で要素を非表示にし、セル3はdisplay:none;で非表示にしています。表でまとめると…
| プロパティ | 効果 | 要素の表示状態 | レイアウトへの 影響 | 例 |
|---|---|---|---|---|
display: none; | 要素の非表示。 | 要素をレイアウトごと非表示。 | 要素が削除されるため、その周りの要素が詰めて表示される。 | <div style="display:none;">非表示</div> |
display: block; | 要素の表示。 | 要素をレイアウトごと表示。 | 新しい行に表示され、上部や下部にマージンが追加されることがある。 | <div style="display:block;">表示</div> |
| 要素の非表示。 | 要素は非表示だが、レイアウト内にはそのスペースが残る。 | 要素が視覚的に非表示でも、スペースは占有され、周囲の要素はその位置に影響される。 | <div style="visibility:hidden;">非表示</div> |
visibility: visible; | 要素の表示。 | 表示。 | 要素は表示されるが、その周りの要素は動かず、レイアウトには影響なし。 | <div style="visibility: |
まとめ
要素を完全に除外したい場合はdisplay:none;を使用し、レイアウトのスペースを維持したい場合はvisibility:hidden;を使用します。
コメント