アニメーションで要素を非表示にする！ opacity: 0 と visibility: hidden の使い分け

2024-04-08

opacity: 0 と visibility: hidden は、要素を非表示にするという点では同じ効果がありますが、いくつかの重要な違いがあります。

レンダリング:

opacity: 0: 要素はレンダリングされますが、透明になります。
visibility: hidden: 要素はレンダリングされません。

レイアウト:

opacity: 0: 要素はレイアウトスペースを占有します。

アクセシビリティ:

opacity: 0: スクリーンリーダーは要素を読み上げることができます。

アニメーション:

opacity: 0: アニメーションで透明度の変化を表現できます。
visibility: hidden: アニメーションで要素の表示/非表示を表現できません。

使用例:

opacity: 0: 画像をフェードイン/フェードアウトしたい場合などに使用します。
visibility: hidden: 要素を一時的に非表示にして、後で再び表示したい場合などに使用します。

補足:

display: none は、要素を完全に非表示にする別の方法です。
pointer-events: none は、要素を非表示にしつつ、マウスイベントを透過させることができます。

例:

<div style="opacity: 0">これは透明な要素です</div>
<div style="visibility: hidden">これは非表示の要素です</div>

実行結果:

"これは透明な要素です" は、薄く表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>opacity: 0 と visibility: hidden の違い</title>
</head>
<body>
  <h1>サンプルコード</h1>
  <p>
    <button id="btn-opacity">透明にする</button>
    <button id="btn-hidden">非表示にする</button>
  </p>
  <div id="target">
    これはサンプル要素です
  </div>
  <script>
  const target = document.getElementById('target');
  const btnOpacity = document.getElementById('btn-opacity');
  const btnHidden = document.getElementById('btn-hidden');

  btnOpacity.addEventListener('click', () => {
    target.style.opacity = 0;
  });

  btnHidden.addEventListener('click', () => {
    target.style.visibility = 'hidden';
  });
  </script>
</body>
</html>

"透明にする" ボタンをクリックすると、"これはサンプル要素です" が透明になります。

このコードを参考に、opacity: 0 と visibility: hidden の違いを実際に確認してみてください。

opacity: 0 と visibility: hidden 以外の方法

display: none:

要素を完全に非表示にします。
レイアウトスペースも占有しません。
アニメーションには使用できません。

#target {
  display: none;
}

position: absolute と left: -9999px:

要素を画面外に移動します。

#target {
  position: absolute;
  left: -9999px;
}

pointer-events: none:

要素を非表示にしつつ、マウスイベントを透過させます。
要素自体は表示されたままになります。

#target {
  pointer-events: none;
}

#target {
  clip: rect(0px, 0px, 0px, 0px);
}

要素を完全に非表示にする場合は、display: none を使用するのが最良です。
要素を一時的に非表示にして、後で再び表示したい場合は、visibility: hidden を使用するのが良いでしょう。
要素を非表示にしつつ、マウスイベントを透過させたい場合は、pointer-events: none を使用するのが良いでしょう。
アニメーションで要素の表示/非表示を表現したい場合は、opacity: 0 または clip: rect(0px, 0px, 0px, 0px) を使用するのが良いでしょう。