cman.jp > WEBページ作成TOP > CSSリファレンス > 「表示の有無」
WEBページ作成
広告
visibility 「表示の有無」
「visibility」は要素を非表示にします。「display:none」と似ていますが、「visibility」は要素のエリアが縮まりません。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 | 全要素 | する |
広告
visibilityの指定方法
| 構文 | |||
|---|---|---|---|
|
visibility : visible | hidden | collapse; |
|||
| プロパティ/設定値 | 意味 | ||
| visibility : visible; | 要素を表示する（「visibility」の指定が無いのと同じ） | ||
| visibility : hidden; | 要素を非表示にする 「display:noe」と異なり要素のエリアは縮まらない |
||
| visibility : collapse; | TABLE要素の「列」「行」「列グループ」「行グループ」非表示にする | ||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||
visibility のサンプル
<style type="text/css">
.cls4{ visibility : collapse; } /* 列,行の非表示 */
.sampleTabale td{
border : 1px solid #666;
}
<!-- html -->
<table style="width:300px;" class="sampleTabale">
<colgroup span="1">
<colgroup span="1" class="cls4">
<colgroup span="2">
<tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
<tr><td>2-1</td><td>2-2</td><td class="cls4">2-3</td><td>2-4</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td><td class="cls4">3-4</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td></tr>
</table>
| 1-1 | 1-2 | 1-3 | 1-4 |
| 2-1 | 2-2 | 2-3 | 2-4 |
| 3-1 | 3-2 | 3-3 | 3-4 |
| 4-1 | 4-2 | 4-3 | 4-4 |
ブラウザにより表示は異なりますのでご注意ください。
IE:2列目が消えて「2-3」「3-4」は内容が消え枠が残ります。
Chrome:2列目は消えない「2-3」「3-4」は内容と枠が消えます。
<style type="text/css">
.cls1{ visibility : visible ; } /* 要素を表示 */
.cls4{ visibility : hidden ; } /* 要素を非表示 */
.cls4{ display : none ; } /* 比較用にdisplay:none */
.samplebox {
width : 250px;
height : 100px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
<!-- html -->
<hr>
<div class="samplebox cls1">要素を表示</div>
<hr>
<div class="samplebox cls2">要素を非表示（表示エリアは縮まらない）</div>
<hr>
<div class="samplebox cls3">要素を非表示（表示エリアは縮まる）</div>
<hr>要素を表示
要素を表示
要素を表示
| 関連するCSS(STYLE) | |
|---|---|
| cursor | カーソルの種類 |
| empty-cells | 空セルの表示 |
| opacity | 透明度 |
| quotes | 引用符 |
広告