Bootstrapで学ぶ visibility:hidden と display:none の違い完全ガイド【.invisible活用】

visibility: hidden と display: none の違い【.invisible と併用パターン】

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

生徒

「Bootstrapで要素を非表示にしたいんですが、visibilityとdisplayって何が違うんですか？」

先生

「見えなくする方法はいくつかあって、表示されない理由や動きが少しずつ違います。」

生徒

「初心者でも使い分けられるように、簡単に教えてほしいです。」

先生

「では、Bootstrapのクラスも含めて、順番に見ていきましょう。」

1. 表示と非表示とは何を意味しているのか

Webページでは、文字や画像、ボタンなどの部品を画面に表示したり、見えなくしたりできます。この「見えなくする」状態には種類があります。たとえば、そこに存在はしているけれど見えない場合と、存在そのものが消えてしまう場合です。 BootstrapやCSSでは、この違いを使い分けることで、画面のレイアウトをきれいに保つことができます。初心者のうちは「消えたように見えるけど、実は中身が残っている」という考え方を覚えると理解しやすくなります。

2. visibility hidden の基本的な考え方

visibility hidden は、要素を見えなくする指定です。ただし、見えなくなるだけで、その場所自体はそのまま残ります。例えるなら、透明な箱を机の上に置いている状態です。箱は見えませんが、机の上のスペースは使われたままになります。 Bootstrapでは、この考え方をそのまま使えるクラスとして用意しています。


<div class="border p-3">
    <p class="bg-warning invisible">この文字は見えません</p>
    <p class="bg-info">この文字は見えます</p>
</div>

ブラウザ表示

3. display none の基本的な考え方

display none は、要素を完全に表示しない指定です。画面上から消えるだけでなく、その場所自体も無かったことになります。机の上に置いていた箱を、机の下に片付けたようなイメージです。 Bootstrapでは、表示を消すためのクラスが用意されており、レスポンシブ対応もしやすくなっています。レイアウトが詰まって表示される点が、visibility hiddenとの大きな違いです。


<div class="border p-3">
    <p class="bg-warning d-none">この文字は存在しません</p>
    <p class="bg-info">この文字が上に詰まります</p>
</div>

ブラウザ表示

4. .invisible クラスの役割と特徴

Bootstrapには、visibility hiddenを簡単に使うための.invisibleクラスがあります。このクラスを付けるだけで、要素は見えなくなりますが、レイアウトはそのまま保たれます。ボタンや説明文を一時的に隠したい場合によく使われます。 JavaScriptなどと組み合わせなくても、見た目だけを調整できる点が初心者にも扱いやすい特徴です。


<button class="btn btn-primary invisible">送信ボタン</button>
<button class="btn btn-secondary">キャンセル</button>

ブラウザ表示

5. invisible と display none の使い分け

invisibleは場所を残したまま見えなくしたいときに使います。一方で、display noneはレイアウトごと消したいときに使います。例えば、入力エラーのメッセージを表示する予定の場所を確保したい場合はinvisibleが便利です。逆に、スマートフォンでは不要な装飾を完全に消したい場合はdisplay noneが向いています。この使い分けができると、Bootstrapでの画面作りが一気に楽になります。

6. 初心者がよく迷うポイント

初心者が混乱しやすいのは「見えない＝消えている」と思ってしまう点です。実際には、見えないけれど場所は残っているケースがあります。特にinvisibleを使ったときに、なぜ隙間が空いているのか分からなくなることがあります。その場合は、visibilityとdisplayの違いを思い出してください。見た目とレイアウトは別物だと考えると理解しやすくなります。

7. 実務で役立つシンプルな考え方

実際のWeb制作では、まず「場所を残すかどうか」を基準に考えると迷いません。場所を残すならvisibility hiddenや.invisibleを使います。完全に消すならdisplay noneやBootstrapの非表示クラスを使います。この判断だけで、初心者でも自然なレイアウトを作れるようになります。難しい仕組みを覚える前に、この感覚を身につけることが大切です。