CSSにおけるdisplay:noneの完全ガイド7選｜ウェブデザインで使う非表示制御

はじめに

CSSで要素を隠す場面では、display:noneを選ぶだけでよい場合と、別の隠し方を選んだほうがよい場合があります。特にウェブデザインでは、非表示にした要素がレイアウト、アクセシビリティ、JavaScriptの制御、レスポンシブデザインに影響するため、見えなくなる仕組みまで理解しておく必要があります。

その判断軸は明確です。要素を画面にもレイアウトにも残さないならdisplay:none、領域だけ残すならvisibility:hidden、透明にするだけならopacity:0を使い分けますし、ここがポイントです。CSSのスタイルシートに書く値は短くても、ブラウザ上の扱いは大きく変わりますし、ここがポイントです。

CSSとは

CSSは、HTMLで作った文書構造に見た目を与えるためのスタイルシート言語です。h1やpなどの要素に対して、color、font-size、margin、padding、displayなどを組み合わせ、文字、余白、配置、表示方法を制御します。

その役割を分けて考えると、HTMLは意味と構造、CSSは見た目と配置、JavaScriptは動きや状態変更を担当します。ウェブデザインではこの分担を崩さず、スタイルシートに見た目のルールをまとめるほど、修正範囲を追いやすくなるのが基本です。

一般に、CSSのルールはselectorと宣言ブロックで構成されますが、これは押さえたい点です。.cardのようなセレクタで対象を選び、background-colorやline-heightのようなプロパティに値を与える流れです。

このとき、複数のルールが同じ要素に当たると、カスケード、詳細度、読み込み順によって最終的な見た目が決まります。display:noneが効かない原因の多くも、この仕組みを確認すると整理できるのが目安です。

公式仕様に近い説明を確認したい場合は、MDNのCSSリファレンスが実用的です。displayの値やブラウザ互換性を確認しながら、スタイルシートの責務を切り分けると理解しやすくなります。

CSSの基本構文

CSSの最小単位は、対象を選ぶ部分と、見た目を決める部分の組み合わせです。たとえばh1 { color: red; }なら、h1要素の文字色が赤になるのが基本です。

これを実務寄りに考えると、id、class、要素名、属性セレクタを使って対象を狭めますが、これは押さえたい点です。スタイルシートの規模が大きくなるほど、#mainのような強い指定を乱用せず、再利用しやすい.is-hiddenや.nav-itemを使う設計が扱いやすいでしょう。

ただし、クラス名を増やすだけでは保守性は上がりません。display、position、z-index、overflowが絡む表示制御では、要素が通常の文書フローに残るかどうかを先に決める必要があります。

CSSがウェブデザインで担う役割

CSSは色や装飾だけでなく、情報の読みやすさにも関わります。文字を見やすくするには、colorで色、font-sizeで大きさ、line-heightで行間を整えるのが基本になるのがポイントです。

そのうえで、レスポンシブデザインでは@mediaを使い、画面幅や入力環境に応じてレイアウトを切り替えますし、これが一つの目安です。スマートフォンではナビゲーションを畳み、PCでは横並びにするような制御にもCSSが使われます。

一方、アクセシビリティの観点では、見た目だけを整えても十分とは言えません。display:noneで隠した要素は多くの支援技術からも参照されなくなるため、情報を誰に届けるかを先に決める必要があるのが一般的です。

関連する基礎を広げるなら、レイアウト全体はCSSグリッド入門、横並びの細かな制御はCSSでInline-blockを効果的に使う方法も参考になります。CSSの表示制御は単独で覚えるより、配置の知識と結び付けるほうが現実的です。

‘display:none’の基本

display:noneは、対象要素を生成されるボックスから外すCSSの値です。画面上で見えなくなるだけでなく、要素が占めていた幅や高さもレイアウトから消えるため、後続の要素が詰めて配置されますが、覚えておくと役立つでしょう。

これがvisibility:hiddenやopacity:0との大きな違いです。visibility:hiddenは見えない状態でも領域が残り、opacity:0は透明でもクリック領域が残る場合があるのが現実的です。

公式ドキュメントによれば、MDNのdisplay解説ではdisplayが内部表示型と外部表示型を含む広いプロパティとして扱われています。noneはその中でも、対象のボックスを生成しない値として理解すると整理しやすいです。

💡 Tips: display: none;と半角スペース入りで書くのがCSSの通常表記ですが、検索語や短い説明ではdisplay:noneと詰めて書かれることもあります。意味は同じでも、スタイルシート内ではプロパティ名、コロン、値、セミコロンをそろえると読みやすくなると整理できるのが目安です。

‘display:none’の定義と機能

display:noneを設定すると、ブラウザは対象要素のボックスを作りません。HTMLのDOMには要素が残っていても、CSSレイアウト上では存在しないものに近い扱いになります。

そのため、document.getElementById()で要素を取得したり、JavaScriptからstyle.displayを書き換えたりすることは可能です。見えないだけでDOMから削除されるわけではない、という点は混同しやすい部分になります。

具体的には、モーダルの初期状態、アコーディオンの閉じた領域、レスポンシブデザインでスマートフォンだけ隠す補助要素などで使われますし、これが一つの目安です。ただし、常に隠してよい情報と、一時的に隠すだけの情報は分けて考えるべきです。

‘display:none’と他のCSSプロパティの違い

この表で特に押さえたいのは、非表示という同じ結果に見えても、レイアウト領域とアクセシビリティへの影響が異なる点です。CSSだけで見た目を制御するのか、JavaScriptで状態を切り替えるのかによって、選ぶ書き方が変わります。

‘display:none’の使い方

display:noneの使い方は短いものの、HTML、CSS、JavaScriptのどこに状態を持たせるかで保守性が変わります。単純な非表示ならスタイルシートにクラスを定義し、動的な切り替えならJavaScriptでクラスを付け外しする形が整理しやすいでしょう。

その設計では、style='display: none;'をHTMLに直接書く方法は一時的な例に留めるのが無難です。複数箇所で同じ制御を行うなら、.is-hiddenのような状態クラスを用意すると、後からdisplay:blockやdisplay:gridへ戻す処理も追いやすくなると理解できるのがポイントです。

サンプルコード1：要素を非表示にする基本的な方法

基本的な非表示では、HTMLに識別しやすいidやclassを付け、CSS側で対象を選びます。次のHTMLは、非表示にしたいセクションをidで区別しています。

<div id='hidden-section'>このセクションは非表示です。</div>

結果: 期待される表示は、CSSを適用する前なら通常の文章として画面に出る状態です。

その要素をCSSで隠すには、同じidをセレクタにしてdisplay:noneを設定すると覚えるとよいでしょう。スタイルシートに分けることで、HTMLの構造と見た目の責務が分かれますし、ここを基本と考えるとよいでしょう。

#hidden-section {
    display: none;
}

結果: 期待される表示は、#hidden-sectionの内容が画面にもレイアウト上の領域にも出ない状態です。

サンプルコード2：JavaScriptと組み合わせた動的な非表示

JavaScriptを使うと、クリックや入力に応じて表示状態を変えられます。次のHTMLでは、ボタンと対象コンテンツをそれぞれidで参照できるようにしていると考えられます。

<button id='hideButton'>非表示</button>
<div id='dynamicContent'>この内容は非表示になるのが一般的です。</div>

結果: 期待される表示は、ボタンとテキスト領域が並び、まだ内容が見えている状態です。

このとき、イベント処理ではaddEventListener()を使い、クリック時にstyle.displayへnoneを代入します。JavaScript側で状態を直接変えるため、他の処理との競合に注意が必要です。

document.getElementById('hideButton').addEventListener('click', function() {
    document.getElementById('dynamicContent').style.display = 'none';
});

結果: 期待される表示は、ボタンを押した後に#dynamicContentが非表示になる状態です。

サンプルコード3：メディアクエリを使用したレスポンシブデザインでの応用

レスポンシブデザインでは、画面幅に合わせて要素の有無を変えることがあります。メディアクエリを使えば、CSSだけで小さい画面のときに補助的な領域を隠せます。

具体的には、@media screen and (max-width: 600px)のように条件を書き、その条件内でdisplay:noneを適用すると言えるでしょう。MDNのメディアクエリ解説では、画面幅以外の条件も確認できるのが現実的です。

@media screen and (max-width: 600px) {
    #responsive-section {
        display: none;
    }
}

結果: 期待される表示は、幅600px以下の画面で#responsive-sectionが非表示になり、広い画面では通常どおり出る状態です。

サンプルコード4：アクセシビリティへの影響とその対策

display:noneを使うと、要素は視覚的に消えるだけでなく、支援技術の読み上げ対象からも外れる場合があります。アクセシビリティ上必要な情報まで隠すと、画面を見ない利用者に内容が伝わりません。

ただし、aria-hidden='true'はスクリーンリーダーから隠すための属性であり、視覚的に隠す指定ではありません。装飾アイコンなど、読み上げる必要がない要素に使うのが一般的です。

<div id='decorativeContent' aria-hidden='true'>装飾用の内容</div>

結果: 期待される状態は、画面上の表示はCSS次第で変わらず、支援技術には装飾用の内容として伝わりにくくなる状態です。

‘display:none’のよくあるエラーと対処法

display:noneが効かない、あるいは戻したときに表示が崩れる原因は、CSSの詳細度、読み込み順、JavaScriptの状態管理に集中するのが基本です。見えているかどうかだけを見るのではなく、どのルールが最後に勝っているかを確認すると解決しやすいです。

その確認には、ブラウザの開発者ツールでcomputedスタイルを見る方法が向いていると整理できます。displayに打ち消し線が付いている場合、別のセレクタやインラインスタイルが上書きしている可能性があります。

エラー例1：非表示の要素が意図せず表示される

CSSでは、同じ要素に複数のルールが当たると、詳細度と後から読み込まれたルールが表示を左右するのが目安です。#myElementでdisplay:noneを書いても、別の条件でdisplay:blockが効くと見える場合があります。

/* このスタイルは要素を隠す */
#myElement {
    display: none;
}

/* 後から読み込まれると、条件次第で表示に戻る */
.someClass {
    display: block;
}

結果: 期待される状態は、同じ要素にidとclassが付く場合、詳細度と読み込み順によって最終的なdisplayが変わる状態です。

この問題を避けるには、隠す目的を状態クラスに寄せる方法があると理解できます。たとえば.is-hiddenだけが非表示を担当するように決めると、CSS全体で表示制御を探しやすくなるのがポイントです。

エラー例2：スクリプトとの競合

JavaScriptでstyle.displayを直接変更すると、CSS側のクラス設計と競合しやすくなります。特に複数のイベントが同じ要素のdisplayを書き換えると、意図しないタイミングで非表示が解除されます。

// JavaScriptで要素を非表示にする
document.getElementById('myElement').style.display = 'none';

// 別の処理が表示状態を変更する
document.getElementById('myElement').style.display = 'block';

結果: 期待される状態は、後から実行された処理によって#myElementが再表示される可能性がある状態です。

そのため、複雑なUIではclassList.add()、classList.remove()、classList.toggle()で状態クラスを切り替えるほうが管理しやすくなります。CSSとJavaScriptの境界が明確になり、スタイルシート側で表示方法をまとめられます。

エラー例3：アクセシビリティの問題

初心者がつまずきやすいのは、見えない情報と読ませたい情報を同じ方法で隠してしまう点です。display:noneはアクセシビリティツリーから外れる場合があるため、説明文やエラーメッセージには慎重に使いるのが一般的です。

一方、視覚的には見せたくないが読み上げには残したいテキストでは、画面外に配置する手法が使われますし、ここがポイントです。次のCSSは、要素を非常に小さくし、通常の画面表示から外す典型的なパターンです。

.hidden-but-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

結果: 期待される状態は、対象テキストが画面上ではほぼ見えず、支援技術には内容が残る可能性がある状態です。

ただし、この方法もすべての場面に合うわけではありません。フォームのエラー、開閉パネル、タブUIでは、aria-expanded、aria-controls、roleなどと組み合わせ、状態が伝わる構造にする必要があります。

‘display:none’の応用例

display:noneは、初期状態で隠しておき、ユーザー操作によって表示するUIでよく使われます。ドロップダウン、タブ、条件付きフォームなどは、ウェブデザインでも見かける代表的な利用場面です。

