HTML での CSS visibility: visible 可視性可視
CSS visibility: visible 可視性可視
説明
この記事では、CSS の visibility プロパティの visible 値について説明します。この値は、要素の可視性を制御するために使用されます。
visibility プロパティ
定義と使い方
visibilityプロパティは、要素が表示されるか非表示になるかを指定します。- 表示されている要素はページ上のスペースを占有しますが、非表示の要素はスペースを占有しません。
- 書式：
visibility: visible|hidden|collapse|initial|inherit;
プロパティ値
-
visible: デフォルト値。要素は表示されます。
-
詳細: 要素の
visibilityプロパティがvisibleに設定されている場合、その要素はページ上で表示されます。 つまり、ページレイアウトの領域を占有し、ユーザーに表示されます。 要素の内容が表示されていない場合でも (例えば、opacityやcolorの設定により)、要素はページ上の領域を占有します。 -
hidden: 要素は非表示になりますが、スペースはそのまま残ります。
-
詳細: 要素の
visibilityプロパティがhiddenに設定されている場合、その要素はページ上で非表示になります。 ただし、ページレイアウトの領域はそのまま残ります。 つまり、他の要素は、非表示の要素が表示されているかのように配置されます。 -
collapse: 表の行または列に使用され、非表示になり、セルが占めていたスペースも削除されます。その他の要素では、
hiddenと同じ動作をします。 -
詳細: 表の要素 (行や列など) に適用される場合、
collapse値は要素を非表示にし、領域を割り当てません。 これは、ページレイアウトの領域をそのまま残すhiddenとは異なります。 表以外の要素では、collapseはhiddenと同じ動作をします。 -
initial: このプロパティをデフォルト値に設定します。
-
詳細:
initialキーワードは、visibilityプロパティをデフォルト値であるvisibleにリセットします。 -
inherit: 親要素から visibility プロパティの値を継承します。
-
詳細:
inheritキーワードは、要素が親要素からvisibilityプロパティの値を継承することを示します。 親要素もinheritに設定されている場合、visibilityプロパティが明示的に設定されている祖先要素が見つかるか、ルート要素に達するまで、DOM ツリーを上にたどります。
注意
- 要素を非表示にし、スペースを占有しないようにするには、
visibility: hidden;ではなくdisplay: none;を使用します。
例
段落を非表示にする
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
visibility: visible; /* デフォルト値 */
}
p {
visibility: hidden;
}
</style>
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です。</p>
</body>
</html>
ブラウザのサポート
すべての主要なブラウザが visibility プロパティをサポートしています。
よくある質問
Q1: visibility: hidden と display: none の違いは何ですか？
A1: visibility: hidden は要素を非表示にしますが、ページ上のスペースはそのまま残ります。一方、display: none は要素を非表示にし、スペースも削除します。
Q2: visibility プロパティはどのように継承されますか？
A2: visibility プロパティは、デフォルトで親要素から継承されます。ただし、inherit キーワードを使用して明示的に継承することもできます。
Q3: visibility プロパティはすべての要素に適用できますか？
A3: はい、visibility プロパティは、すべての HTML 要素に適用できます。