CSSには、displayプロパティを使って要素の表示方法を指定するさまざまな値があります。その中でもdisplay: none; は、Webページ上の要素を非表示にしたいときによく利用される値です。
display: none; は、単に要素を見えなくするだけではありません。指定した要素は通常のレイアウト計算の対象から外れ、その要素自身が占めていた領域もなくなるという特徴があります。
そのため、Webサイトのメニューやモーダルウィンドウ、タブ切り替えなど、必要なタイミングだけ要素を表示したい場面で幅広く利用されています。
- display: none; は、どのような場面で使われているのか
- display: none; は、どのように書けばよいのか
- display: none; で非表示にした要素はどのような状態になるのか
- display: none; を指定したのに、思ったような表示にならない理由は何か
ここでは、HTML/CSS初心者向けに、HTMLとCSSのサンプルコードを紹介しながら、display: none; の基本的な仕組みや書き方、具体的な使い方までわかりやすく解説します。
また、テーブルの列を非表示にした場合など、実際のコーディングでつまずきやすい注意点についても紹介します。
※「displayプロパティ」の全体像や、要素を横並びにする「display:flex」について詳しく知りたい方は、先に以下の関連記事も参考にしてください。
📌 関連記事：初心者向けCSS完全ガイド！displayプロパティとは？仕組みと全種類をキャラクターで解説
📌 関連記事：初心者必見CSSフレックスボックス（display: flex;）とは？Flexboxの基本的使い方解説
display: none; とは？
display: none; とは、CSSのdisplayプロパティに指定できる値の一つで、指定した要素を画面上から非表示にするための記述です。
Webサイト制作では、常に表示する必要がない要素を一時的に隠したい場合などに使用されます。
例えば、クリックすると開くメニューやモーダルウィンドウ、画面サイズによって表示内容を変更するレスポンシブ対応などで活用されています。
display:none; の特徴は、単に要素が見えなくなるだけではありません。指定した要素は通常のレイアウト計算の対象から外れ、その要素自身が占めていた領域もなくなります。多くの場合は、その分だけ周囲の要素が詰まって再配置されます。
ただし、テーブルの列を構成する th や td を非表示にした場合は、ブラウザが列幅を再計算するため、見た目の変化が通常の要素とは異なることがあります。
詳細は、「⚠️【重要】なぜ2列になったのに全体の横幅が変わらないの？テーブルの列を消すときの挙動と注意点」。
display: none; の基本
display: none; は、CSSのdisplayプロパティに指定する値の一つで、指定したHTML要素を画面上から完全に非表示にする役割を持っています。
CSSでは、以下のように記述します。
display: none;
}
最大の物理的な特徴は、「CSSが指定された要素が最初から存在しなかったかのように、レイアウト（配置）からも完全に取り除かれ、ブラウザ上に表示されなくなる」という点です。
後続の要素がある場合、非表示になった要素が占めていたスペースを詰めるようにして自動的に前に詰めて配置されます。
例えば、以下のようなHTMLがあるとします。
.exampleにdisplay: none; を指定すると、文章はブラウザの画面上から消えます。
ただし、ここで重要なのは、display:none; は要素そのものを削除しているわけではないという点です。
HTMLには要素が残っており、CSSによって一時的に表示されない状態になっています。そのため、JavaScriptで表示状態を変更したり、別のCSSを適用したりすることで、再び表示できます。
また、display: none; を指定すると、その要素が占めていたスペースもなくなります。
例えば、横並びに3つのボックスがある状態で中央のボックスにdisplay:noneを指定すると、中央のボックスだけでなく、その分の空間も消え、左右のボックスが詰まって配置されます。
| 特徴 | 内容 |
|---|---|
| 表示状態 | 画面上に表示されない |
| レイアウト | 多くの場合、配置されていたスペースもなくなる |
| HTML | 要素自体は削除されない |
| 再表示 | CSSやJavaScriptで可能 |
visibility: hidden; との違い
CSSには、display: none; と同じように要素を非表示にする方法として visibility: hidden; があります。
どちらも画面上では要素が見えなくなりますが、レイアウト上の扱いが異なります。
| 項目 | display: none; | visibility: hidden; |
|---|---|---|
| 画面上の見た目 | 完全に消える | 完全に消える |
| レイアウト上のスペース | スペースも消える（存在しなかった状態になる） | スペースはそのまま残る（透明人間のような状態） |
| HTML要素 | 残る | 残る |
| 周囲の要素への影響 | 後続の要素が上に、または前に詰めて配置される | 隙間が空いたままになり、周囲の要素は動かない |
| 再表示 | 可能 | 可能 |
display: none; では、要素が非表示になるだけでなく、多くの場合、配置されていたスペースも削除されます。
一方、visibility: hidden; では要素は見えなくなりますが、元々あったスペースは残ります。そのため、周囲の要素の位置は変わりません。
例えば、画像を非表示にしたい場合でも、画像があった場所を詰めたい場合は display:none;、空白を残したまま非表示にしたい場合は visibility: hidden; を使用します。
この違いを理解しておくと、「要素を隠したい」という目的に対して、適切なCSSを選択できるようになります。
display: none; の使い方・使う場面
display: none; は、単に要素を非表示にするだけでなく、ユーザーの操作や画面サイズに応じて要素の表示・非表示を切り替えたい場面でよく利用されます。
代表的な使用例には、以下のようなものがあります。
・メニュー（ハンバーガーメニューなど）
スマートフォン向けのWebサイトでは、普段はメニューを非表示にしておき、三本線のアイコン（ハンバーガーメニュー）がタップされたときだけ表示する仕組みで利用されます。
・モーダルウィンドウ
お問い合わせフォームや画像の拡大表示、「ログイン」「詳しく見る」などのボタンをクリックした際に表示されるポップアップ画面で利用されます。初期状態では display: none; で非表示にし、ユーザーの操作に応じて表示へ切り替えるのが一般的です。
・タブ切り替え
「お知らせ」「イベント情報」など、複数のコンテンツを切り替えて表示するタブUIでもよく使われます。選択されていないタブのコンテンツを display: none; で非表示にし、クリックされたタブだけを表示します。
・レスポンシブデザイン
画面サイズに応じて表示する要素を切り替えたい場合にも利用されます。
例えば、パソコンでは表示する要素をスマートフォンでは非表示にしたり、その逆にスマートフォン専用の要素だけを表示したりすることで、デバイスに合わせた見やすいレイアウトを実現できます。
・JavaScriptとの組み合わせ
display: none; はJavaScriptと組み合わせることで、ユーザーの操作に応じた表示・非表示の切り替えを実現できます。
例えば、ボタンをクリックしたときにメニューを表示する、入力内容に応じてフォームを表示する、スクロール位置に応じて要素を表示するといった、動的なWebサイトの実装でよく利用されます。
このように、display: none; は「要素を隠すためのCSS」ではなく、必要なタイミングだけ要素を表示するためのCSSとして幅広く活用されています。
display: none; の書き方
display: none; を使用するには、CSSで対象となる要素に対して display: none; を指定します。
display: none; の基本の書き方
display: none; の基本的な書き方は以下の通りです。
display: none;
}
.sample クラスが指定された要素に対して、display:none; が適用されます。
CSSでは、プロパティと値の間にスペースを入れて display: none; と記述します。
display:none; のように none の前にスペースを入れなくても動作しますが、一般的には読みやすさを考えて none の前にスペースを入れて display: none; と記述します。
display: none; のHTMLとCSSのサンプル
実際にHTMLとCSSを使って、display: none がどのように動作するか確認します。
3行の文章のうち2行目を非表示に
HTML
<p class=”hidden”>1行目の文章です。</p>
<p class=”sample”>2行目の文章です。</p>
<p class=”hidden”>3行目の文章です。</p>
</div>
CSS
display: none;
}
ブラウザでの表示
display:none適用前 表示結果
2行目の文章です。
3行目の文章です。
display:none適用後 表示結果
2行目の文章です。
3行目の文章です。
※2行目の文章は非表示になっているだけではなく、もともと配置されていた高さ（余白）もなくなっています。そのため、3行目の文章は上に詰めて表示されています。
3行の表から1行を非表示に
HTML
<!
-- テーブルの見出し行 --><tr>
<th>社員ID</th>
<th>名前</th>
<th>部署</th>
</tr>
<!
-- 1行目のデータ --><tr class=”row1″>
<td>001</td>
<td>山田 太郎</td>
<td>営業部</td>
</tr>
<!
-- 2行目のデータ（この行を非表示にする） --><tr class=”row2″>
<td>002</td>
<td>鈴木 花子</td>
<td>開発部</td>
</tr>
</table>
CSS
.user-table, th, td {
border: 1px solid #333;
border-collapse: collapse;
padding: 10px 20px;
}/* 見出しの背景色をグレーにする */
th {
background-color: #f2f2f2;
}
/* 2行目のデータ（横一列）を丸ごと非表示にする */
.row2 {
display: none;
}
ブラウザでの表示
display:none適用前 表示結果
| 社員ID | 名前 | 部署 |
|---|---|---|
| 001 | 山田 太郎 | 営業部 |
| 002 | 鈴木 花子 | 開発部 |
display:none適用後 表示結果
| 社員ID | 名前 | 部署 |
|---|---|---|
| 001 | 山田 太郎 | 営業部 |
| 002 | 鈴木 花子 | 開発部 |
3列の表から1列を非表示に
HTML
<!
-- テーブルの見出し行 --><tr>
<th>社員ID</th>
<th class=”col-name”>名前（非表示）</th>
<th>部署</th>
</tr>
<!
-- 1行目のデータ --><tr>
<td>001</td>
<td class=”col-name”>山田 太郎（非表示）</td>
<td>営業部</td>
</tr>
<!
-- 2行目のデータ --><tr>
<td>002</td>
<td class=”col-name”>鈴木 花子（非表示）</td>
<td>開発部</td>
</tr>
</table>
CSS
.user-table, th, td {
border: 1px solid #333;
border-collapse: collapse;
padding: 10px 20px;
}/* 見出しの背景色をグレーにする */
th {
background-color: #f2f2f2;
}
/* 真ん中の列（対象のthとtd）をまとめて非表示にする */
.col-name {
display: none;
}
ブラウザでの表示
display:none適用前 表示結果
| 社員ID | 名前（非表示） | 部署 |
|---|---|---|
| 001 | 山田 太郎（非表示） | 営業部 |
| 002 | 鈴木 花子（非表示） | 開発部 |
display:none適用後 表示結果
| 社員ID | 名前（非表示） | 部署 |
|---|---|---|
| 001 | 山田 太郎（非表示） | 営業部 |
| 002 | 鈴木 花子（非表示） | 開発部 |
⚠️【重要】なぜ2列になったのに全体の横幅が変わらないの？テーブルの列を消すときの挙動と注意点
多くの教材やWEB記事では、「display: none; を指定すると、その要素が最初からなかったかのように要素自身が占めていた領域が通常のレイアウト計算から除外される」と解説されています。
しかし、今回のサンプルのように「テーブルの列（縦一列の <th> や <td>）」に対して display: none; を使った場合、この大原則は正しいものの、テーブルでは残ったセルの幅が再計算されるため、見た目の変化が通常の要素とは異なる場合がある という点に注意が必要です。
実際にコードを動かすと、真ん中の列は画面から消えますが、テーブル全体の横幅はギュッと縮まず、残った列の幅が再計算され、結果として広がる場合があります。
「要素自身が占めていた領域はなくなる」はずなのに、なぜこのようなことが起きるのでしょうか。
原因は、HTMLのテーブル構造と「幅計算の仕組み」
この現象が起きる理由は、HTMLのテーブル（表）において、列は行（<tr>）のような独立した要素として扱われないためです。
※HTMLには列のスタイルを指定する <col> という要素は存在しますが、これは <td> のように中身のコンテンツ（内容）を持つ要素ではありません。通常、テーブルの「列」は、各行の同じ位置にある <td> や <th> の集まり（集合）として構成されています。
そのため、特定の列のセルだけに display:none を指定して非表示にした場合、ブラウザ側では以下のような処理が行われます。
- 行（<tr>）を消した場合：
行そのものがレイアウトから除外されるため、その行が占めていた高さはなくなります。 - 列（<td>/<th>）を消した場合：
指定した要素自身が占めていた領域は、通常のレイアウト計算から除外されます。しかしその後、ブラウザは残ったセルをもとにテーブル全体のレイアウト（幅計算アルゴリズム）を自動で再計算します。
テーブルの幅計算は、中身の文字量やテーブル全体の幅など複数の要素で決まるため、この再計算ルールによって、残った列の幅が自動的に調整される結果となります。
💡 初心者が覚えておくべき対策
このように、display: none; は確かに指定した要素を消し去る機能を果たしていますが、「テーブルのように、ブラウザによる特殊なレイアウト計算（幅計算アルゴリズム）が働く要素の中」では、周りの要素がただ詰まるだけではない見た目の変化が起きるということを覚えておいてください
もし「列を非表示にしたときに、思った通りの列幅に制御したい」という場合は、width指定や table-layout: fixed; などを組み合わせて、テーブルのレイアウト計算を調整します。table-layout: fixed; を使うことで、列幅の計算方法を変更し、指定した幅を基準にレイアウトを制御できます。
よくある質問（FAQ）
Q：displayにするとHTMLから削除される？
A：いいえ、display:none;を指定しても、HTMLの要素自体が削除されるわけではありません。
display:none;は、CSSによって要素を画面上に表示しないようにし、通常のレイアウト計算の対象から外す指定です。
そのため、HTMLコード内には対象の要素が残ったままになります。
例えば、以下のように記述した場合でも、p 要素自体が削除されるのではなく、CSSによって非表示になっている状態です。
<p class=”hidden”>非表示にする文章です。</p>
.hidden {
display:none;
}
後からCSSを変更したり、JavaScriptで表示状態を切り替えたりすることで、再び表示できます。
Q：displayという書き方はある？
A：いいえ、display: hidden; というCSSの指定は存在しません。
displayプロパティで要素を非表示にする場合は、display: none; を使用します。
なお、似た指定として visibility: hidden; がありますが、動作は異なります。
display: none; は要素がレイアウトから除外され、配置されていたスペースもなくなります。
一方、visibility: hidden; は要素は見えなくなりますが、元のスペースは残ります。
非表示にしたい目的に応じて、それぞれのCSSを使い分けることが大切です。
