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] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

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

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

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …

[超初心者] CSSとは

どうも、べ〜やんです。 HTMLに続き超初心者の方用に、マークアップ言語のCSSとはついて書きます。 CSSとは何か? CSSとは、Cascading Style Sheets(カスケーディング・スタ …

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

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