Tailwind CSS 練習問題 67：要素の可視性（非表示）
📊 Qraftユーザーの成績
- 難易度 Bランク（レーティング1242）
- 難易度 395位/2795問中
- 正答率 50%（1/2回正解）
Tailwind CSSにおいて、要素のレイアウト（占有する領域）を維持したまま、視覚的に見えなくする（CSSの visibility: hidden に相当）場合、正しいクラスはどれか。
- 対象要素のクラスに `hidden` を指定する
- 対象要素のクラスに `invisible` を指定する
- 対象要素のクラスに `opacity-0` を指定する
- 対象要素のクラスに `transparent` を指定する
- 対象要素のクラスに `not-visible` を指定する
正解と解説を見る
正解：対象要素のクラスに `invisible` を指定する
要素が占有する領域（幅や高さ）を保ったまま、視覚的にだけ見えなくする場合は「invisible」クラスを使用します。
【正解の理由】
「invisible」はCSSの「visibility: hidden;」に相当し、要素の姿を隠しつつも、周囲のレイアウトには影響を与えない（本来のスペースを維持する）ユーティリティクラスです。
【不正解の理由】
• 「『hidden』を指定する」という記述は誤り。これは「display: none;」に相当し、要素の領域自体が詰まって消えてしまうため不適切です。
• 「『opacity-0』を指定する」という記述は誤り。透明度を0にするため見た目は消えますが、スクリーンリーダー（＝視覚障害者向けの音声読み上げソフト）等には読み上げられる可能性があり、用途が異なります。
• 「『transparent』を指定する」という記述は誤り。これは文字色や背景色を透明にする色指定用のクラスであり、要素全体を非表示にするものではありません。
• 「『not-visible』を指定する」という記述は誤り。Tailwind CSSにそのような標準クラスは存在しません。