その一方で、CSSだけで完結させるか、JavaScriptで状態を管理するかはUIごとに変わりますが、覚えておくと役立つでしょう。マウス操作だけに依存するメニューはキーボード利用者に扱いにくいことがあるため、アクセシビリティを考えるならフォーカス操作も含めて設計すると覚えるとよいでしょう。

サンプルコード5：ドロップダウンメニューの作成

ドロップダウンメニューでは、メニュー本体を初期状態で非表示にし、親要素への操作で表示します。次のHTMLは、ボタンとメニュー項目をひとまとまりにした構造です。

<div class='dropdown'>
  <button class='dropbtn'>ドロップダウン</button>
  <div class='dropdown-content' id='myDropdown'>
    <a href='#'>リンク 1</a>
    <a href='#'>リンク 2</a>
    <a href='#'>リンク 3</a>
  </div>
</div>

結果: 期待される表示は、ボタンとリンク群の構造がHTML上に用意され、CSS適用前ならリンクも通常どおり見える状態です。

このCSSでは、.dropdown-contentをdisplay:noneで隠し、:hover時だけdisplay:blockへ切り替えます。簡単なデモには向きますが、実運用ではキーボード操作への配慮も必要です。

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.dropdown:hover .dropdown-content {
    display: block;
}

結果: 期待される表示は、通常時にメニュー項目が非表示になり、親要素にポインターを重ねるとリンク群が表示される状態です。

サンプルコード6：タブコンテンツの管理

タブUIでは、複数のパネルを用意し、選ばれたパネルだけを表示します。次のHTMLは、東京、大阪、京都のパネルをボタンから切り替える構造です。

<div class='tab'>
  <button class='tablinks' onclick='openCity(event, 'Tokyo')'>東京</button>
  <button class='tablinks' onclick='openCity(event, 'Osaka')'>大阪</button>
  <button class='tablinks' onclick='openCity(event, 'Kyoto')'>京都</button>
</div>

<div id='Tokyo' class='tabcontent'>
  <h3>東京</h3>
  <p>東京は日本の首都です。</p>
</div>

<div id='Osaka' class='tabcontent'>
  <h3>大阪</h3>
  <p>大阪は日本の主要都市の一つです。</p>
</div>

<div id='Kyoto' class='tabcontent'>
  <h3>京都</h3>
  <p>京都は歴史的な都市です。</p>
</div>

結果: 期待される表示は、ボタン群と各都市のパネルがHTML上に並ぶ状態です。

そのパネルを初期状態で隠すために、共通クラスへdisplay:noneを設定します。CSS側では非表示のルールだけを持ち、どれを表示するかはJavaScriptが担当します。

.tabcontent {
    display: none;
}

結果: 期待される表示は、.tabcontentを持つすべてのパネルが初期状態で非表示になる状態です。

このJavaScriptは、すべてのパネルを一度隠し、選ばれた都市のパネルだけをdisplay:blockに戻するのが現実的です。古い教材ではvarが使われることもありますが、現行の書き方ではconstやletを使うほうが意図を表しやすいです。

function openCity(evt, cityName) {
    const tabcontent = document.getElementsByClassName('tabcontent');
    for (let i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = 'none';
    }

    const tablinks = document.getElementsByClassName('tablinks');
    for (let i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(' active', '');
    }

    document.getElementById(cityName).style.display = 'block';
    evt.currentTarget.className += ' active';
}

結果: 期待される表示は、クリックしたタブに対応するパネルだけが表示され、他のパネルは非表示になる状態です。

サンプルコード7：フォーム要素の条件付き表示

フォームでは、選択内容に応じて追加項目を出す場面があります。次のHTMLでは、選択肢が変わったときにshowField()を呼び、追加の入力欄を切り替えます。

<form>
  <label for='choice'>選択してください：</label>
  <select id='choice' onchange='showField(this)'>
    <option value=''>選択...</option>
    <option value='option1'>オプション1</option>
    <option value='option2'>オプション2</option>
  </select>

  <div id='additionalField' style='display: none;'>
    <label for='extra'>追加情報：</label>
    <input type='text' id='extra' name='extra'>
  </div>
</form>

結果: 期待される表示は、初期状態では追加情報の入力欄が非表示で、選択欄だけが見える状態です。

その表示状態を切り替える処理では、選ばれた値を見てdisplayを変更します。フォーム項目は入力可否や送信値にも影響するため、非表示にするだけでなくバリデーション条件も合わせて設計します。

