CSS - visibility

トップ > CSSリファレンス > visibility

概要

属性名 visibility
visible | hidden | collapse
初期値visible
適用可能要素すべての要素
継承継承する
メディアVisual
サポートC2 / e4 / N6 / Fx1 / Ch1 / Op4 / Sa1

説明

要素を表示する・しないを切り替えます。

説明
visible表示します。(C2/e4/N6/Fx1/Ch1/Op4/Sa1)
hidden非表示にします。折り畳みは行いません。行や行グループには適用できますが、列・列グループには適用できないようです。(C2/e4/N6/Fx1/Ch1/Op4/Sa1)
collapseテーブルの行(tr)、行グループ(thead, tbody, tfoor)、列(col)、列グループ(colgroup)を非表示にし、折り畳みます。これらの要素以外に適用した場合は hidden と同じ意味になります。Chrome 18、Safari 5.1.5 では、実装は行われているものの、行や列でも hidden と同じ動作になるようです。(C3/e/Fx/Op)

visibility: hidden の場合、非表示にはなりますが、表示の折り畳みは行われず、要素分の領域は確保されたままになります。表示の折り畳みを行いたい場合は display: none を指定してください。下記の例では、JavaScript で入力欄の displayvisibility を変更しています。

HTML
<input type="checkbox"
  onclick="document.getElementById('addr1').style.display = this.checked ? 'block' : 'none';">
住所を変更する(displayによる実装)
<div id="addr1" style="display:none">住所:<input type="text"></div>
<hr>
<input type="checkbox"
  onclick="document.getElementById('addr2').style.visibility = this.checked ? 'visible' : 'hidden';">
住所を変更する(visibilityによる実装)
<div id="addr2" style="visibility:hidden">住所:<input type="text"></div>
表示
住所を変更する(display: none による実装)
住所を変更する(visibility: hidden による実装)

使用例

CSS
.sample-table {
    border: 1px solid #666666;
}
.sample-table td {
    border: 1px solid #666666;
    background-color: #cc9999;
}
.sample-visible {
    visibility: visible;
}
.sample-hidden {
    visibility: hidden;
}
.sample-collapse {
    visibility: collapse;
}
HTML
<h5>block(div)</h5>
<div class="sample-visible">visible</div>
<div class="sample-hidden">hidden</div>
<div class="sample-visible">visible</div>
<div class="sample-collapse">collapse</div>
<div class="sample-visible">visible</div>

<h5>inline(span)</h5>
<div>
  [ <span class="sample-visible">visible</span>
  | <span class="sample-hidden">hidden</span>
  | <span class="sample-visible">visible</span>
  | <span class="sample-collapse">collapse</span>
  | <span class="sample-visible">visible</span> ]
</div>

<h5>row(tr) / row group(thead, tbody, tfoot)</h5>
<table class="sample-table">
  <tr class="sample-visible"><td>visible</td><td>visible</td></tr>
  <tr class="sample-hidden"><td>hidden</td><td>hidden</td></tr>
  <tr class="sample-visible"><td>visible</td><td>visible</td></tr>
  <tr class="sample-collapse"><td>collapse</td><td>collapse</td></tr>
  <tr class="sample-visible"><td>visible</td><td>visible</td></tr>
</table>

<h5>column(col) / column group(colgroup)</h5>
<table class="sample-table">
  <col class="sample-visible">
  <col class="sample-hidden">
  <col class="sample-visible">
  <col class="sample-collapse">
  <col class="sample-visible">
  <tr><td>visible</td><td>hidden</td><td>visible</td><td>collapse</td><td>visible</td></tr>
  <tr><td>visible</td><td>hidden</td><td>visible</td><td>collapse</td><td>visible</td></tr>
  <tr><td>visible</td><td>hidden</td><td>visible</td><td>collapse</td><td>visible</td></tr>
</table>
表示
block(div)
visible
hidden
visible
collapse
visible
inline(span)
[ visible | hidden | visible | collapse | visible ]
row(tr) / row group(thead, tbody, tfoot)
visiblevisible
hiddenhidden
visiblevisible
collapsecollapse
visiblevisible
column(col) / column group(colgroup)
visiblehiddenvisiblecollapsevisible
visiblehiddenvisiblecollapsevisible
visiblehiddenvisiblecollapsevisible

関連項目

visibility, display

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/visibility.htm