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

関連記事

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …

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

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

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …

[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …