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] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

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

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

[超初心者] HTMLとは

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

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …