HTMLで非表示のdiv要素を作成する：5つの方法とそれぞれのメリットとデメリット

2024-04-12

HTMLで非表示のdiv要素を作成する方法：改行や横幅を発生させずに

display: none; を使用する

最も簡単な方法は、display プロパティに none を指定することです。この方法を使うと、div要素とその内容が完全に非表示になります。

<div style="display: none;">
  このdiv要素は非表示になります。
</div>

メリット:

簡単でシンプル
すべてのブラウザでサポートされている

非表示なので、スクリーンリーダーで読み上げられない
JavaScriptで操作できない

visibility: hidden; を使用する

visibility プロパティに hidden を指定すると、div要素とその内容は画面に表示されなくなりますが、スクリーンリーダーで読み上げられたり、JavaScriptで操作されたりするようになります。

<div style="visibility: hidden;">
  このdiv要素は非表示になりますが、スクリーンリーダーで読み上げられます。
</div>

position: absolute; と left: -9999px; を使用する

position プロパティを absolute に、left プロパティを -9999px に指定すると、div要素を画面の左端の外側に配置することができます。この方法を使うと、div要素は画面に表示されませんが、スクリーンリーダーで読み上げられたり、JavaScriptで操作されたりするようになります。

<div style="position: absolute; left: -9999px;">
  このdiv要素は画面外に配置されます。
</div>

overflow: hidden; と height: 0; を使用する

<div style="overflow: hidden; height: 0;">
  このdiv要素は高さ0に設定されます。
</div>

コメントアウトする

開発中のみ非表示にする場合は、div要素をコメントアウトすることもできます。

公開環境では表示されてしまう

HTMLで非表示のdiv要素を作成するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあり、状況によって最適な方法が変わってきます。

改行や横幅を発生させずに非表示にする方法

上記のいずれの方法を使用しても、div要素は改行や横幅を発生させる可能性があります。改行や横幅を発生させずに非表示にするためには、以下の方法があります。

display: none; を使用する
visibility: hidden; を使用する
position: absolute; と left: -9999px; を使用する
overflow: hidden; と height: 0; を使用する
コメントアウトする

例

<div style="display: none;">
  このdiv要素は改行や横幅を発生させずに非表示になります。
</div>

この例では、display: none; を使用して、div要素とその内容を完全に非表示にしています。この方法を使うと、div要素は改行や横幅を発生させません。

[CSS overflow プロパティ

<div id="my-hidden-div">
  <h1>非表示のタイトル</h1>
  <p>このdiv要素は非表示です。</p>
</div>

<button onclick="toggleVisibility()">表示/非表示</button>

function toggleVisibility() {
  const div = document.getElementById("my-hidden-div");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}

説明

このサンプルコードでは、display プロパティを使用して、my-hidden-div というIDを持つdiv要素を表示/非表示を切り替えています。

toggleVisibility() 関数は、my-hidden-div 要素を取得します。
要素の display プロパティが none の場合、block に変更します。

実行結果

このコードを実行すると、ページにボタンが表示されます。ボタンをクリックすると、my-hidden-div 要素が表示/非表示されます。

上記のコード以外にも、visibility プロパティや position プロパティを使用して、div要素を表示/非表示することができます。

注意

このコードはサンプルコードであり、そのまま使用することはできません。実際の使用には、必要に応じて修正する必要があります。

その他の非表示にする方法

hidden 属性を使う

HTML5では、hidden 属性を使用してdiv要素を非表示にすることができます。

<div hidden>
  <h1>非表示のタイトル</h1>
  <p>このdiv要素は非表示です。</p>
</div>

CSSの@mediaクエリを使う

特定のメディアクエリに合致する場合のみ、div要素を非表示にすることができます。

<div>
  <h1>表示されるタイトル</h1>
  <p>このdiv要素は表示されます。</p>
</div>

@media (max-width: 768px) {
  div {
    display: none;
  }
}

デバイスや画面サイズに応じて、div要素の表示/非表示を切り替えられる

CSSの知識が必要

JavaScriptを使用して、div要素の表示/非表示を切り替えることができます。

<div id="my-div">
  <h1>表示されるタイトル</h1>
  <p>このdiv要素は表示されます。</p>
</div>

<button onclick="hideDiv()">非表示にする</button>

<script>
function hideDiv() {
  const div = document.getElementById("my-div");
  div.style.display = "none";
}
</script>