CSS DisplayとVisibility

CSSマニュアル

2023.04.18

CSS で要素の表示や非表示を制御するために、display と visibility プロパティが用意されています。

Display

display プロパティは、要素の表示形式を指定するために使用されます。

display プロパティには多くの値がありますが、要素を非表示にする場合は、none という値を使用します。

.hide {
  display: none;
}

display: none; が適用された要素は、ページ上から完全に削除され、他の要素がそのスペースを埋めます。つまり、非表示になった要素はページのレイアウトに影響を与えません。

visibility プロパティは、要素の可視性を制御します。visibility には主に以下の2つの値があります。

.hide {
  visibility: hidden;
}

visibility: hidden; が適用された要素は、見えなくなりますが、ページ上のスペースは占有したままです。つまり、他の要素はそのスペースに移動しません。

display: none; は要素を完全に削除し、ページのレイアウトに影響を与えません。対して、visibility: hidden; は要素を見えなくするだけで、ページのレイアウトに影響を与えるスペースを保持します。
display: none; が適用された要素は、スクリーンリーダーや検索エンジンからもアクセスできません。visibility: hidden; が適用された要素は、スクリーンリーダーや検索エンジンからアクセス可能です。

これらの違いを理解し、状況に応じて適切なプロパティを使用することが重要です。

要素を完全に非表示にし、ページのレイアウトに影響を与えたくない場合は、display: none; を使用します。

要素を見えなくするだけで、ページのレイアウトに影響を与えたい場合は、visibility: hidden;を使用します。