# visibility

> 要素の可視性を制御するプロパティです。display: noneと違い、要素は非表示になりますが領域（スペース）は確保されたままになります。アニメーションやトランジションと組み合わせて使用されることが多いです。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/visibility/

## 構文

```css
visibility: visible | hidden | collapse
```

## Tailwindでは

- `visible` → visibility: visible
- `invisible` → visibility: hidden
- `collapse` → visibility: collapse
- 補足: invisible は visibility: hidden（領域は残る）。display: none は hidden（displayの項）。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 基本的な表示・非表示の制御

```css
/* 基本的な使い方 */
.hidden-element {
  visibility: hidden;
}

.visible-element {
  visibility: visible;
}
```

### 例2: display: noneとの違いを明確にした比較例

```css
/* display: noneとの比較 */
.visibility-hidden {
  visibility: hidden; /* 領域は確保される */
}

.display-none {
  display: none; /* 領域も削除される */
}
```

### 例3: opacityと組み合わせたスムーズなアニメーション

```css
/* スムーズなフェードイン・アウト */
.fade-element {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fade-element.show {
  visibility: visible;
  opacity: 1;
}
```

### 例4: 実用的なツールチップの表示制御

```css
/* ツールチップの実装 */
.tooltip {
  position: absolute;
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
  pointer-events: none;
}

.tooltip-trigger:hover .tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
```

### 例5: メディアクエリと組み合わせたレスポンシブ制御

```css
/* レスポンシブでの表示制御 */
.desktop-only {
  visibility: visible;
}

@media (max-width: 768px) {
  .desktop-only {
    visibility: hidden;
  }
}
```

### 例6: モーダルオーバーレイの表示制御

```css
/* JavaScript連携の例 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

.modal-overlay.active {
  visibility: visible;
  opacity: 1;
}
```

## TIPS

visibility: hiddenは要素を非表示にしつつ領域を保持するため、レイアウトが崩れない。opacityと組み合わせることでスムーズなアニメーションが可能。display: noneはアニメーションできないが、visibility: hiddenはアニメーション可能。

## よくある間違い

visibility: hiddenでも領域は確保されるため、完全に要素を除去したい場合はdisplay: noneを使用する。pointer-eventsと組み合わせないとクリックイベントが残る場合がある。

## AIがよく間違えるポイント

display: none（領域ごと消える・読み上げ対象外）、visibility: hidden（領域は残る・読み上げ対象外）、opacity: 0（領域も操作性も残りフォーカス可能）の3択の使い分けはAIの説明が雑になりがちです。visibilityはdiscreteながらtransition可能（遅延切替に使える）という中級知識も役立ちます。

## AIへの依頼文例

- display: none / visibility: hidden / opacity: 0 の違いを、この開閉UIでどれを使うべきかの判断込みで説明して

## 関連プロパティ

- [display](https://www.css-dictionary.com/property/display.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)
- [pointer-events](https://www.css-dictionary.com/property/pointer-events.md)
- [transition](https://www.css-dictionary.com/property/transition.md)