CSS DisplayとVisibility
![](https://codinghaku.com/wp-content/uploads/2023/02/no-image.jpg)
CSS で要素の表示や非表示を制御するために、display
と visibility
プロパティが用意されています。
Display
display
プロパティは、要素の表示形式を指定するために使用されます。
display
プロパティには多くの値がありますが、要素を非表示にする場合は、none
という値を使用します。
.hide {
display: none;
}
display: none;
が適用された要素は、ページ上から完全に削除され、他の要素がそのスペースを埋めます。つまり、非表示になった要素はページのレイアウトに影響を与えません。
Visibility
visibility
プロパティは、要素の可視性を制御します。visibility
には主に以下の2つの値があります。
visible
(デフォルト): 要素が表示されます。hidden
: 要素が非表示になりますが、ページ上のスペースは占有されたままです。
.hide {
visibility: hidden;
}
visibility: hidden;
が適用された要素は、見えなくなりますが、ページ上のスペースは占有したままです。つまり、他の要素はそのスペースに移動しません。
Display と Visibility の違い
display: none;
は要素を完全に削除し、ページのレイアウトに影響を与えません。対して、visibility: hidden;
は要素を見えなくするだけで、ページのレイアウトに影響を与えるスペースを保持します。display: none;
が適用された要素は、スクリーンリーダーや検索エンジンからもアクセスできません。visibility: hidden;
が適用された要素は、スクリーンリーダーや検索エンジンからアクセス可能です。
これらの違いを理解し、状況に応じて適切なプロパティを使用することが重要です。
要素を完全に非表示にし、ページのレイアウトに影響を与えたくない場合は、display: none;
を使用します。
要素を見えなくするだけで、ページのレイアウトに影響を与えたい場合は、visibility: hidden;
を使用します。
コメント