【徹底解説】HTMLとCSSで要素を非表示にする全方法：状況に合わせた最適な方法とは？

2024-05-02

HTMLとCSSで要素を非表示にする方法：スペースを取らずに隠す

ウェブページを作成する際、特定の要素を非表示にすることはよくある操作です。しかし、単に要素を削除してしまうと、レイアウトが崩れてしまうことがあります。そこで今回は、要素を非表示にしつつ、スペースを空けずに他の要素を配置する方法について、HTMLとCSSを用いて解説します。

display: none; を使う

最も一般的な方法は、CSSの display プロパティに none を設定する方法です。このプロパティを適用すると、対象要素とその子要素が完全に非表示になり、スペースも占有しなくなります。

.element {
  display: none;
}

上記のように .element クラスに display: none; を設定すると、そのクラスを持つ要素は非表示になります。

利点:

シンプルでわかりやすい
確実に要素を非表示にできる

スクリーンリーダーなどの補助技術で認識されなくなる可能性がある
JavaScript で要素を表示/非表示を操作する場合、複雑になる

visibility: hidden; を使う

もう一つの方法は、CSSの visibility プロパティに hidden を設定する方法です。このプロパティを適用すると、対象要素は非表示になりますが、スペースは空けたままで、スクリーンリーダーなどの補助技術でも認識されます。

.element {
  visibility: hidden;
}

display: none; よりもシンプルな場合がある

要素の輪郭線が表示される場合がある
子要素も非表示になってしまう

opacity: 0; を使う

opacity プロパティを使って、要素の透明度を 0 に設定することで、実質的に非表示にすることもできます。この方法では、要素自体は非表示にならず、スペースも空けたままで、スクリーンリーダーなどの補助技術でも認識されます。

.element {
  opacity: 0;
}

アニメーションなどでの利用に適している

ぼやけた表示になる
古いブラウザでは対応していない場合がある

その他の方法

上記以外にも、以下のような方法で要素を非表示にすることができます。

position: absolute; と left: -9999px; を使う
overflow: hidden; を親要素に使う
JavaScriptを使って要素を非表示/表示を操作する

それぞれの方法にはメリットとデメリットがあるので、状況に合わせて適切な方法を選択する必要があります。

HTMLとCSSで要素を非表示にする方法はいくつかあります。それぞれの方法の利点と欠点を理解し、状況に合わせて適切な方法を選択することが重要です。

以下に、HTMLとCSSを用いて要素を非表示にする方法のサンプルコードを示します。

display: none; を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素を非表示にする</title>
  <style>
    .element {
      display: none;
    }
  </style>
</head>
<body>
  <p>この段落は表示されます。</p>
  <div class="element">この要素は非表示になります。</div>
  <p>この段落も表示されます。</p>
</body>
</html>

このコードでは、div 要素に .element クラスを付与し、CSSで display: none; を設定しています。その結果、div 要素は非表示になり、ページには表示されなくなります。

visibility: hidden; を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素を非表示にする</title>
  <style>
    .element {
      visibility: hidden;
    }
  </style>
</head>
<body>
  <p>この段落は表示されます。</p>
  <div class="element">この要素は非表示になります。</div>
  <p>この段落も表示されます。</p>
</body>
</html>

このコードは、上記コードと同様に div 要素に .element クラスを付与し、CSSで visibility: hidden; を設定しています。しかし、このコードでは display: none; を使った場合と異なり、div 要素は非表示になりますが、スペースは空けたままで、スクリーンリーダーなどの補助技術でも認識されます。

opacity: 0; を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素を非表示にする</title>
  <style>
    .element {
      opacity: 0;
    }
  </style>
</head>
<body>
  <p>この段落は表示されます。</p>
  <div class="element">この要素は非表示になります。</div>
  <p>この段落も表示されます。</p>
</body>
</html>

上記はあくまでも基本的な例であり、状況に合わせて様々な方法を組み合わせることもできます。

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

前述で紹介した3つの方法に加え、HTMLとCSSで要素を非表示にする方法はいくつかあります。以下に、代表的な方法とそれぞれの利点と欠点をまとめました。

方法	利点	欠点	補足
`position: absolute;` & `left: -9999px;`	要素を画面外に追いやることで非表示にする	古いブラウザでは非対応の可能性がある	要素のサイズが変化すると、意図した位置に表示されない可能性がある
`overflow: hidden;` を親要素に使う	親要素からはみ出た部分を非表示にする	子要素の配置が制限される	親要素の高さを固定する必要がある
`JavaScript` で要素を非表示/表示を操作する	動的な処理に適している	JavaScript が無効な場合は非表示にならない	コードが複雑になる