```html
CSS 可視性制御の深淵：Display と Visibility
この記事では、CSS で要素の可視性を制御する重要な 2 つの属性、`display` と `visibility` について詳しく解説します。両者の違い、適用場面、注意点などを明確にすることで、これらの属性をより深く理解し、適切に使いこなせるようにすることを目指します。
1. display 属性：要素の表示タイプを制御する
`display` 属性は、要素がどのように表示されるかを制御するために使用されます。主な値は以下のとおりです。
none: 要素を完全に非表示にします。要素はドキュメントフローから削除され、スペースも占有しません。block: 要素をブロックレベル要素として表示します。要素は新しい行から始まり、利用可能な横幅全体を占有します。inline: 要素をインライン要素として表示します。要素は新しい行から始まらず、テキストのように水平方向に配置されます。inline-block: 要素をインラインブロックレベル要素として表示します。ブロックレベル要素のように幅や高さを設定できますが、インライン要素のように水平方向に配置されます。flex,gridなど: レイアウトに特化した値です。
`display: none` と `visibility: hidden` の違い
どちらも要素を非表示にしますが、`display: none` は要素を完全にドキュメントフローから削除する一方、`visibility: hidden` は要素の表示を非表示にするだけで、スペースは確保されたままになります。
| 属性 | 動作 | スペース |
|---|---|---|
display: none |
要素を完全に非表示にする | スペースを占有しない |
visibility: hidden |
要素の表示を非表示にする | スペースを占有する |
適用場面
- 条件に応じて要素の表示/非表示を切り替える場合
- ページレイアウトを制御する場合
<div id="myElement">表示/非表示を切り替える要素</div>
<button onclick="toggleElement()">クリックして切り替え</button>
<script>
function toggleElement() {
const element = document.getElementById('myElement');
element.style.display = element.style.display === 'none' ? 'block' : 'none';
}
</script>
2. visibility 属性：要素の可視性を制御する
`visibility` 属性は、要素が表示されるかどうかを制御するために使用されます。主な値は以下のとおりです。
visible: 要素を表示します。これがデフォルト値です。hidden: 要素を非表示にしますが、スペースは確保されたままになります。collapse: テーブルの行や列を非表示にする場合に使用します。スペースは占有しません。
`visibility: hidden` と `opacity: 0` の違い
どちらも要素を見えなくしますが、`visibility: hidden` は要素を非表示にするだけで、ユーザーインタラクションには反応しますが、`opacity: 0` は要素を完全に透明にするため、ユーザーインタラクションにも反応しません。
| 属性 | 動作 | ユーザーインタラクション |
|---|---|---|
visibility: hidden |
要素を非表示にする | 反応する |
opacity: 0 |
要素を完全に透明にする | 反応しない |
適用場面
- プレースホルダー要素を作成する場合
- 要素を徐々に表示/非表示にするアニメーションを実装する場合
<div id="fadeElement">フェードイン/アウトする要素</div>
<button onclick="fadeOut()">フェードアウト</button>
<button onclick="fadeIn()">フェードイン</button>
<script>
function fadeOut() {
const element = document.getElementById('fadeElement');
element.style.opacity = 0;
}
function fadeIn() {
const element = document.getElementById('fadeElement');
element.style.opacity = 1;
}
</script>
まとめ
`display` と `visibility` はどちらも要素の可視性を制御する重要な属性ですが、動作メカニズムと適用場面が異なります。適切な属性を選択することで、ページレイアウトや要素の表示状態をより効果的に制御できます。
関連Q&A
Q1: `display: none` と `visibility: hidden` の使い分け方を教えてください。
A1: 要素を完全に非表示にしてスペースも削除したい場合は `display: none` を、要素の表示だけを非表示にしてスペースは確保したい場合は `visibility: hidden` を使用します。
Q2: `visibility: hidden` の要素にアニメーション効果を適用できますか？
A2: いいえ、`visibility: hidden` の要素は表示が非表示になっているだけで、アニメーション効果は適用されません。アニメーション効果を適用したい場合は、`opacity` プロパティを使用してください。
Q3: `display` プロパティと `visibility` プロパティは、JavaScript から操作できますか？
A3: はい、どちらも JavaScript から操作できます。`element.style.display = 'none';` や `element.style.visibility = 'hidden';` のように記述することで、要素の表示状態を動的に変更できます。
```