【CSS Modules】visibilityプロパティの使い方
visibilityプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
visibilityプロパティは、要素が表示されるかどうか、および要素が表示されない場合にどのように振る舞うかを制御するプロパティです。このプロパティを使用することで、ウェブページ上の特定の要素を見えなくしたり、再び表示させたりすることができます。
指定できる主な値は以下のとおりです。
visible: 要素は通常どおり表示されます。これがvisibilityプロパティの初期値です。hidden: 要素は非表示になりますが、要素が本来占めるべきスペースは確保されたままになります。つまり、要素が存在しないかのようにレイアウトが変化することはありません。この値が適用されると、背景や子要素もすべて非表示になります。collapse: この値は主にテーブルの行、列、行グループ、列グループに適用された場合に特別な効果を発揮します。collapseが適用されたテーブル要素は非表示になり、同時にその要素が占めるスペースも除去されます。これにより、テーブルのレイアウトが変化し、他の行や列がそのスペースを埋めるように再配置されます。テーブル要素以外の要素にcollapseが適用された場合、通常はhiddenと同じ挙動になります。
visibility: hiddenは要素のスペースを保持する点で、display: noneとは大きく異なります。display: noneが適用された要素は完全に存在しないかのように扱われ、そのスペースも除去されてレイアウトに影響を与えますが、visibility: hiddenはスペースを保持するため、レイアウトの変動を防ぎつつ要素を非表示にしたい場合に有用です。
また、visibilityプロパティはCSSトランジションやアニメーションの対象となるプロパティの一つです。これにより、要素の表示・非表示を滑らかに切り替えるアニメーション効果を作成することも可能です。
公式リファレンス: visibility
構文(syntax)
1selector { 2 visibility: hidden; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません