要素の表示、非表示の切り替え - visibility プロパティ - CSS
CSSで要素の表示、非表示の切り替えをするコードを紹介します。
概要
表示領域を確保しつつ、要素を非表示にするには、CSSのvisibility プロパティを利用します。
メモ
- 領域を空けた状態でコンテンツのみを非表示にする方法の詳細はこちらの記事を参照して下さい。
- 領域も含めて非表示にする場合にはdisplayプロパティを利用します。詳細はこちらの記事を参照して下さい。
書式
値には以下が利用できます。
| 値 | 意味 |
|---|
| visible | 要素を表示します。 |
| hidden | 要素を非表示にします。 |
| collapse | テーブルの行や列に設定した場合、設定した要素を詰めて表示します。 |
例1 : visibility:collapse の例 (行の非表示)
visibility:collapse を用いたテーブルの例を紹介します。
コード
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="table.css" />
</head>
<body>
<table class="tablestyle">
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr class="collapsestyle">
<td>123</td>
<td>456</td>
<td>789</td>
</tr>
<tr>
<td>あかさ</td>
<td>たなは</td>
<td>まやら</td>
</tr>
</table>
</body>
</html>
.tablestyle {
border: solid 1px #0094ff;
}
.tablestyle tr td {
border: solid 1px #0094ff;
}
.collapsestyle {
visibility: collapse;
}
実行結果
上記のHTMLファイルをWebブラウザで開きます。下図の表示結果が得られます。2行目の"123" "456" "789" が非表示になっていることがわかります。また、行が詰められていることも確認できます。
なお、
visibility:hidden; の場合は下図の結果になり、行は詰まりません。
Tip
スタイルを
display:none; にした場合は下図の結果になります。行が詰まります。
例2 : visibility:collapse の例 (列の非表示)
コード
以下のHTML, CSSファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="table.css" />
</head>
<body>
<table class="tablestyle">
<tr>
<td>ABC</td>
<td class ="collapsestyle">DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>123</td>
<td class="collapsestyle">456</td>
<td>789</td>
</tr>
<tr>
<td>あかさ</td>
<td class="collapsestyle">たなは</td>
<td>まやら</td>
</tr>
</table>
</body>
</html>
.tablestyle {
border:solid 1px #0094ff;
}
.tablestyle tr td{
border:solid 1px #0094ff;
}
.collapsestyle {
visibility:collapse;
}
表示結果
列を非表示にした場合は、列は詰まりません。
なお、
visibility:hidden; の場合は下図の結果になり、列は詰まりません。
Tip
スタイルを
display:none; にした場合は下図の結果になります。列が詰まります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
