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

JavaScriptでdisplay:noneを使いこなす方法を学ぶ初心者JS
この記事は約10分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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を使用する際には、下記の注意点と対処法に留意してください。

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

まとめ

本記事では、display:noneを用いた要素の非表示方法や応用例を紹介しました。

注意点と対処法にも留意して、適切な非表示方法を選択してください。効果的な非表示処理を行うことで、ユーザー体験の向上に貢献できます。