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とは

どうも、べ〜やんです。 webデザインやプログラミングを学びはじめたとき、最初にHTMLとCSSから学ぶ人が多いのではないでしょうか?私も一番最初にHTMLから学びました。ということで、今回はHTML …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

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

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

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[HTML] articleとsectionの使い方

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