display: noneの使い方｜要素を消す方法とvisibility: hiddenとの違いを初心者向けに解説

HTML・CSSで「この要素だけ画面から消したい」ときは、CSSのdisplay: none;を使います。指定した要素は見えなくなるだけでなく、もともと使っていた余白もなくなるのが特徴です。

ただし、非表示にする方法にはvisibility: hidden;やopacity: 0;、HTMLのhidden属性もあります。目的に合わない方法を選ぶと、空白が残ったり、見えないボタンを操作できてしまったりします。

この記事では、display: none;の書き方と表示結果を、実際のHTML・CSSで確認します。レスポンシブ対応やJavaScriptで表示を切り替える例、似た指定との違いまで初心者向けに解説します。

display: noneとは

displayは、要素の表示形式や子要素の並べ方を決めるCSSプロパティです。値にnoneを指定すると、その要素は表示用のボックスを作らなくなります。

そのため、対象の要素と子要素が画面から消え、レイアウト上の領域もなくなります。後ろにある要素は、空いた場所へ自動的に詰まります。

.hide {
  display: none;
}

HTML側で非表示にしたい要素へhideクラスを付けると、このCSSが適用されます。

<p class="hide">この文章は表示されません。</p>

displayにはblock、inline、flex、gridなどもあります。値ごとの役割を先に整理したい方は、次の記事も参考にしてください。

display: noneを指定する前後を比べる

ここからは、3つのカードを縦に並べた例で変化を確認します。まずは変更前のHTMLを用意しましょう。

<div class="card">カードA</div>
<div class="card target">カードB</div>
<div class="card">カードC</div>

カードの大きさと間隔が分かるように、次のCSSで見た目を整えます。

.card {
  max-width: 320px;
  margin-block: 12px;
  padding: 20px;
  border-radius: 8px;
  background-color: #dbeafe;
}

変更前は3つのカードが表示される

この時点では、カードA、カードB、カードCが順番に表示されます。カードBが使っている高さと上下の余白も、ページのレイアウトに含まれています。

display: noneを追加すると要素と余白が消える

中央のカードBだけを消すため、targetクラスへdisplay: none;を追加します。

.target {
  display: none;
}

変更後はカードBが表示されず、その場所に空白も残りません。カードCが上へ移動し、カードAとの間隔が詰まります。

上の図では、中央の例がdisplay: none;を指定した状態です。右の例は、後ほど比較するvisibility: hidden;で空白を残した状態です。

display: noneを使う主な場面

• 画面幅に応じて補助的な要素を切り替える
• ボタン操作でメニューや説明を開閉する
• 条件に合わないフォーム項目やメッセージを隠す
• タブやモーダルの現在使っていない内容を非表示にする

単に見た目を整えるだけでなく、「今は利用しない内容を表示も操作もさせない」ときに向いています。反対に、読み上げだけは残したい文章へ使う方法ではありません。

レスポンシブ対応で表示を切り替える

メディアクエリと組み合わせると、PCだけに表示する補足や、スマートフォンだけに表示する案内を作れます。次のHTMLでは、表示先ごとにクラスを分けます。

<p class="desktop-only">PC向けの詳しい操作案内</p>
<p class="mobile-only">スマホ向けの短い操作案内</p>

最初にスマートフォン向けの要素を隠し、画面幅が768px以下になったら表示を入れ替えます。

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}

768pxを境に、PC向けとスマートフォン向けの要素が切り替わります。重要な情報を片方にしか書かないと利用者によって読めなくなるため、内容そのものではなく表示方法を切り替える使い方が安全です。

スマートフォン対応の考え方やメディアクエリを詳しく確認したい方は、次の記事も見てください。

JavaScriptで表示・非表示を切り替える

クリックしたときに要素を消すだけなら、JavaScriptでクラスを付け外しできます。CSSと動作の役割を分けられるため、style.displayへ直接値を書くより管理しやすい方法です。

<button type="button" class="toggle-button">
  お知らせを切り替える
</button>

<p class="notice">現在表示中のお知らせです。</p>

.is-hidden {
  display: none;
}

const button = document.querySelector(".toggle-button");
const notice = document.querySelector(".notice");

button.addEventListener("click", () => {
  notice.classList.toggle("is-hidden");
});

ボタンを押すたびにis-hiddenクラスが追加・削除され、文章の表示が切り替わります。元の要素がflexやgridでも、クラスを外せば本来のdisplayへ戻せるのが利点です。

開閉UIではhidden属性も使いやすい

「今は利用しない内容」をJavaScriptで開閉する場合は、HTMLのhidden属性も選べます。ブラウザは通常、hiddenがある要素を表示せず、レイアウトにも含めません。

<button
  type="button"
  class="menu-button"
  aria-expanded="false"
  aria-controls="menu-panel"
>
  メニューを開く
</button>

<nav id="menu-panel" hidden>
  <a href="/">ホーム</a>
  <a href="/contact/">お問い合わせ</a>
</nav>

const menuButton = document.querySelector(".menu-button");
const menuPanel = document.querySelector("#menu-panel");

menuButton.addEventListener("click", () => {
  const willOpen = menuPanel.hidden;

  menuPanel.hidden = !willOpen;
  menuButton.setAttribute("aria-expanded", String(willOpen));
});

