【visibility】ボックスの表示・非表示の設定

visibilityプロパティでは、ボックスの表示・非表示を設定することができます。 非表示を設定した場合でも、そのボックス自体がなくなるわけではなく、もともとの表示分のスペースは確保された状態となり、続く要素の配置位置などは変わりません。

似たような効果があるdisplayプロパティの「none」との違いは、ボックスそのものがなくなった状態にするかどうかという点にあります。

display:noneの場合は、ボックス自体を無くすので表示分のスペースも無くなりますが、visibilityでhidden(非表示)を設定した場合は、表示領域を確保したまま透明になったような状態となります。 ですのでvisibilityプロパティでは、レイアウト自体を変える事無くボックスを表示・非表示にすることができます。

書式

  • visibility : ……… 表示・非表示を指定

★:visible、hidden、collapse、inherit

visible
ボックスを表示します
hidden
ボックスを表示しません。ただし他のボックスは、このボックスが表示されている時と同様の位置に配置されます。
collapse
テーブル(表)の行や列、行グループ、列グループなどに指定した場合、その部分を取り除き、その分詰めて表示します。これらの要素以外にこの値を指定した場合は、hiddenを指定した場合と同じ結果となります。

使用した時の例

.sample1 {visibility: hidden;}
.sample2 {visibility: visible;}
.sample3 {visibility: collapse;}

span {background:#F48282;}
 <span class="sample1">hidden</span> |
 <span class="sample2">visible</span> |
 <span class="sample1">hidden</span> |
 <span class="sample2">visible</span> |

<table border="2">
  <tr class="sample3">
     <th>collapse</th>
     <th>collapse</th>
     <th>collapse</th>
  </tr>
  <tr>
     <td>tdの部分</td>
     <td>tdの部分</td>
     <td>tdの部分</td>
  </tr>
</table>

ブラウザ上の表示例

hidden | visible | hidden | visible |
collapse collapse collapse
tdの部分 tdの部分 tdの部分

対応ブラウザなどのデータ

初期値 visible 値の継承 継承する
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

関連情報