WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「表示の有無」

visibility 「表示の有無」

「visibility」は要素を非表示にします。「display:none」と似ていますが、「visibility」は要素のエリアが縮まりません。

CSS Ver.適用要素継承
2.1全要素する
広告

visibilityの指定方法

構文

visibility : visible | hidden | collapse;

プロパティ/設定値意味
visibility : visible; 要素を表示する(「visibility」の指定が無いのと同じ)
visibility : hidden; 要素を非表示にする
「display:noe」と異なり要素のエリアは縮まらない
visibility : collapse; TABLE要素の「列」「行」「列グループ」「行グループ」非表示にする
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

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-11-21-31-4
2-12-22-32-4
3-13-23-33-4
4-14-24-34-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>

要素を表示

要素を表示

要素を表示

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン