ZeroPlus Media > Web制作 > HTML/CSS > CSSで要素を非表示にする方法を3つのプロパティでわかりやすく解説

CSSで要素を非表示にする方法を3つのプロパティでわかりやすく解説

HTML/CSS

2022/01/12

2025/11/25

この記事ではWeb制作の実務でよく使われる「CSSで要素を非表示にする方法」について解説します。

Webサイトをレスポンシブ対応するにあたって、表示・非表示を切り替える機会は多く存在します。3つのプロパティの違いを理解して、適切なプロパティを実務で使えるように学習していきましょう。

この記事で身につく内容

CSSで要素を非表示にする方法
display: none; opacity: 0; visibility: hidden; の使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

ZeroPlus Gateの詳細を見る

CSSを非表示にするプロパティ3選
display: none;　opacity: 0;　visibility: hidden; の違い
実務で要素を非表示にするケース
- 場合によって非表示にするプロパティを使い分けよう

CSSを非表示にするプロパティ3選

CSSで要素を非表示にできるプロパティは3種類あります。

CSSで要素を非表示にできるプロパティ

display: none;　　・・・表示形式を変えて隠す
visibility: hidden;　・・・表示・非表示を指定して隠す
opacity: 0;　　　　・・・透明度を変えて隠す

かめるん先生

中級者以上は、上記3つの違いを詳しく知っておきましょう！

初学者は違いがあるということだけ認識しておけばOKです！

CSSのdisplay: none;で要素を非表示にする

displayはブロックレベル要素やインライン要素など、要素の表示形式を指定するプロパティです。
displayプロパティを使って要素を消す場合は値に「none」を指定します。

セレクタ {
    display: none;
}

1行記述するだけで要素を非表示にすることができます。

実際の使用例

  <div class="block1">
    <p>この要素をdisplay: none;で隠します！</p>
  </div>

表示結果

この要素をdisplay: none;で隠します！

上記のblock1クラスにCSSでdisplay: none;を適用します。

.block1 {
  display: none;
}

表示結果

要素を非表示にすることができました。逆に要素を表示させる場合はdisplayの値をnone以外にすれば表示されるようになります。block, inline, inline-blockのいずれかにすれば要素が表示されます。

display: none; で要素を非表示にすると、直下の要素や右側の要素が詰まるという特徴があります。挙動を動画で確認してみましょう。

<div class="boxWrap">
  <div class="box box1">要素1</div>
  <div class="box box2">display:none;で非表示</div>
  <div class="box box3">要素3</div>
  <button>クリック</button>
</div>

.boxWrap {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.box {
  cursor: pointer;
  align-items: center;
  border: 1px solid #000;
  display: inline-block;
  margin-bottom: 8px;
  padding: 10px;
  width: fit-content;
}

.box1 {
  background-color: orange;
}

.box2 {
  background-color: lightyellow;
}

.box3 {
  background-color: lightblue;
}

button {
  display: inline-block;
  background-color: red;
  padding: 20px;
  color: #fff;
  width: fit-content;
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('button').addEventListener('click', function() {
    document.querySelector(".box2").style.display = "none";
  });
});

ボタンをクリックすると中央の要素がdisplay: none; で非表示になり、要素3が上に詰まっています。

かめるん先生

HTMLの記述から削除された状態と同じですね！

存在ごと消されています！

CSSのvisibility: hidden;で要素を非表示にする

visibilityプロパティは要素の表示・非表示の適用をすることができます。

基本書式

セレクタ {
　visibility: visible;
}

上の場合は要素が可視状態（表示状態）となります。要素を非表示にする場合はvisibility: hidden;を適用します。

セレクタ {
visibility: hidden;
}

実際の使用例

  <div class="block2">
    <p>この要素をvisibility:hiddenで隠します！</p>
  </div>

表示結果

この要素をvisibility: hiddenで隠します！

こちらにCSSでvisibility: hidden;を適用すると要素が非表示になります。

.block2 {
  visibility: hidden;
}

表示結果

要素を非表示にすることができました。
上記の場合、visibility: visible;を指定すると要素が表示状態になります。

visibility: hidden;で要素を非表示にすると、display:none;と違って要素が詰まらないという特徴があります。また、非表示になった要素はクリックすることができません。

挙動を動画で確認してみましょう。

<div class="boxWrap">
  <div class="box box1">要素1</div>
  <div class="box box2">visibility:hidden;で非表示</div>
  <div class="box box3">要素3</div>
  <button>クリック</button>
</div>

.boxWrap {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.box {
  cursor: pointer;
  align-items: center;
  border: 1px solid #000;
  display: inline-block;
  margin-bottom: 8px;
  padding: 10px;
  width: fit-content;
}

.box1 {
  background-color: orange;
}

.box2 {
  background-color: lightyellow;
}

.box3 {
  background-color: lightblue;
}

button {
  display: inline-block;
  background-color: red;
  padding: 20px;
  color: #fff;
  width: fit-content;
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('button').addEventListener('click', function() {
    document.querySelector(".box2").style.visibility = "hidden";
  });
});

ボタンをクリックすると中央の要素がvisibility: hidden;で非表示になりますが、要素3が上に詰まることはありません。非表示になった要素の上にカーソルを載せてもポインターは表示されません。

かめるん先生

こちらは、要素としては存在していますが、触れないというような感じですね！

幽霊のようなイメージが近いかと思います！

CSSのopacity: 0;で要素を非表示にする

opacityは要素の不透明度を設定することができます。

基本書式

セレクタ {
opacity: 0~1;
}

opacityの値は0から1（もしくは0%から100%）の間で数字を設定することができます。
opacityの値が小さいほど要素は透明になります。中間の値であれば要素は半透明状態になります。

実際の使用例

  <div class="block3">
    <p>この要素をopacity:0.1;で薄くします！</p>
  </div>
  <div class="block4">
    <p>この要素をopacity:0.5;で半透明にします！</p>
  </div>
  <div class="block5">
    <p>この要素をopacity:1;で表示させます！</p>
  </div>

.block3 {
  opacity: 0.1;
}

.block4 {
  opacity: 0.5;
}

.block5 {
  opacity: 1;
}

表示結果

opacityの値を0にすれば透明状態になります。

opacity: 0;で要素を非表示にすると、display:none;と違って要素が詰まらないという特徴があります。またvisibility: hidden;と違って、非表示になっても要素をクリックすることができます。

挙動を動画で確認してみましょう。

<div class="boxWrap">
  <div class="box box1">要素1</div>
  <div class="box box2">opacity:0;で非表示</div>
  <div class="box box3">要素3</div>
  <button>クリック</button>
</div>

.boxWrap {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.box {
  cursor: pointer;
  align-items: center;
  border: 1px solid #000;
  display: inline-block;
  margin-bottom: 8px;
  padding: 10px;
  width: fit-content;
}

.box1 {
  background-color: orange;
}

.box2 {
  background-color: lightyellow;
}

.box3 {
  background-color: lightblue;
}

button {
  display: inline-block;
  background-color: red;
  padding: 20px;
  color: #fff;
  width: fit-content;
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('button').addEventListener('click', function() {
    document.querySelector(".box2").style.opacity = "0";
  });
});

ボタンをクリックすると中央の要素がopacity: 0;で非表示になりますが、要素3が上に詰まることはありません。非表示になった要素の上にカーソルを載せると、ポインターが表示されます。

かめるん先生

こちらは、要素としては存在しているが、透明になっているから見えない（触れることは可能）という感じですね！
透明人間のようなイメージが近いと思います！

display: none;　opacity: 0;　visibility: hidden; の違い

display: none;の場合は非表示になるだけでなく要素自体が「無くなる」ので、その要素の次にある要素が詰まって表示されます。

visibility: hidden;の場合は「非表示になるだけ」、opacity: 0;の場合は「透明になるだけ」です。要素自体が無くなるわけではありません。

CSSで要素を非表示にするプロパティの特徴とまとめ

display: none; 　　・・・表示形式を変えて隠す。要素ごと無くなる。
visibility: hidden;　・・・表示・非表示を指定して隠す。要素は残る。
opacity: 0;　　　　・・・透明度を変えて隠す。要素は残る。

プロパティ	要素の有無	クリックイベント
`display:none;` （表示形式を変えて隠す）	なくなる	クリックできない
`visibility: hidden;` （表示・非表示を指定して隠す）	存在する	クリックできない
`opacity: 0;` （透明度を変えて隠す）	存在する	クリックできる

どれを使っても非表示になるものの、ソースコード上は存在して検索エンジンに読み込まれる点には注意しておきましょう。

実務で要素を非表示にするケース

display: none; とvisibility: hidden; 、opacity：0; の特徴や使い方を理解したうえで、実際に実務で要素を非表示にするケースをいくつか紹介します。

ハンバーガーメニューをdisplay: none;を使ってPC画面で非表示

以下の記事でヘッダーの作り方について解説しています。

【CSS】初心者でも簡単にできるヘッダーの作り方を解説

その記事の中の解説で、以下の記述においてdisplay: none;が使われています。

/*ハンバーガーメニュー*/
.hamburger {
    background-color: transparent;
    border-color: transparent;
    z-index: 9999;
}
@media screen and (min-width: 960px) {
    /*PC時非表示にする*/
    .hamburger {
        display: none;
    }
}

モバイル画面ではハンバーガーメニューが表示され、PC画面ではdisplay: none;でハンバーガーメニューごと非表示にしています。

visibility: hidden; やopacity: 0; でも非表示にすることができますが、要素は透明になってそこに残り続けます。一般的にPC画面ではハンバーガーメニューは不要な場合が多いので、display: none;でレイアウトごと非表示にします。

要素ごと非表示になるのでユーザーの誤操作・誤クリックを防ぐこともできます。

visibility: hidden;でエラーメッセージを非表示

以下のコードのフォーム入力画面で、エラーメッセージをvisibility: hidden; にしています。メールアドレス入力画面でメールアドレス以外のテキストを入力すると、エラーメッセージが表示されます。

<form>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" class="input" />
  <span class="error-message">正しいメールアドレスを入力してください。</span>
</form>

input{
  border: 1px solid #ccc;
}
.error-message {
  color: red;
  visibility: hidden;
  padding-left: 10px;
}
.input:user-invalid + .error-message {
  visibility: visible;
}

See the Pen CSS 非表示 visibility: hidden; by ZeroPlus (@zeroplus-programming) on CodePen.

「メールアドレス」の欄に適当な文字を入力してみてください。

メールアドレス以外のテキストが入力されて無効になった場合に、疑似クラス:user-invalidで指定したスタイルが適用され、エラーメッセージが表示されます。:user-invalidは、ユーザーがフォームに入力するまでスタイルは適用されません。

display: none;を使わない理由は、display: none; は要素ごと非表示になるため、要素表示時にレイアウトが崩れる可能性があるためです。対してvisibility: hidden; は表示スペースが確保される特徴があります。

またopacity: 0; を使わない理由は、今回の例では当てはまらないものの、透明でもクリックできてしまうので誤操作の原因になるためです。

opacity: 0; でモーダルを非表示

以下の記事でモーダルの作り方について解説しています。

JavaScriptを使ったモーダルウィンドウの作り方を解説

その記事の中の解説で、以下の記述においてopacity: 0; が使われています。

See the Pen modal-js by ZeroPlus (@zeroplus-programming) on CodePen.

.layer {
    background: rgba(0, 0, 0, .2);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s linear, visibility 1s linear, z-index 1s linear;
}

.modal {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    min-width: 440px;
    opacity: 0;
    visibility: hidden;
    transition:  visibility .7s linear, opacity .7s linear;
}

初期状態ではmodal要素とグレー背景のlayer要素をopacity: 0; とvisibility: hidden; で非表示にさせています。
モーダルボタンをクリックした際に、JavaScriptの処理によってlayer要素にis-openクラスを付与して、layer要素とmodal要素を画面に表示させます。

.layer.is-open {
  z-index: 999;
  opacity: 1;
  visibility: visible;
}
.layer.is-open .modal{
  opacity: 1;
  visibility: visible;
}

opacityプロパティはtransitionプロパティと組み合わせてアニメーションさせることができます。

今回の例ではvisibility: hidden; も同時に使用されていますが、opacity: 0; の非表示だけだとモーダルに対して操作できてしまうので、visibility: hidden; を使って操作できないようにしています。

今回のケースでdisplay: none; を使わない理由は、transitionプロパティによるアニメーションが効かないためです。

場合によって非表示にするプロパティを使い分けよう

CSSで要素を非表示にするプロパティの特徴とまとめ

display: none;　　・・・表示形式を変えて隠す。要素ごと無くなる。
visibility: hidden;　・・・表示・非表示を指定して隠す。要素は残る。
opacity: 0;　　　　・・・透明度を変えて隠す。要素は残る。

プロパティ	要素の有無	クリックイベント
`display:none;` （表示形式を変えて隠す）	なくなる	クリックできない
`visibility: hidden;` （表示・非表示を指定して隠す）	存在する	クリックできない
`opacity: 0;` （透明度を変えて隠す）	存在する	クリックできる

どれを使っても非表示になるものの、ソースコード上は存在して検索エンジンに読み込まれる点には注意しておきましょう。

実務では、以下のように用途に応じて使い分けましょう。

実務での使い分け

目的	プロパティ	理由
アニメーションさせたい	`opacity: 0;`	transitionプロパティと組み合わせで簡易的なアニメーションができる
スペースを確保しつつ非表示にしたい	`visiblity: hidden;`	レイアウトを維持できる
要素を完全に非表示にしたい	`display: none;`	操作できず、表示も完全に非表示にできる