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 で入力欄の display や visibility を変更しています。

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 #999;
}
.sample-table td {
    border: 1px solid #999;
    background-color: #fcc;
}
.sample-visible {
    visibility: visible;
}
.sample-hidden {
    visibility: hidden;
}
.sample-collapse {
    visibility: collapse;
}

HTML

<h3>block(div)</h3>
<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>

<h3>inline(span)</h3>
<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>

<h3>row(tr) / row group(thead, tbody, tfoot)</h3>
<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>

<h3>column(col) / column group(colgroup)</h3>
<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)

visible	visible
hidden	hidden
visible	visible
collapse	collapse
visible	visible

column(col) / column group(colgroup)

visible	hidden	visible	collapse	visible
visible	hidden	visible	collapse	visible
visible	hidden	visible	collapse	visible

リンク

初版：1997年7月27日、最終更新：2015年10月25日

https://www.tohoho-web.com/css/prop/visibility.htm

CSS - visibility

概要

説明

使用例

関連項目

リンク