visibilityプロパティ

TOPページに戻る > CSS

スポンサード リンク

visibilityプロパティ

HTML要素の表示を消すことができます
display:noneとの違いは、visibilityプロパティは要素の幅や高さなどがレイアウトに残るのに対して、display:noneはレイアウトからも消えます
※値のcollapseは、IE7以下が未対応、IE8は使えますが表示領域が確保されません。(幅や高さなどレイアウトからも消えてしまいます)

使い方(書式)

セレクタ { visibility : 値 ; }                                    

visibilityプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
visible 要素を表示する。初期値
hidden 要素を非表示にする
collapse 表の要素を非表示にする
※IE7が未対応、IE8は使えますが表示領域が確保されません

実際の指定方法

.hoge { 
 visibility: visible;  /* 要素を表示 */
 }
.hoge2 {
 visibility: hidden;   /* 要素を非表示 */
 height: 100px ;       /* 要素の高さを指定 */
 }
.hoge3 {
 visibility: collapse;  /* 表の要素を非表示 */
  }

html部分

<p class="hoge">visibility: visible;</p>
実際の表示hidden。hiddenを指定すると非表示になりますが表示領域は保っています
<p class="hoge2">visibility: hidden;</p>
上の空白が表示領域です

実際の表示

visibility: visible;

実際の表示hidden。hiddenを指定すると非表示になりますが表示領域は保っています。

visibility: hidden;

上の空白が表示領域です



(C)2012 ホームページ作成無料