cssプロパティvisibilityについての説明

こんにちは tanaka です。

今回は、
cssプロパティ
visibility の説明です。

visibilityは、
ボックスモデルの
幅、高さを残したまま非表示にする
プロパティです。

HTML<table>の
1セルだけ非表示にも使えます。

画像blog-visibility01
画像blog-visibility02

visibilityは、
表示、非表示の2択しかないため
アニメーションには向きません。

値は3つあります。
 1:visible  = 表示
 2:hidden  = 非表示
 3:collapse = 1セル消す

それでは
詳しくみて行きましょう。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

cssプロパティvisibilityの説明

visibilityとは

visibilityは、
ボックスモデルの
幅、高さを残したまま非表示にする
プロパティです。

(幅、高さを0にして非表示は、display: none)

visibilityは、
HTML<table>の
1セルだけ非表示にも使えます。

画像blog-visibility01
画像blog-visibility02

ゆっくり変化させるアニメーションはopacityが向く

visibilityは、
表示、非表示の2択しかないため
ゆっくり変化させる
アニメーションには向きません。

ゆっくり変化させたい場合は、
opacityを使いましょう。

値は3つ

値は3つあります。
 1:visible  = 表示
 2:hidden  = 非表示
 3:collapse = 1セル消す

1:visible = 表示

visibleは、
ボックスモデルを表示させます。

2:hidden = 非表示

hiddenは、
ボックスモデルの
幅、高さを残したまま非表示にします。

3:collapse = 1セル消す

collapseは、
HTML<table>の
1セルだけ非表示にします。

画像blog-visibility01
画像blog-visibility02

まとめ

visibilityとは

visibilityは、
ボックスモデルの
幅、高さを残したまま非表示にする
プロパティ。

<table>の1セルだけ非表示

visibilityは、
HTML<table>の
1セルだけ非表示にできる。

visibilityは、アニメーションに向かない

visibilityは、
表示、非表示の2択しかないため
アニメーションには向かない。

値は3つ

値は3つ。
 1:visible  = 表示
 2:hidden  = 非表示
 3:collapse = 1セル消す

以上、
visibility
の話でした。

ありがとうございました。

タイトルとURLをコピーしました