CSS基礎 練習問題 14：CSSの表示制御
要素の表示・非表示を切り替える際、要素をレイアウト上から完全に取り除いて非表示にしたい場合、正しいCSSの書き方はどれか。
- div { display: none; }
- div { visibility: hidden; }
- div { opacity: 0; }
- div { color: transparent; }
- div { hidden: true; }
正解と解説を見る
正解：div { display: none; }
display: none;を指定すると、要素はレンダリングされなくなりレイアウト上のスペースも占有しなくなるため、完全に取り除いて非表示にすることができる。『visibility: hidden;』は要素を見えなくするがレイアウト上のスペースはそのまま保持される点で異なる。『opacity: 0;』は要素を透明にするだけでスペースは保持され、クリックなどのイベントも受け付ける状態が残る。『color: transparent;』はテキストの文字色のみを透明にするものであり、要素自体や背景などは非表示にならない。『hidden: true;』はCSSに存在しないプロパティの書き方である。