【JavaScript】display:noneで要素を非表示にする方法を初心者向けにわかりやすく解説

フロントエンド開発•2025/2/15

JavaScript HTML/CSS

はじめに

皆さんはWebページを作っているときに、ある要素を一時的に隠しておきたくなる場面に出会うことはないでしょうか。

たとえば、クリックイベントなどのタイミングで特定の要素を画面から消したり、フォームの入力次第で追加項目の入力欄を出したり隠したりといったことが挙げられます。

そうした場面で便利なのが display:none というスタイルをJavaScriptで制御する方法です。

display:noneはCSSプロパティの一つですが、JavaScriptから直接このスタイルを変更することで要素を非表示にできます。

本記事では、JavaScriptを使ってdisplay:noneを操作し、実務でも活用しやすい形で解説します。

コード例やイベント処理との組み合わせ方法も紹介しますので、初心者の方でも理解しやすい内容になっています。

最後まで読むと、要素の表示・非表示について、なんとなく感覚でやっていた部分をしっかり整理できるはずです。

この記事を読むとわかること

JavaScriptで要素を非表示にする基本的な仕組み
display:none と他の非表示手法の違い
実務でよくある活用シーンと応用例
イベントや条件分岐と組み合わせる実装例
要素の表示・非表示を使う際に注意したいポイント

display:none とは何か

display:noneは、CSSプロパティであるdisplayに対して値としてnoneを指定し、対象要素を画面から消す技法です。

画面上だけでなく、レイアウト上もその要素が存在しない扱いになります。

したがって、周囲の要素はその非表示要素が無いものとして再レイアウトされます。

特にJavaScriptでこのプロパティを切り替えると、ユーザーの操作や特定の条件をもとに簡単に要素の表示・非表示をコントロールできるというメリットがあります。

たとえば、複数の写真を順番に表示するスライドショー機能で、次の画像を表示するときに現在の画像をサッと消すなどの演出でよく活用されます。

また、モーダルウィンドウやドロップダウンメニューなどを表示する前に一度非表示にしておく、という使い方も定番です。

単にスタイルを変えるだけ？

display:noneはあくまで 「画面上で見えなくし、レイアウトからも外す」 というスタイル指定にすぎません。

HTML構造はそのまま残るため、視覚的には消えますが要素自体は存在し続けます。

そのため、要素がhiddenになっているかどうかをJavaScriptで判定したり、再度表示を有効にするといった操作がしやすいのがポイントです。

もし物理的に要素自体を削除してしまうと、再表示するには要素を再度生成するなどの処理が必要になります。

しかしdisplay:noneであれば、CSSプロパティを変更するだけなので、容易に表示・非表示を切り替えられるわけです。

実務で使うケース

実務においては、以下のようなシーンで非常によく使われます。

エラーメッセージの表示制御

フォームの入力チェックで問題があったときのみ警告文を表示し、それ以外は非表示にする。

モーダルダイアログの表示制御

最初はモーダル画面を隠し、ボタンを押したら表示する。

ドロップダウンメニューの表示制御

メニューをクリックしたときのみドロップダウンのリストを表示し、他の時は非表示にしておく。

これらはいずれも、ユーザーの操作や条件分岐に応じて簡単に切り替えられるので便利です。

もし別の方法で要素を削除→追加を繰り返す場合、コード量が増えたり、不要な再レンダリングが発生しやすくなります。

また、CSSクラスの付け外しだけで済む場合もありますが、クラス管理が煩雑になるケースでは直接style属性を操作する手段もシンプルでわかりやすいです。

display:none と他の手法との比較

display:noneをJavaScriptで利用する場合に、似たようなアプローチとして visibility:hidden や オフスクリーン移動 といった手法があることを覚えておくと便利です。

見た目はどちらも「要素が見えない状態」を作りますが、それぞれ挙動やレイアウトへの影響に違いがあります。

visibility:hidden との違い

visibility:hidden は要素を「見えない」状態にしますが、レイアウト的にはその要素の場所を確保したままです。

つまり、要素が表示されているときと同じ大きさ・配置スペースが残るため、ユーザーには「空白のスペース」として見えます。

一方で、display:none は要素のスペース自体も無くなるため、周囲の要素が詰めて配置されます。

この違いから、UIのレイアウトが大きくずれるような場所ではdisplay:noneが適している場合が多いです。

逆に、要素の位置だけは確保しておきたいときにはvisibility:hiddenを使うと良いでしょう。

オフスクリーン移動との違い

オフスクリーン移動は、例えば left:-9999px のように画面外へ要素を移動してしまい、結果的に表示されなくするという手法です。

この方法は、アニメーション効果の一環や、特定のスクリーンリーダー対応などで利用されることがあります。

しかし、レイアウト上はまだその要素のスペースを占有する場合があり、またユーザーからすれば「見えないだけで要素は画面の外にある」という状態です。