aria-expandedは、操作対象が開いているかを支援技術へ伝える属性です。見た目の切り替えと同時に値を更新すると、キーボードやスクリーンリーダーを使う人にも状態が伝わります。

display: noneと似た非表示方法の違い

「見えない」という結果は同じでも、余白、操作、読み上げの扱いが異なります。代表的な4つを比べてみましょう。

visibility: hiddenは空白が残る

visibility: hidden;は要素を見えなくしますが、要素が使っていた幅や高さは残ります。周囲の配置を動かさずに隠したいときに使います。

.target {
  visibility: hidden;
}

先ほどの比較図では右側がこの状態です。中央のカードは見えませんが、点線で示した場所が空白として残っています。

opacity: 0は透明でも操作できることがある

opacity: 0;は透明度を0にする指定で、要素そのものは配置されたままです。リンクやボタンは見えなくても、クリックやキーボードフォーカスの対象として残る場合があります。

.target {
  opacity: 0;
}

「完全に利用できない状態」にしたい要素を、opacityだけで隠すのは避けましょう。フェード演出に使う場合も、非表示完了後の操作やフォーカスをどう扱うかまで考える必要があります。

hidden属性はHTMLで非表示の意味を示す

hidden属性は、その内容が現在のページでは関連しないことをHTMLで示します。多くのブラウザではdisplay: none;相当として扱われます。

<p hidden>現在は表示しないお知らせです。</p>

なお、CSSでdisplay: block;などを強制すると、hidden属性があっても表示されることがあります。非表示用の指定と表示用の指定が競合していないか確認してください。

display: noneを解除して再表示する方法

固定で付けたdisplay: none;をCSSだけで解除するなら、対象に本来必要な値を指定します。

.target {
  display: block;
}

ただし、元の要素がinline、flex、gridだった場合、blockへ変えるとレイアウトが崩れます。JavaScriptで一時的に隠した場合は、非表示クラスを外す方法が安全です。

const target = document.querySelector(".target");

target.classList.remove("is-hidden");

クラスを外すと、display: none;だけが適用されなくなり、要素本来の表示形式へ戻ります。

display: noneが効かないときの確認項目

• CSSファイルをHTMLから正しいパスで読み込んでいるか
• クラス名やID名のスペルと大文字・小文字が一致しているか
• セレクターの先頭に、クラスは.、IDは#を付けているか
• 後に書かれたCSSや、より優先度の高いセレクターで上書きされていないか
• ブラウザの開発者ツールでdisplay: none;に打ち消し線が付いていないか

初心者が特につまずきやすいのは、CSSの読み込みとセレクターの書き間違いです。まず対象要素を開発者ツールで選び、適用中のCSSを確認しましょう。

CSSファイルの作成や読み込み方から見直したい場合は、次の記事で手順を確認できます。

アクセシビリティで注意すること

display: none;を指定した要素とその子要素は、画面だけでなくアクセシビリティツリーからも取り除かれます。通常はスクリーンリーダーにも読み上げられません。

読み上げが必要な補足文やフォームのラベルを、見た目だけ整える目的でdisplay: none;にしないでください。視覚的にだけ隠して支援技術へ残す場合は、専用の視覚非表示CSSが必要です。

また、開閉ボタンにはbutton要素を使い、開閉状態をaria-expandedで伝えます。非表示にする前に、その中へキーボードフォーカスが残っていないかも確認しましょう。

よくある質問

display: noneはHTMLに直接書けますか？

style="display: none;"のようにHTMLへ直接書くこともできます。ただし、複数箇所で再利用しにくく管理も複雑になるため、基本はCSSクラスに分けるのがおすすめです。

<p style="display: none;">非表示の文章</p>

display: noneを指定してもHTMLから削除されますか？

削除されません。HTMLの要素はDOMに残り、JavaScriptから取得したり、クラスを外して再表示したりできます。

display: noneで余白だけ残るのはなぜですか？

非表示にした要素自身の領域は消えますが、親要素のpaddingやgap、隣接要素のmarginが残っている可能性があります。開発者ツールで、どの要素が空白を作っているか確認してください。

display: noneにアニメーションは付けられますか？

displayは幅や透明度のように連続的に変わる値ではないため、単純なtransitionでは滑らかに変化しません。初心者のうちはopacityで見た目を変え、操作可否と最終的な非表示状態も合わせて制御する方法が分かりやすいです。

display: noneの使い方まとめ

• display: none;は、要素と子要素を非表示にし、レイアウト上の領域もなくす
• visibility: hidden;は、要素を隠しても使っていた空白を残す
• opacity: 0;は透明になるだけで、配置や操作対象が残ることがある
• JavaScriptで切り替えるときは、非表示クラスやhidden属性を使う
• 非表示要素は通常読み上げられないため、重要な情報へ安易に指定しない

まずは3つのカード例をコピーし、中央の要素へdisplay: none;を追加して、余白ごと消える変化を確かめてみてください。違いを実際に見比べると、非表示方法を選びやすくなります。

ほかのCSSプロパティも目的別に試したい方は、コード例をまとめた次の記事へ進んでください。

仕様を詳しく確認するときは、MDNのdisplay、visibility、hidden属性、aria-expanded、WHATWGのHTML Standardも参考になります。