説明
visibilityは文字や画像を隠しておく、表の1行や2列だけ表示しないといった設定が出来ます。

visibilityプロパティを使うと表示と非表示を指定出来ます。
visibilityは文字や画像を隠しておく、表の1行や2列だけ表示しないといった設定が出来ます。
visibilityプロパティの構文は以下の通りです。
visibility: 表示・非表示;
表示・非表示は以下が指定出来ます。
表示・非表示 | 説明 |
---|---|
visible | 表示(デフォルト) |
hidden | 非表示 |
collapse | 表の行、列を非表示 |
尚、IE7等古いブラウザではcollapseが使えません。又、確認した範囲ではGoogle ChromeやAndroid標準ブラウザではcollapseがhiddenと同じ動きをします。
visibilityのhidden利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
div {
visibility: hidden;
}
<div>1行目</div>
<span>2行目</span>
上記を表示すると以下になります。
1行目が空白になり、文字は表示されません。
行にcollapseを指定した時の例は以下の通りです。
.t {
visibility: collapse;
}
<table border=1>
<tr class="t">
<th>題1</th>
<th>題2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
題1 | 題2 |
---|---|
データ1 | データ2 |
1行目が表示されません。collapseを指定しない時の表は以下の通りです。
題1 | 題2 |
---|---|
データ1 | データ2 |
因みにcollapseではなく、hiddenで指定すると以下のようにデータだけ表示されず、行は残ります。
データ1 | データ2 |
次ぎは列への指定です。CSSは同じでHTMLを以下に書き換えます。
<table border=1>
<col span"1" class="t">
<tr>
<th>題1</th>
<th>題2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
題1 | 題2 |
---|---|
データ1 | データ2 |
colでspanにより1列目だけを指定しているため1列目が消えます。
以下はvisibilityをcollapseにしている列を表示させたり、再度非表示にするボタンです。
題1 | 題2 |
---|---|
データ1 | データ2 |
表示ボタンをクリックすると列が表示され、非表示ボタンをクリックすると再度非表示になります。
これは以下のJavaScriptでvisibility:collapse;とデフォルト状態を切り替えています。
<script language="JavaScript">
<!--
function a(){
document.getElementById('t').style.visibility= "visible";
}
function b(){
document.getElementById('t').style.visibility= "collapse";
}
// -->
</script>
又、ボタンは以下のように作り、表の1列目には最初、visibility:collapse;を指定しています。
<form>
<input type="button" value="表示" onclick="a()">
<input type="button" value="非表示" onclick="b()">
</form>
<table border=1>
<col span"1" id="t" style="visibility:collapse;">
<tr>
<th>題1</th>
<th>題2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
表示ボタンがクリックされるとa関数が実行され、idがtで指定している1列目がvisibility:visible;となり、表示されます。
非表示ボタンがクリックされるとb関数が実行され、idがtで指定している1列目がvisibility:collapse;となり、消えます。
尚、表示がズレないように最初から高さを指定している等、若干スタイルは変更しています。
visibility:hidden;と似た設定でdisplay:none;があります。利用例は以下です。
div {
display:none;
}
<div>1行目</div>
<span>2行目</span>
上記を表示すると以下になります。
visibility:hidden;と同様に1行目が表示されていませんが、空間もなくなっています。。
このように、visibility:hidden;は空間は残りますが、display:none;は空間もなくなるという違いがあります。
JavaScript等で文字の表示、非表示を切り替えたりする時、display:none;は空間自体をなくす事が出来ますが、それ以降の表示は上にズレます。
visibility:hidden;では空間が残ってしまいますが、それ以降の表示はズレません。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