[ HTML ] visibility: hidden と display: none の違いは?

Pocket

ここでは、HTML で要素を非表示にする visibility: hidden と display: none の違いを実際に表示させることで確認しています。必要に応じて使い分けることで期待する表示を得ることができるようになることでしょう。

スポンサーリンク

違いを確認する HTML のサンプル

visibility: hidden と display: none の違いを実際に確認するサンプルは次の通りです。

<html>
<body>
  <hr>
  <strong>visibility: hiddenの表示結果</strong>
  <div>1行目</div>
  <div style="visibility: hidden;">2行目</div>
  <div>3行目</div>
  <hr>
  <strong>display: noneの表示結果</strong>
  <div>1行目</div>
  <div style="display: none;">2行目</div>
  <div>3行目</div>
  <hr>
</body>
</html>

実際にブラウザに出力した結果


visibility: hiddenの表示結果
1行目

2行目

3行目


display: noneの表示結果
1行目

2行目

3行目


visibility: hidden と display: none の違い

上記の結果より、次のことがわかります。

  • display: none

要素の存在自体をないもののように扱い、次の要素を切り詰めて表示する

  • visibility: hidden

要素分の表示スペースはそのままに、次の要素を切り詰めないで表示する

スポンサーリンク


Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>