CSSで要素を消す方法を完全ガイド！display:noneとvisibility:hiddenの違い

display: none と visibility: hidden の使い分け in media queries

先生と生徒の会話形式で理解しよう

生徒

「スマホで見るときだけ、特定のメニューや画像を隠したいのですが、どうすればいいですか？」

先生

「ＣＳＳには要素を隠す命令がいくつかあります。主に使われるのは display: none と visibility: hidden ですね。」

生徒

「どちらも同じ『隠す』命令に見えますが、何か違いがあるんですか？」

先生

「実は、隠したあとの『場所』が残るかどうかに大きな違いがあります。詳しく解説していきましょう！」

1. CSSで要素を非表示にする二つの方法とは？

ウェブサイトを作っていると、パソコンでは見せたいけれどスマートフォンでは画面が狭いから隠したい、という場面がよく出てきます。これを実現するためのＣＳＳ（スタイルシート）の命令には、大きく分けて二つの種類があります。一つは「ディスプレイ：ノーネ（display: none）」、もう一つは「ビジビリティ：ヒドゥン（visibility: hidden）」です。

プログラミング未経験の方にとって、どちらも「画面から消える」という結果は同じに見えるかもしれません。しかし、これらは内部的な扱いが全く異なります。この違いを理解せずに使ってしまうと、サイトのレイアウトがガタガタに崩れてしまったり、意図しない余白ができてしまったりする原因になります。まずはそれぞれの特徴をしっかりと掴んでいきましょう。

2. display: none は「存在そのものを消し去る」命令

「ディスプレイ：ノーネ」は、その要素を画面から完全に消し去る命令です。ただ見えなくなるだけではありません。その要素が占めていた「スペース（場所）」も詰められます。例えるなら、行列に並んでいる人が列から抜けて、後ろの人が前に詰めるような状態です。もともとそこには何もなかったかのように、周りのレイアウトが再配置されます。

レスポンシブデザイン（画面サイズに合わせて見た目を変える手法）において、この命令は非常に重宝されます。例えば、パソコン用の大きなバナー広告をスマホで消す場合、その場所を空けておくと不自然な大きな隙間ができてしまいます。しかし、この命令を使えば隙間なく次の文章が表示されるため、スマートフォンの狭い画面を有効活用できるのです。


<style>
.box-none {
    display: none; /* 存在そのものを消します */
}
.normal-box {
    background-color: #e3f2fd;
    padding: 20px;
    border: 2px solid #2196f3;
}
</style>

<div class="normal-box">上のボックスは消えています。</div>
<div class="box-none">私は消されました。場所も残りません。</div>
<div class="normal-box">場所が詰められて、すぐ下に表示されます。</div>

ブラウザ表示

3. visibility: hidden は「姿だけを隠す」命令

一方で「ビジビリティ：ヒドゥン」は、要素の姿だけを透明にする命令です。存在そのものはそこに残っているため、その要素が占めていた「スペース（場所）」はそのまま維持されます。例えるなら、透明人間がそこに立っているような状態です。姿は見えませんが、後ろの人が前に詰めることはできず、ポッカリと空き地のような空白が残ります。

この命令は、レイアウトを崩したくないけれど、一時的に中身だけを隠したいときに便利です。例えば、三つのボタンが横に並んでいるデザインで、真ん中のボタンだけを消したいけれど、左右のボタンの位置は変えたくないという場合に活躍します。使いどころは少し限られますが、プログラミングにおいて「場所を確保しておく」という考え方は非常に重要です。


<style>
.box-hidden {
    visibility: hidden; /* 姿だけ消します。場所は残ります。 */
    height: 50px;
    background-color: #ffebee;
}
.normal-box {
    background-color: #f1f8e9;
    padding: 20px;
    border: 2px solid #8bc34a;
}
</style>

<div class="normal-box">この下の要素は透明になっています。</div>
<div class="box-hidden">姿は見えませんが、ここに居ます。</div>
<div class="normal-box">空白を挟んで表示されます。</div>

ブラウザ表示

4. メディアクエリを活用してデバイスごとに切り替える

ここで「メディアクエリ」という言葉を解説します。メディアクエリとは、ブラウザに対して「もし画面の幅が〇〇ピクセル以下だったら、このＣＳＳを適用してね」という条件を出す仕組みのことです。パソコンとスマートフォンでデザインを切り替える際の必須技術です。

例えば、パソコンでは見えている「サイドバー（横のメニュー）」を、スマホのような縦長の画面では非表示にしたいとします。この時、メディアクエリの中で特定のクラス名（要素のあだ名のようなもの）に対して「ディスプレイ：ノーネ」を指定します。すると、スマホで見たときだけその要素が消え、パソコンで見たときには復活するという魔法のような動きが実現できます。


<style>
/* パソコンでは普通に見える */
.responsive-hide {
    background-color: #fff3e0;
    padding: 20px;
    border: 2px solid #ff9800;
}

/* 画面の幅が600px以下のとき（スマホなど） */
@media (max-width: 600px) {
    .responsive-hide {
        display: none; /* スマホのときだけ消す */
    }
}
</style>

<div class="responsive-hide">
    <i class="bi bi-laptop"></i>
    パソコンで見ると表示され、スマホで見ると消えます。
</div>
<p>画面の横幅を縮めて確認してみましょう！</p>

ブラウザ表示

5. SEO対策への影響を知っておこう

検索エンジンのグーグル（Google）などのロボットは、サイトの内容を読み取って検索順位を決めています。ここで注意が必要なのが、非表示にしているコンテンツの扱いです。かつては検索順位を上げるために、ユーザーには見えないけれど検索ロボットには見える隠しテキストを大量に入れるという手法がありましたが、現在はスパム行為として厳しく禁止されています。

ただし、レスポンシブデザインのために「スマホでは不要だから隠す」という真っ当な理由で非表示にする分には全く問題ありません。グーグルのロボットは非常に賢く、メディアクエリによってレイアウトを調整していることを理解しています。大切なのは、隠しているからといって手を抜かず、ユーザーにとって価値のある情報を提供し続けることです。これが一番のＳＥＯ対策になります。

6. アクセシビリティと読み上げ機能の注意点

「アクセシビリティ」という言葉を聞いたことがありますか？これは、視覚に障害がある方や高齢の方など、どんな人でもサイトを快適に利用できるようにするという考え方です。視覚に障害がある方は「スクリーンリーダー」という、画面の内容を読み上げるソフトを使っています。

「ディスプレイ：ノーネ」を使って要素を消すと、多くのスクリーンリーダーはその部分を読み上げません。つまり、存在しないものとして扱われます。一方、「ビジビリティ：ヒドゥン」も同様に読み上げられないことが一般的です。もし「画面には出したくないけれど、読み上げソフトには読んでほしい」という特殊な要望がある場合は、別のテクニック（画面の外に追い出すなど）が必要になります。初心者のうちはまず、消したものは誰にも見えないし聞こえない、と覚えておけば間違いありません。

7. アニメーションさせたいときはどちらを使う？

動きのあるサイトを作りたい場合、要素をふわっと消したり現したりしたいことがあります。この時、実は「ディスプレイ：ノーネ」はアニメーションさせることができません。オンかオフかの二択しかないので、パッと消えるかパッと出るかのどちらかになってしまいます。

滑らかに消したい場合は、「オパシティ（不透明度）」という別の命令と「ビジビリティ：ヒドゥン」を組み合わせて使うのが一般的です。最初は不透明度を徐々に下げていき、完全に透明になったタイミングでクリックもできないように隠す、という手順を踏みます。プログラミングに慣れてくると、こうした複数の命令を組み合わせて複雑な表現ができるようになり、サイト制作がもっと楽しくなりますよ。


<style>
.fade-box {
    background-color: #f3e5f5;
    padding: 20px;
    border: 2px solid #9c27b0;
    transition: opacity 0.5s; /* 0.5秒かけて変化させる */
}

/* マウスを乗せると透明になる（姿は残る） */
.fade-box:hover {
    opacity: 0;
    visibility: hidden;
}
</style>

<div class="fade-box">
    <i class="bi bi-mouse"></i>
    マウスを乗せてみてください。ふわっと消えます。
</div>

ブラウザ表示

8. どちらを選ぶべき？迷った時の判断基準

結論として、どちらを使えばよいのでしょうか。ほとんどのケース（特にレスポンシブ対応）では「ディスプレイ：ノーネ（display: none）」を選べば間違いありません。理由は単純で、消したあとのスペースを詰めてくれた方が、画面のレイアウトを整えやすいからです。初心者がハマりやすい「謎の空白」に悩まされることも少なくなります。

「ビジビリティ：ヒドゥン」を使うのは、カレンダーの特定の日付だけを隠したいけれど枠の形は維持したい、というような「歯抜けの状態を保ちたい」という特殊な場面だけです。まずは基本の「ノーネ」をしっかり使いこなせるようになりましょう。ＣＳＳという道具は、使い分けの理由がわかると一気に上達します。パソコンを触ったことがない方も、この小さな違いを意識してコードを書いてみてください。それだけで、あなたの作るサイトの質は大きく向上します。

2026年最新スキルアップ・実践セミナー