display:noneならば完全にレイアウトから取り除かれるため、よりシンプルに要素の「不在」を表現しやすいです。

そうした理由から、大半のケースではdisplay:noneを選ぶのが一般的と言えます。

実際にdisplay:noneを使ったコード例

それでは、具体的にJavaScriptから要素を非表示にするコード例をいくつか見てみましょう。

ここでは、HTML要素に対して document.getElementById や document.querySelector を用いて取得し、styleプロパティを変更するパターンを中心に紹介します。

イベントでの切り替え

以下の例では、ボタンをクリックするとテキストを非表示にし、再度クリックすると表示する仕組みを実装しています。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>display:noneのサンプル1</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <p id="targetText">この文章をクリックで隠します</p>
  <button id="toggleButton">表示/非表示を切り替え</button>

  <script>
    const targetText = document.getElementById('targetText');
    const toggleButton = document.getElementById('toggleButton');

    toggleButton.addEventListener('click', () => {
      if (targetText.style.display === 'none') {
        targetText.style.display = 'block';
      } else {
        targetText.style.display = 'none';
      }
    });
  </script>
</body>
</html>

ボタンを押すたびに、 targetText.style.display の値をチェックしています。

もし 'none' だった場合は 'block' に、そうでなければ 'none' にすることで、何度も切り替えできるようになっています。

ここではinlineスタイル（直接要素に記述するスタイル）を動的に上書きしていますが、あらかじめ .hidden { display:none; } といったクラスを用意して、クラスの付け外しを行うアプローチも便利です。

フォーム入力のエラーメッセージ表示

次は、フォームのエラーメッセージを動的に切り替える例です。

ユーザーが入力を間違えたときにエラーメッセージを表示し、正しくなるとメッセージを消すことを想定しています。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>display:noneのサンプル2</title>
  <style>
    .error {
      color: red;
      display: none;
    }
  </style>
</head>
<body>
  <form>
    <label for="username">ユーザー名:</label>
    <input type="text" id="username">
    <p id="errorMsg" class="error">ユーザー名を入力してください</p>
    <button type="button" id="submitBtn">送信</button>
  </form>

  <script>
    const username = document.getElementById('username');
    const errorMsg = document.getElementById('errorMsg');
    const submitBtn = document.getElementById('submitBtn');

    submitBtn.addEventListener('click', () => {
      if (username.value.trim() === '') {
        errorMsg.style.display = 'block';
      } else {
        errorMsg.style.display = 'none';
        alert('フォームを送信しました');
      }
    });
  </script>
</body>
</html>

エラーがある場合は表示、解消されると非表示にする、といった操作が簡単に実装できるのがわかります。

display:none を実務で使うときのメリット

ここでは、display:noneを使うことのメリットを実務レベルで確認していきましょう。

単なる見た目の変化だけでなく、開発効率やコードの可読性などにも影響を与えるポイントがあります。

コードがシンプル

要素そのものを削除したり、別HTMLに書き換える方法に比べ、display:noneによる非表示は非常にシンプルです。

スタイルを『none』にしているだけなので、複雑なロジックは不要になります。

また、JavaScriptのライブラリやフレームワークを使わない生のコードでも簡単に書けるため、ちょっとした機能追加での修正が容易です。

もし要素を動的に生成・破棄する場合は、DOM操作のコードが増えてしまい、他の箇所のイベントリスナーや状態管理に影響を及ぼしやすくなります。

一方でdisplay:noneは、単なるスタイル変更に留まるため、その影響範囲は比較的限定的です。

レイアウト変化がわかりやすい

display:noneで要素が消えると、周囲の要素が詰めて配置されるので、レイアウト上の変化が大きく現れます。

こうした挙動は、意図的に余白を持たせる場合を除いて、ページ全体の見た目をすっきり整理しやすいというメリットがあります。

例えばサイドバーのあるレイアウトで、一部のウィジェットのみを非表示にするときにもシンプルに詰まって配置されるため、ユーザーにとって「何もなくなったスペース」が気になることがあまりありません。

要素が本当に「無い」状態にしたいのであれば、display:noneは理にかなったアプローチと言えるでしょう。

display:none を使うときの注意点

とはいえ、display:noneが万能というわけではありません。

実務で使う際に、以下のような点に注意することで、トラブルや使いにくさを回避できます。

アクセシビリティへの配慮

display:noneで要素を完全に消してしまうと、スクリーンリーダーなどの支援技術からも「要素が存在しない」とみなされる場合があります。

必須入力欄の説明や案内テキストを非表示にしていると、一部のユーザーが情報を正しく得られない可能性が出てくるでしょう。

もし視覚的には隠しつつ、スクリーンリーダーには読み上げてもらいたい場合は、別の手法（たとえば位置を移動して画面外に置き、かつARIA属性を活用するなど）を検討した方がよいこともあります。

