【初心者必見】JavaScriptのdisplay:noneで要素を消す！3分でわかる表示・非表示の切り替え方法

こんにちは、とまだです。

JavaScriptで「要素を消したり表示したり」したいのに、うまくいかなくて困っていませんか？

私も最初、display: noneの使い方がわからなくて、何度も試行錯誤しました。

今回は、JavaScriptのdisplay: noneを使った要素の表示・非表示の切り替えを、部屋の電気のスイッチに例えながら、誰でも理解できるように解説します。

display: noneとは？部屋の電気で理解する仕組み

display: noneって、難しそうに聞こえますよね。

でも実は、部屋の電気を消すスイッチと同じなんです。

電気を消すと部屋が真っ暗になるように。 display: noneを使うと、Webページの要素が完全に見えなくなります。

// 要素を非表示にする（電気を消す）
element.style.display = 'none';

// 要素を表示する（電気をつける）
element.style.display = 'block';

ここで重要なのは、電気を消しても部屋自体は存在していることです。

同じように、display: noneで要素を消しても、HTMLのコード上には残っているんです。

なぜ要素の表示・非表示が必要なの？

「最初から必要ない要素なら、HTMLに書かなければいいのでは？」

そう思うかもしれません。

でも、こんな場面を想像してみてください。

ECサイトの場合：

• 「カートに追加しました」のメッセージ
• エラーメッセージの表示
• ログイン後にだけ見せたい情報
• モーダルウィンドウ（ポップアップ）

これらは必要な時だけ表示したいですよね。

そんな時にdisplay: noneが大活躍するんです。

JavaScriptでdisplay: noneを使う基本の書き方

では、実際にどう書くのか見ていきましょう。

1. 要素を取得して非表示にする

// IDで要素を取得
const myElement = document.getElementById('myBox');

// 要素を非表示にする
myElement.style.display = 'none';

この2行だけで、myBoxというIDの要素が消えます。

シンプルですよね。

2. ボタンクリックで表示・非表示を切り替える

実際によく使うのは、ボタンクリックでの切り替えです。

const button = document.getElementById('toggleButton');
const content = document.getElementById('content');

button.addEventListener('click', function() {
    if (content.style.display === 'none') {
        content.style.display = 'block';
    } else {
        content.style.display = 'none';
    }
});

「もし非表示なら表示、表示なら非表示」という処理です。

まるで電気のスイッチをパチパチ切り替えるようなイメージですね。

display: noneとvisibility: hiddenの違いを理解しよう

ここで、よく混同されるvisibility: hiddenとの違いを説明します。

例えるなら、こんな違いです。

• display: none = 家具を部屋から完全に撤去
• visibility: hidden = 家具に透明な布をかける

// display: noneの場合（完全に消える）
element.style.display = 'none';

// visibility: hiddenの場合（見えないけどスペースは残る）
element.style.visibility = 'hidden';

visibility: hiddenだと、要素は見えなくなりますが、スペースは残ったままです。

レイアウトを崩したくない時はvisibilityを使いましょう。

よくあるつまずきポイントと解決法

1. 要素が取得できない問題

// ❌ よくある間違い
const element = document.getElementById('myElement');
element.style.display = 'none'; // エラーになる！

原因： HTMLが読み込まれる前にJavaScriptが実行されている

解決法：

// ✅ DOMContentLoadedを使う
document.addEventListener('DOMContentLoaded', function() {
    const element = document.getElementById('myElement');
    element.style.display = 'none';
});

2. 初期状態の設定ミス

最初から非表示にしたい場合、JavaScriptではなくCSSで設定しましょう。

/* CSSで初期状態を非表示に */
#myElement {
    display: none;
}

そうすれば、ページ読み込み時に一瞬表示される問題を防げます。

3. displayの値を間違える

要素によって適切なdisplayの値が違います。

// div要素の場合
div.style.display = 'block';

// span要素の場合
span.style.display = 'inline';

// liタグの場合
li.style.display = 'list-item';

迷ったら、空文字を設定すれば元の値に戻ります。

element.style.display = ''; // 元の表示状態に戻る

実践！モーダルウィンドウを作ってみよう

学んだことを活かして、簡単なモーダルウィンドウを作ってみましょう。

<!-- HTML -->
<button id="openModal">モーダルを開く</button>

<div id="modal" class="modal">
    <div class="modal-content">
        <span id="closeModal" class="close">&times;</span>
        <p>モーダルの内容です</p>
    </div>
</div>

/* CSS */
.modal {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
}

// JavaScript
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

// モーダルを開く
openBtn.addEventListener('click', function() {
    modal.style.display = 'block';
});

// モーダルを閉じる
closeBtn.addEventListener('click', function() {
    modal.style.display = 'none';
});

// モーダル外をクリックしたら閉じる
window.addEventListener('click', function(event) {
    if (event.target === modal) {
        modal.style.display = 'none';
    }
});

このコードで、プロっぽいモーダルウィンドウが完成です！

まとめ：display: noneをマスターして次のステップへ

今回は、JavaScriptのdisplay: noneについて学びました。

ポイントをおさらいすると、このようになります。

• display: noneは要素を完全に非表示にする
• visibility: hiddenとは違って、スペースも消える
• ボタンクリックなどのイベントと組み合わせて使う
• 初期状態はCSSで設定するのがベスト

これで、動的なWebページが作れるようになりましたね！

もっとJavaScriptを深く学びたい方は、【挫折しない】JavaScript学習完全ガイドもチェックしてみてください。

また、私が運営しているLearning Nextでは、JavaScriptの基礎から応用まで、豊富な練習問題付きで学べます。

特に「DOM操作とイベント」のチャプターでは、今回学んだdisplay: noneを使った実践的な演習問題を用意しています。

月額わずか2,000円程度で、JavaScriptだけでなくReactやTypeScriptも学び放題です。

ぜひ、次のステップとして挑戦してみてください！