function showField(element) {
    if (element.value === 'option1') {
        document.getElementById('additionalField').style.display = 'block';
    } else {
        document.getElementById('additionalField').style.display = 'none';
    }
}

結果: 期待される表示は、オプション1を選んだ場合だけ追加情報の入力欄が表示され、それ以外では非表示になる状態です。

CSSの豆知識

CSSの表示制御を深く理解すると、ウェブデザインの見た目だけでなく、SEOやアクセシビリティにも配慮しやすくなります。display:noneは短い指定ですが、検索エンジンや支援技術に対しては意味のある状態変更になると整理できると考えられます。

これらの判断では、ユーザーに必要な情報を隠していないかを確認します。単なる装飾、開閉前の補助パネル、画面幅ごとの重複ナビゲーションなどは非表示にしやすい一方、本文の主要情報を常に隠す使い方は避けるべきです。

CSSの歴史と進化

CSSは、HTMLから見た目の指定を分離する目的で発展してきました。初期のWebではHTMLに装飾の役割も持たせる書き方が多く、構造と見た目が混ざりやすい問題がありました。

その後、スタイルシートとしてCSSを分けることで、同じHTML構造に対して複数の見た目を適用できるようになりました。現在のレスポンシブデザイン、メディアクエリ、フレックスボックス、グリッドレイアウトも、この分離を前提に成り立っています。

具体的には、引用デザインを整えるならCSSを使った引用デザイン、折り返しを調整するならCSSのword-break解説のように、目的別にプロパティを組み合わせますし、ここを基本と考えるとよいでしょう。表示制御も同じで、単独のプロパティだけで完結するケースは多くありません。

‘display:none’とSEOの関係

display:noneで隠した内容がすべて問題になるわけではありません。タブの初期非表示、アコーディオンの閉じた内容、モバイル用メニューなど、ユーザー操作で表示される自然なUIは一般的に使われます。

ただし、検索順位だけを目的に大量のキーワードを非表示にするような使い方は避けるべきです。ユーザーに見せない本文を検索エンジン向けにだけ置く設計は、クローキングに近い評価を受けるおそれがあります。

一方、メディアクエリでPCとスマートフォンの表示を切り替えること自体は、レスポンシブデザインでは自然な実装です。問題は隠す行為そのものではなく、ユーザーに必要な情報を不自然に隠していないかという点にあると理解できると言えるでしょう。

その判断に迷う場合は、隠したコンテンツをユーザーが通常操作で読めるか、同等の情報が別の場所にあるか、JavaScriptが無効でも致命的な欠落にならないかを確認します。CSSとSEOの関係は、検索エンジンだけでなく利用者の行動を基準に考えると整理しやすいでしょう。

まとめ

CSSのdisplay:noneは、要素を画面から消すだけでなく、レイアウト領域も取り除く指定です。非表示、スタイルシート、JavaScript、メディアクエリ、アクセシビリティが交差するため、短いコードでも影響範囲は広くなります。

そのため、ウェブデザインではvisibility:hiddenやopacity:0との違いを理解し、目的に応じて選びますし、ここがポイントです。レスポンシブデザインで画面幅に応じて隠す場合も、必要な情報が失われない構成にすることが欠かせません。

具体的な実装では、CSS側に.is-hiddenのような状態クラスを置き、JavaScript側ではクラスの付け外しに集中すると見通しがよくなるのが基本です。フォーム、タブ、メニューなどのUIでは、表示状態とアクセシビリティ属性を合わせて管理するのが現実的です。

これらを踏まえると、display:noneは単なる非表示指定ではなく、情報をいつ、誰に、どの状態で見せるかを決めるCSSの入口になります。スタイルシート全体の設計と合わせて使うことで、保守しやすいウェブデザインにつながりますが、これは押さえたい点です。

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。

関連記事

• CSSグリッド入門！完全マスターの12ステップ
• CSSでInline-blockを効果的に使う方法9選
• CSSにおけるquerySelector()の活用法10選！初心者からプロまで役立つCSSガイド
• CSSを使った引用デザインの作成とカスタマイズ方法7選
• CSSのword-breakを完全解説！初心者からプロまでの5つのコード例