単に「見せたくないからdisplay:none」という使い方ではなく、「対象ユーザーにどう見せたいか・見せたくないか」を意識しながら使うと良いでしょう。

トランジションやアニメーションが使いにくい

CSSアニメーションやトランジションを利用して、要素を段階的にフェードアウトさせたい場合は、display:noneの切り替えだけではスムーズにアニメーションが適用されない ことが多いです。

例えば opacity: 0 から opacity: 1 に変化させながらフェードインする場合、display:noneの状態からいきなりdisplay:blockにすると、すぐ表示されてしまい、「徐々に見えてくる」という動きが綺麗に再現しづらいことがあります。

そのため、フェードなどのアニメーションを重視する場面では、displayを一気に切り替えるよりも、opacityやvisibilityを段階的に変更する方が好まれやすいです。

アニメーションの最終段階でdisplay:noneを設定して、要素を完全に非表示にする、という組み合わせテクニックもありますが、これは少し慣れが必要です。

displayプロパティとブロック・インライン要素の扱い

JavaScriptで style.display を変更する際、ブロック要素なら 'block'、インライン要素なら 'inline' や 'inline-block' などに戻す必要が出てきます。

もともとどんなタグで、表示形式が何だったかを意識せずに一律 'block' で表示しようとすると、予期しないレイアウト崩れを起こす可能性があります。

例えば span タグは本来インライン要素ですが、 'block' として再表示すると、一行を占有してしまいます。

一方で div タグの場合はもともとブロック要素なので、 'block' のままで自然です。

こういった違いを踏まえた上で、display:noneから元に戻すときには適切な表示形式を指定すると、レイアウト崩れを防ぎやすくなります。

実務では、あらかじめCSSでクラスを定義しておき、非表示にするときにそのクラスを付与・削除するアプローチが多いです。

display:none 以外の実装アプローチ

JavaScriptで要素を非表示にする方法は、display:noneの切り替え以外にもいくつか存在します。

例えば、要素の削除と生成 をする方法もあります。

ただし、要素を削除してしまうと再度表示するには再度DOMを生成し直す必要があり、その分のコード量が増えがちです。

また、フレームワーク（ReactやVue.jsなど）を使う場合は、コンポーネントの状態管理によってレンダリングを制御します。

この場合はフレームワーク側の仕組みで要素の存在自体を管理しているため、単純なdisplay:noneでの操作とは異なる構造になります。

いずれにせよ、表示・非表示を切り替える際のポイントは「ユーザー体験」と「実装のわかりやすさ」を両立させることです。

display:noneは非常に直接的でシンプルなので、ちょっとした機能実装や軽量なスクリプトには最適と言えます。

状況に応じたイベント連携の考え方

ここでは、display:noneをどんなタイミングで切り替えるかを、もう少し掘り下げてみましょう。

JavaScriptで非表示の切り替えを行う際、主に以下のイベントがきっかけになることが多いです。

クリックイベント：ボタンやリンクなどをクリックした際に表示・非表示を切り替える
ホバー (マウスオーバー) イベント：マウスが特定の要素に乗った瞬間に表示を切り替える
フォーム入力イベント：入力欄が更新されたり、フォーカスを失ったタイミングなどで切り替える
ウィンドウのロードイベント：ページが読み込まれた直後に何かを隠す、あるいは表示する

いずれの場合も、イベントリスナーを設定しておき、発火した時点で element.style.display を操作するだけなので、考え方は統一的です。

複数のイベントで同じ要素の表示状態を管理したいときは、状態（表示中か否か）を変数に保持しておくと実装がスムーズに進みます。

display:none をCSSクラスで管理するメリット

前述したように、要素の表示・非表示を変えるたびに element.style.display = 'none' のように直接代入する方法はシンプルです。

しかし、実務では CSSクラスにdisplay:noneを定義し、JavaScriptではそのクラスを付与・削除する アプローチがしばしば採用されます。


.hidden {
  display: none;
}

JavaScriptでクラスを付け外しする例は次のようになります。


const element = document.getElementById('sample');
element.classList.add('hidden');   // 非表示にする
element.classList.remove('hidden'); // 表示に戻す

この方法のメリットとして、後からメンテナンスが容易 という点が挙げられます。

もしdisplay:none以外にもアニメーションや特定のレイアウト調整を一緒に行いたい場合、CSS側で .hidden クラスを拡張すればOKです。

また、インラインスタイルを使わないため、HTMLファイルが肥大化しにくく、スタイルとロジックが分離され、コードベースが整理しやすくなるというメリットもあります。

実務でありがちなケーススタディ

では、実際の現場でよく見られるケーススタディを通じて、display:noneの使い所をまとめてみましょう。

