JavaScriptでdisplay:noneを使いこなす7つの方法

はじめに
●display:noneとは
●基本的な使い方
- ○サンプルコード1: HTML要素を非表示にする
- ○サンプルコード2: クリックイベントで要素を非表示にする
●応用例
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptでdisplay:noneを使いこなす方法が身につくでしょう。

初心者向けに、基本的な使い方から応用例まで、詳細なサンプルコードと共に解説しています。

ぜひ参考にして、自分のプロジェクトに活用してください。

●display:noneとは

display:noneは、HTML要素を画面上から完全に非表示にするCSSプロパティです。

要素自体は存在し続けますが、画面上ではまるで存在していないかのようになります。

JavaScriptと組み合わせることで、動的な操作が可能になります。

●基本的な使い方

○サンプルコード1: HTML要素を非表示にする

このコードでは、JavaScriptを使ってHTML要素を非表示にする方法を紹介しています。

この例では、要素に直接スタイルを適用して、display:noneを設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素を非表示にする</title>
</head>
<body>
  <div id="target">非表示にする要素です。</div>
  <script>
    const target = document.getElementById('target');
    target.style.display = 'none';
  </script>
</body>
</html>

○サンプルコード2: クリックイベントで要素を非表示にする

このコードでは、ボタンをクリックした時に要素を非表示にする方法を紹介しています。

この例では、ボタンのクリックイベントリスナーを設定し、イベント発生時に要素のdisplayプロパティをnoneに設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クリックイベントで要素を非表示にする</title>
</head>
<body>
  <div id="target">非表示にする要素です。</div>
  <button id="btn">非表示にする</button>
  <script>
    const target = document.getElementById('target');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
      target.style.display = 'none';
    });
  </script>
</body>
</html>

●応用例

○サンプルコード3: 複数の要素を一度に非表示にする

このコードでは、クラス名を指定して複数の要素を一度に非表示にする方法を紹介しています。

この例では、クラス名で要素を選択し、forEachでループ処理を行い、すべての要素にdisplay:noneを設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数の要素を一度に非表示にする</title>
</head>
<body>
  <div class="target">非表示にする要素1</div>
  <div class="target">非表示にする要素2</div>
  <div class="target">非表示にする要素3</div>
  <button id="btn">非表示にする</button>
  <script>
    const targets = document.getElementsByClassName('target');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
      Array.from(targets).forEach(target => {
        target.style.display = 'none';
      });
    });
  </script>
</body>
</html>

○サンプルコード4: 指定した要素だけを非表示にする

このコードでは、特定の条件を満たす要素だけを非表示にする方法を紹介しています。

この例では、テキスト内容が一致する要素を選択し、その要素にdisplay:noneを設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>指定した要素だけを非表示にする</title>
</head>
<body>
  <div class="target">非表示にする要素</div>
  <div class="target">表示される要素</div>
  <div class="target">非表示にする要素</div>
  <button id="btn">非表示にする</button>
  <script>
    const targets = document.getElementsByClassName('target');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
      Array.from(targets).forEach(target => {
        if (target.textContent === '非表示にする要素') {
          target.style.display = 'none';
        }
      });
    });
  </script>
</body>
</html>

○サンプルコード5: ページ読み込み時に特定の要素を非表示にする

このコードでは、ページが読み込まれた時に特定の要素を非表示にする方法を紹介しています。

この例では、DOMContentLoadedイベントを使ってページ読み込み時に要素のdisplayプロパティをnoneに設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページ読み込み時に特定の要素を非表示にする</title>
</head>
<body>
  <div id="target">非表示にする要素です。</div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const target = document.getElementById('target');
      target.style.display = 'none';
    });
  </script>
</body>
</html>

○サンプルコード6: ユーザー入力に応じて要素を非表示にする

このコードでは、ユーザーの入力に基づいて要素を非表示にする方法を紹介しています。

この例では、入力フォームで指定されたクラス名を持つ要素を非表示にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ユーザー入力に応じて要素を非表示にする</title>
</head>
<body>
  <div class="example">非表示にする要素1</div>
  <div class="sample">非表示にする要素2</div>
  <div class="example">非表示にする要素3</div>
  <input id="input" type="text" placeholder="クラス名を入力">
  <button id="btn">非表示にする</button>
  <script>
    const btn = document.getElementById('btn');
    const input = document.getElementById('input');

    btn.addEventListener('click', () => {
      const className = input.value;
      const targets = document.getElementsByClassName(className);

      Array.from(targets).forEach(target => {
        target.style.display = 'none';
      });
    });
  </script>
</body>
</html>

○サンプルコード7: アニメーション効果を付けて要素を非表示にする

このコードでは、アニメーション効果を伴って要素を非表示にする方法を紹介しています。

この例では、CSSアニメーションを利用して、要素をフェードアウトさせた後にdisplayプロパティをnoneに設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アニメーション効果を付けて要素を非表示にする</title>
  <style>
    .fade-out {
      animation: fadeOut 1s linear forwards;
    }

    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }
  </style>
</head>
<body>
  <div id="target">非表示にする要素です。</div>
  <button id="btn">非表示にする</button>
  <script>
    const target = document.getElementById('target');
    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
      target.classList.add('fade-out');
      setTimeout(() => {
        target.style.display = 'none';
      }, 1000); // アニメーションが終わる1秒後に要素を非表示にする
    });
  </script>
</body>
</html>

●注意点と対処法

display:noneを使用する際には、下記の注意点と対処法に留意してください。

非表示になった要素は、ページ上でスペースを占有しなくなります。
これによってレイアウトが崩れることがあります。対処法として、visibilityプロパティを使用して要素を透明にすることが考えられます。
display:noneを設定した要素は、スクリーンリーダーによっても読み上げられません。
アクセシビリティを考慮したい場合は、aria-hidden属性を使用することを検討してください。