CODING

[CSS] visibilityで非表示にする方法

投稿日:


どうも、べ〜やんです。

今回は、要素を不可視にするvisibilityプロパティを紹介します。





visibilityとは


visibilityとは要素を不可視にできるプロパティです。

使用される値は三つ↓

visibility: visible;  /* 可視 */
visibility: hidden;  /* 不可視(レイアウトそのまま) */
visibility: collapse; /* 不可視(レイアウト詰め) */

display: none;とvisibility: hidden;の違い

要素を非表示にする方法にdisplay: none;がありますが、visibilityとはレイアウトに与える影響に差があります。

display: none;は要素が存在しないものとして扱いますが、visibility: hidden;は要素が見えないだけでそこにあるものとして扱います。


使い方


visibility: visible;はそのまま要素を表示します。

See the Pen gOONyXX by beeyan (@orientado) on CodePen.


visibility: hidden;は要素が見えなくなります。見えないだけのでレイアウトはそのまま維持されます。

See the Pen yLLdryR by beeyan (@orientado) on CodePen.


visibility: collapse;は要素が見えなくなって、レイアウトが詰めて表示されます。

ですが、ブラウザによってはvisibility: hidden;と同じように扱われ、仕様通りの振る舞いをするのは、IE8+とFirefoxのみです。

仕様通りの振る舞いをするとdisplay: none;と同じように表示されます。

See the Pen YzzoMjQ by beeyan (@orientado) on CodePen.


*display: none;は非表示になってレイアウトが詰めて表示されます。*

See the Pen dyyBLdN by beeyan (@orientado) on CodePen.


おわりに


今回は、要素を不可視にするvisibilityプロパティを紹介しました。

javascriptなどと組み合わせると表現の幅が広がりますね、レイアウトへの影響の差でdisplay: none;と使い分けています。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …