ここでは、HTML で要素を非表示にする visibility: hidden と display: none の違いを実際に表示させることで確認しています。必要に応じて使い分けることで期待する表示を得ることができるようになることでしょう。
スポンサーリンク
違いを確認する HTML のサンプル
visibility: hidden と display: none の違いを実際に確認するサンプルは次の通りです。
<html> <body> <hr> <strong>visibility: hiddenの表示結果</strong> <div>１行目</div> <div style="visibility: hidden;">２行目</div> <div>３行目</div> <hr> <strong>display: noneの表示結果</strong> <div>１行目</div> <div style="display: none;">２行目</div> <div>３行目</div> <hr> </body> </html>
実際にブラウザに出力した結果
visibility: hiddenの表示結果
１行目
３行目
display: noneの表示結果
１行目
３行目
visibility: hidden と display: none の違い
上記の結果より、次のことがわかります。
- display: none
要素の存在自体をないもののように扱い、次の要素を切り詰めて表示する
- visibility: hidden
要素分の表示スペースはそのままに、次の要素を切り詰めないで表示する