CSS visibility プロパティをマスターする: 要素の表示と非表示を制御する

この記事では、CSS の visibility プロパティについて詳しく解説します。visibility プロパティは、Web ページ上の要素を表示するか非表示にするかを制御するために使用します。display プロパティとの違いや、具体的な使用例を交えながら、visibility プロパティの使い方をマスターしましょう。

visibility プロパティ値の詳細

visibility プロパティには、以下の値を設定することができます。

以下は、それぞれの値を設定した場合の表示例です。

<div class="box visible">visible</div>
<div class="box hidden">hidden</div>
<div class="box collapse">collapse (テーブル要素でのみ有効)</div>
<div class="box parent">
  inherit
  <div class="box inherit">inherit</div>
</div>

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-bottom: 10px;
}

.hidden {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.parent {
  visibility: hidden;
}

visibility と display の違い

visibility プロパティと display プロパティは、どちらも要素の表示状態を制御するために使用されますが、動作が異なります。

• display: none; を設定すると、要素は完全に文書上から削除され、スペースもなくなります。
• visibility: hidden; を設定すると、要素は非表示になりますが、文書内では元の位置とスペースを保持します。

以下の例では、2つのボタンが表示されています。それぞれのボタンをクリックすると、対応する要素の表示状態が切り替わります。

<button id="hideButton">visibility: hidden を適用</button>
<button id="displayNoneButton">display: none を適用</button>

<div id="targetElement">表示状態が変化する要素</div>

const hideButton = document.getElementById('hideButton');
const displayNoneButton = document.getElementById('displayNoneButton');
const targetElement = document.getElementById('targetElement');

hideButton.addEventListener('click', () => {
  targetElement.style.visibility = 'hidden';
});

displayNoneButton.addEventListener('click', () => {
  targetElement.style.display = 'none';
});

visibility プロパティの活用例

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

• ドロップダウンメニューやツールチップなどのインタラクティブな要素の実装
• 画像の遅延読み込みによるWebページのパフォーマンス向上
• フォームの入力エラーメッセージなど、特定の条件下でのみ要素を表示する場合

以下は、visibility プロパティを使用して簡単なドロップダウンメニューを実装する例です。

<nav>
  <ul>
    <li>
      <a href="#">メニュー1</a>
      <ul class="submenu">
        <li><a href="#">サブメニュー1-1</a></li>
        <li><a href="#">サブメニュー1-2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">メニュー2</a>
      <ul class="submenu">
        <li><a href="#">サブメニュー2-1</a></li>
        <li><a href="#">サブメニュー2-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

.submenu {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

nav ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
}

まとめ

この記事では、CSS の visibility プロパティについて解説しました。visibility プロパティは、要素の表示と非表示を制御する効果的な方法です。display プロパティとの違いを理解し、適切に使い分けることで、より洗練されたWebページを作成することができます。

CSS visibility プロパティに関する Q&A

Q1: visibility: hidden; を適用した要素内のコンテンツは、スクリーンリーダーで読み上げられますか？

A1: いいえ、読み上げられません。スクリーンリーダーは、視覚的に表示されていないコンテンツを無視します。

Q2: visibility プロパティと opacity プロパティの違いは何ですか？

A2: visibility: hidden; は要素を非表示にしますが、要素はレイアウト上のスペースを保持します。一方、opacity: 0; は要素を完全に透明にしますが、要素はレイアウト上のスペースを保持します。

Q3: visibility プロパティをJavaScriptで操作するにはどうすればよいですか？

A3: 要素の style.visibility プロパティに値を設定することで、JavaScriptからvisibility プロパティを操作できます。

// 要素を取得
const element = document.getElementById('myElement');

// visibility プロパティを 'hidden' に設定
element.style.visibility = 'hidden';

// visibility プロパティを 'visible' に設定
element.style.visibility = 'visible';