visibility/表示・非表示

visibilityプロパティを使うと表示と非表示を指定出来ます。

説明

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

visibility説明

構文

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

visibility: 表示・非表示;

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

【表示・非表示の指定】
表示・非表示 説明
visible 表示(デフォルト)
hidden 非表示
collapse 表の行、列を非表示

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

hidden利用例

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

div {
visibility: hidden;
}

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

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

hidden
2行目

 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 題2
データ1 データ2

 1行目が表示されません。collapseを指定しない時の表は以下の通りです。

題1 題2
データ1 データ2

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

題1 題2
データ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列目が消えます。

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

 以下は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>

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

1行目
2行目

 visibility:hidden;と同様に1行目が表示されていませんが、空間もなくなっています。。

 このように、visibility:hidden;は空間は残りますが、display:none;は空間もなくなるという違いがあります。

 JavaScript等で文字の表示、非表示を切り替えたりする時、display:none;は空間自体をなくす事が出来ますが、それ以降の表示は上にズレます。

 visibility:hidden;では空間が残ってしまいますが、それ以降の表示はズレません。

関連ページ

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)