ノードの表示と非表示〜CSS

HTML&CSS

ある要素の表示と非表示の方法をまとめました。

スポンサーリンク

visibilityプロパティ

ボックスの表示(visible)と非表示(hidden)を指定するにはvisibilityプロパティを使用します。

visibilityプロパティで非表示にした場合には、ボックス自体が無くなってしまうわけではありません。ボックスが消えた状態になりますが見えなくなっただけで、ボックスは存在したままです。

サンプル1visibilityプロパティがvisibleの場合

サンプル2真ん中のボックスがhiddenの場合

displayプロパティ

displayプロパティでnoneとした場合は、ボックス自体が消滅します。そのためレイアウトが消えたボックスがないものとして扱われます。
表示する場合はdisplayプロパティにblockを指定します。

サンプル3真ん中のボックスがdisplay:noneの場合

サンプル4 全てのボックスがdisplay:blockの場合

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました