visibility/表示・非表示

説明

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

構文

　visibilityプロパティの構文は以下の通りです。

visibility: 表示・非表示;

　表示・非表示は以下が指定出来ます。

　尚、IE7等古いブラウザではcollapseが使えません。又、確認した範囲ではGoogle ChromeやAndroid標準ブラウザではcollapseがhiddenと同じ動きをします。

hidden利用例

　visibilityのhidden利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
visibility: hidden;
}

<div>1行目</div>
<span>2行目</span>

　上記を表示すると以下になります。

　1行目が空白になり、文字は表示されません。

collapse利用例

　行に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行目が表示されません。collapseを指定しない時の表は以下の通りです。

　因みにcollapseではなく、hiddenで指定すると以下のようにデータだけ表示されず、行は残ります。

　次ぎは列への指定です。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>

　colでspanにより1列目だけを指定しているため1列目が消えます。

javaScriptを利用した隠し列の表示

　以下はvisibilityをcollapseにしている列を表示させたり、再度非表示にするボタンです。

　表示ボタンをクリックすると列が表示され、非表示ボタンをクリックすると再度非表示になります。

　これは以下の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;では空間が残ってしまいますが、それ以降の表示はズレません。

関連ページ

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る