【保存版】CSSで要素を隠すテクニック：display none以外にも知っておくべき方法

2024-04-23

CSSにおける「display: none」の「反対」について

要素の表示を制御する 2 つの主要なプロパティは以下の通りです。

display: 要素の表示方法を決定します。「display: none」 は要素を完全に非表示にし、「display: block」 や 「display: inline」 などの他の値は、要素をどのように表示するかを指定します。
visibility: 要素が見えるかどうかを決定します。「visibility: hidden」 は要素を非表示にしますが、要素は依然として存在し、レイアウトに影響を与えます。一方、「visibility: visible」 は要素を表示します。

状況に応じた適切なプロパティ選択

それぞれのプロパティには異なる影響があるため、状況に応じて適切なプロパティを選択することが重要です。

「display: none」 を使用すると、要素が完全に非表示になり、レイアウトから完全に削除されます。つまり、要素が存在しないかのように扱われます。これは、要素を完全に非表示にして、ページの構造を変えたくない場合に適しています。
「visibility: hidden」 を使用すると、要素は非表示になりますが、要素は依然として存在し、レイアウトにスペースを占有します。これは、要素を一時的に非表示にして、後で再び表示したい場合に適しています。

その他の代替手段

上記のプロパティに加えて、要素を非表示にするために以下の方法も使用できます。

opacity: 0: 要素の透明度を 0 に設定すると、要素は実質的に非表示になります。ただし、要素は依然として存在し、レイアウトにスペースを占有します。
position: absolute; left: -9999px; top: -9999px: 要素を画面外に配置すると、要素は非表示になります。ただし、この方法は古いブラウザでは互換性がない場合があります。

「display: none」には真の「反対」はありませんが、「visibility: visible」 は最も近いものです。状況に応じて適切なプロパティを選択することが重要です。また、上記以外にも要素を非表示にする方法はいくつかあります。

以下は、参考となる情報源です。

HTMLとCSSを使ったサンプルコード

HTML

<!DOCTYPE html>
<html>
<head>
<style>
  .visible {
    display: block;
    background-color: #f00;
    padding: 10px;
  }

  .hidden {
    display: none;
    background-color: #0f0;
    padding: 10px;
  }

  .invisible {
    visibility: hidden;
    background-color: #00f;
    padding: 10px;
  }
</style>
</head>
<body>

  <p>**display: block;**</p>
  <div class="visible">この要素は表示されます。</div>

  <p>**display: none;**</p>
  <div class="hidden">この要素は非表示です。</div>

  <p>**visibility: hidden;**</p>
  <div class="invisible">この要素は非表示ですが、レイアウトには影響を与えます。</div>

</body>
</html>

説明

このコードでは、3 つの <div> 要素それぞれに異なる CSS クラスを適用しています。

.visible クラスは display: block を設定し、要素をブロックレベル要素として表示します。
.hidden クラスは display: none を設定し、要素を非表示にします。
.invisible クラスは visibility: hidden を設定し、要素を非表示にしますが、要素は依然として存在し、レイアウトにスペースを占有します。

結果

ブラウザでこのコードを開くと、以下のようになります。

最初の <div> 要素は緑色の背景で表示されます。
2 番目の <div> 要素は表示されません。
3 番目の <div> 要素は青色の背景で表示されますが、その部分は空白になります。

この例は、display: none と visibility: hidden の違いを理解するのに役立ちます。

以下のコードは、JavaScript を使用して要素を表示/非表示を切り替える方法を示しています。

<!DOCTYPE html>
<html>
<head>
<style>
  .element {
    background-color: #f00;
    padding: 10px;
  }
</style>
</head>
<body>

  <p>クリックして要素を表示/非表示を切り替える</p>
  <button onclick="toggleElement()">要素の表示/非表示を切り替える</button>

  <div id="myElement" class="element">この要素は表示されています。</div>

  <script>
  function toggleElement() {
    var element = document.getElementById("myElement");
    if (element.style.display === "none") {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  }
  </script>

</body>
</html>

このコードでは、ボタンをクリックすると JavaScript 関数 toggleElement() が呼び出されます。この関数は、getElementById メソッドを使用して要素を取得し、その display プロパティの値をチェックします。

プロパティの値が "none" の場合は、要素が表示されるように "block" に設定されます。

このサンプルコードは、display: none と visibility: hidden の違いを理解し、さまざまな方法で要素を表示/非表示を切り替える方法を学ぶのに役立ちます。

CSSで要素を非表示にするその他の方法

opacity: 0

要素の透明度を 0 に設定することで、実質的に非表示にすることができます。ただし、要素は依然として存在し、レイアウトにスペースを占有することに注意が必要です。

#element {
  opacity: 0;
}

position: absolute; left: -9999px; top: -9999px;

要素を画面外に配置することで、非表示にすることができます。ただし、この方法は古いブラウザでは互換性がない場合があります。

#element {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

pointer-events: none

#element {
  pointer-events: none;
}

z-index: -1

要素を他の要素の下に配置することで、非表示にすることができます。ただし、要素が重なっている他の要素の一部がまだ表示されている場合は、この方法は効果的ではない可能性があります。

#element {
  z-index: -1;
}

使用例

opacity: 0 は、要素を完全に非表示にしたくないが、目立たなくしたい場合に適しています。
position: absolute; left: -9999px; top: -9999px; は、要素を一時的に非表示にして、後で再び表示したい場合に適しています。
pointer-events: none は、ユーザーとのインタラクションを無効化したいが、要素を完全に非表示にしたくない場合に適しています。
z-index: -1 は、要素を他の要素の下に配置して、部分的に非表示にしたい場合に適しています。

注意点

上記の方法を使用する場合は、以下の点に注意する必要があります。