• Home
  • Web制作
  • 【CSS】visibilityプロパティを使いこなそう！非表示との違いや活用事例を紹介

【CSS】visibilityプロパティを使いこなそう！非表示との違いや活用事例を紹介

schedule
Tags: CSS

visibilityプロパティを使いこなそう！非表示との違いや活用事例を紹介

Webサイト制作において、要素を非表示にしたい場面は多く存在します。CSSには要素を非表示にするためのプロパティがいくつかありますが、その中でも「visibility」プロパティは、display: noneとは異なる動作をするため、状況に応じて使い分ける必要があります。

この記事では、visibilityプロパティの基本的な使い方から、display: noneとの違い、そして具体的な活用事例までご紹介します。これを読めば、visibilityプロパティをマスターして、より柔軟なWebデザインを実現できるようになるでしょう。

1. visibilityプロパティとは？

visibilityプロパティは、要素の表示・非表示を切り替えるために使用します。基本的な構文は以下の通りです。

/* 表示 */
visibility: visible;

/* 非表示 */
visibility: hidden;

visibility: visible; と指定すると要素は表示され、visibility: hidden; と指定すると要素は非表示になります。

2. display: noneとの違い

要素を非表示にするプロパティとして、display: none; があります。どちらも要素を非表示にするという点では同じですが、visibility: hidden; と display: none; には大きな違いがあります。

2-1. visibility: hidden; の場合

  • 要素は非表示になりますが、領域は確保されたままになります。
  • つまり、画面上には表示されませんが、他の要素の配置には影響を与えます。

2-2. display: none; の場合

  • 要素は非表示になり、領域も確保されません。
  • つまり、画面上には表示されず、他の要素の配置にも影響を与えません。

3. visibilityプロパティの活用事例

visibilityプロパティは、以下のような場面で活用できます。

3-1. マウスホバーで表示を切り替える

visibilityプロパティと:hover疑似クラスを組み合わせることで、マウスホバー時に特定の要素を表示させることができます。

例：マウスホバーでツールチップを表示

マウスオーバーでツールチップを表示 これはツールチップです 

<p>
  マウスオーバーでツールチップを表示
  <span class="tooltip">
    これはツールチップです
  </span>
</p>

.tooltip {
  visibility: hidden;
}

p:hover .tooltip {
  visibility: visible;
}

4. まとめ

この記事では、CSSのvisibilityプロパティについて解説しました。visibilityプロパティはdisplay: noneとは異なる動作をするため、それぞれの特性を理解して使い分けることが重要です。

今回ご紹介した活用事例を参考に、visibilityプロパティをWebサイト制作に役立ててください。

関連記事