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

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

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

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

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

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 の基本的な考え方

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 クラスの役割と特徴

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

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

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

5. invisible と display none の使い分け

5. invisible と display none の使い分け

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

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

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

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

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

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

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