フィルター機能のある一覧ページ

商品一覧や記事一覧などに絞り込みフィルターを設置するケースは多いです。

フィルターボタンをクリックしたら、検索条件を指定するパネルがスライドダウンで表示されるようにしたい場合があります。

このとき、最初は表示しないために display:noneにしておき、ボタンを押すとdisplay:blockに切り替えるアニメーション処理を挟むのが一般的な作り方です。

このように、パネルを開閉するUIでdisplay:noneは非常に活用しやすい手段と言えます。

タブメニューでのコンテンツ切り替え

タブの切り替えで複数のコンテンツを表示・非表示にするケースも日常的にあります。

ユーザーがタブをクリックするたびに、該当のコンテンツ以外はdisplay:noneにして、選択されているタブだけを表示させるやり方です。

このように複数の要素を一括で制御する場面でも、クラスを付け外しするだけで簡単に切り替えられます。

ReactやVueなどのフレームワークでも、コンポーネント単位でタブ切り替えを管理していますが、内部では同様の仕組み（表示・非表示）を実現している場合が多いです。

一時的なローディング画面

ページの特定領域でデータを読み込む間、ローディングを示すアニメーションを表示しておき、データが準備できたらコンテンツを表示し、ローディングをdisplay:noneに切り替えるといったケースも考えられます。

ユーザーにとっては、読み込み中であることが明確になり、動的にコンテンツが表示されるためスムーズな体験を提供できます。

こうしたローディング画面自体も、JavaScriptのイベント（例えばAjaxの完了時など）をフックして表示・非表示を切り替えるという流れで簡単に制御できます。

よくあるトラブル例と対処法

display:noneを使った非表示で、ありがちなトラブルやハマりやすい点を整理しておきましょう。

トラブル1: インライン要素がブロックレベルに

前述のように、もともとインライン要素（例えばspanタグ）なのに、表示するときに element.style.display = 'block' としてしまうと、予期せぬ改行やレイアウト崩れが起きることがあります。

対処法

displayプロパティを元の状態に合わせて設定する
CSSクラスで管理し、要素に応じたスタイルを一括管理する
インライン要素を非表示にするなら、再表示時は 'inline' や 'inline-block' に戻す

このあたりを統一的に管理しておくと安心です。

トラブル2: 想定外の画面リフロー

複数の要素を一斉に非表示にしたとき、ブラウザのリフロー（レイアウトの再計算）が頻発し、パフォーマンスが落ちるケースがあります。

要素が多いページや、表示切り替えの頻度が高いUIだと、ユーザーが「画面がカクつく」ような体感を得ることもあるでしょう。

対処法

なるべくまとめて変更する（複数要素を同時に非表示にする場合、一度にまとめてDOM更新する）
DOM操作の頻度を減らす工夫をする
アニメーションなどを加える場合はフレームワークやVirtual DOMなども検討する

小規模なUIであれば気にする必要はあまりありませんが、大規模サイトやリアルタイムに要素を追加・削除する場合には、多少意識した方がよいこともあります。

トラブル3: 非表示要素にアクセスできないと勘違いする

初心者の方だと「display:noneにした要素はすでに無いのでは？」と考えてしまう場合があります。

実際にはHTML構造としては存在しており、JavaScriptからも自由にアクセスできます。

ここを勘違いして「要素が消えたから再度生成しなきゃ」と思うと、不要なDOM要素の生成が増えてバグにつながるかもしれません。

対処法

display:noneはあくまで見えなくしているだけで、要素は存在していると理解する
その上で、JSで属性を変更したり、イベントリスナーをセットすることが可能

セキュリティやSEOは関係ある？

display:noneはあくまで視覚的な非表示であって、セキュリティレベルの観点から要素を隠すものではありません。

また、SEO（検索エンジン最適化）において「キーワードを意図的に非表示にしている」などの不自然な使い方をするのは推奨されませんが、普通にUI上の仕様として活用する限り、問題はありません。

ただし、ユーザーが見えない要素を乱用すると、混乱を招く可能性がありますので、適切に利用することが大切です。

まとめ

ここまで、JavaScriptでdisplay:noneを使って要素を非表示にする方法を幅広く見てきました。

display:noneは「要素を画面から完全に消しつつ、レイアウト上でも無いことにする」ための非常にシンプルな方法です。

以下のポイントを押さえておくと、実務でも安心して活用しやすいでしょう。

インラインスタイルを直接いじるか、CSSクラスを付け外しするかを整理する
インライン要素を元に戻すときはdisplayの指定に注意する
スクリーンリーダー対応やアニメーションの要件次第で他の手法との併用を検討する

要素を一瞬で隠せるメリットは大きく、多くの場面で重宝します。

ぜひ、display:noneの基本的な扱いをマスターし、機能拡張のベースとして役立ててみてください。