【19】visibility で表示か非表示かを指定しよう

最終更新日:2017年05月20日  (初回投稿日:2017年05月18日)

visibilityプロパティは、要素を表示するか非表示にするか指定します。
ブロックレベル・インラインに関係なく、どんな要素にも使えます。

大昔からあるプロパティで、CSS3でも変更点は特になく、とても単純明快なプロパティです。

本日のINDEX
  1. visibilityプロパティの値
  2. visibility: hidden と display: none の違い
  3. table のセルを非表示にする visibility: collapse

visibilityプロパティの値

visibilityプロパティには以下の値があります。

visible これがデフォルト値。表示します。
hidden 領域を確保したまま非表示。
collapse tableのセルを非表示にする。テーブル専用の値です。
(table関連じゃない要素に使ったら hidden になります)
値の継承 あり 適用できる要素 全部

visibility: hidden と display: none の違い

要素を非表示にしたいときに使う visibility: hidden ですが、よく比較される display: none というのもあります。
その違いは、
visibility: hidden は、領域があるまま非表示(編集用語だとトルママ)
display: none は、領域ごと無くなる(トルツメ)

この2つを比較したほうがわかりやすいので、サンプルを見てみましょう。
このようなメニューを用意して...

  • MENU1
  • MENU2
  • MENU3

真ん中の「MENU2」に visibility: hidden を指定します。
スペースがそのまま残っています。領域があるまま非表示ですね。

  • MENU1
  • MENU2
  • MENU3
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
ul {margin:0; padding:0}
ul li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	display: inline-block;
	text-align:center;
	margin:0 10px 0 0;
	border-radius:10px;
	padding:1em;
	width:20%;
	background:#fdf5a0;}
ul li:nth-child(2) {background:#fed5f4; visibility:hidden}
ul li:nth-child(3) {background:#c9f0ff}

真ん中の「MENU2」に display: none を指定します。
スペースが詰められて次の要素が並んでます。こっちは 領域も無くなるんですね。
スペースを残したかったら visibility: hidden、詰めたかったら display: none ってことですね。

  • MENU1
  • MENU2
  • MENU3
ul {margin:0; padding:0}
ul li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	display: inline-block;
	text-align:center;
	margin:0 10px 0 0;
	border-radius:10px;
	padding:1em;
	width:20%;
	background:#fdf5a0;}
ul li:nth-child(2) {background:#fed5f4; display:none}
ul li:nth-child(3) {background:#c9f0ff}

table のセルを非表示にする visibility: collapse

visibilityプロパティの値の中で「collapse」だけは ちょっと毛色が変わってて、テーブル関連の要素専用なんです。
table関連じゃない要素に使ったら visibility: hidden と同じ状態になるそうです。

visibility: collapse は、テーブルのセルを非表示にします。
セルって <td> とか <th> とかテーブル内の最小部品ね。

下のサンプルは、カレンダーの前月分の日付のセル(<td>)に クラス「.hide」を指定し、visibility: collapse を指定しています。
翌月分の日付は「colspan属性」で <td>をひとまとめにして使ってみました。

January
sun mon tue wed thu fri sat
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
<table id="smp2">
  <tr>
    <th colspan="7">January</th>
    </tr>
  <tr class="youbi">
    <td>sun</td>
    <td>mon</td>
    <td>tue</td>
    <td>wed</td>
    <td>thu</td>
    <td>fri</td>
    <td>sat</td>
  </tr>
  <tr>
    <td class="hide">27</td>  <!--前月の27日から31日までを非表示に-->
    <td class="hide">28</td>
    <td class="hide">29</td>
    <td class="hide">30</td>
    <td class="hide">31</td>
    <td class="holiday">1</td>
    <td>2</td>
  </tr>
   〜途中省略〜
  <tr>
    <td>31</td>
    <td colspan="6" class="hide"></td>  <!--翌月の1日からを colspan属性でまとめて-->
  </tr>
</table>
table#smp2 {
	background:#f2f1e6;
	margin: 0;
	padding:0;
	table-layout:fixed;
	border-spacing:5px;
	width:100%;}
table#smp2 tr th,table#smp2 tr td {text-align:center;}
table#smp2 tr th { font-size:120%; background:rgba(255,255,255,0.5)}
table#smp2 tr td { padding:5px; background:#fff;}
table#smp2 tr.youbi td {font-size:small; padding:1px; background:#fdf5a0; border:none;}
table#smp2 tr td:nth-child(1),
table#smp2 tr td.holiday {background:#fed5f4; color:red}
table#smp2 tr td:nth-child(7) {background:#c9f0ff; color:blue}
table#smp2 tr td.hide {
	visibility: collapse}

<tr> <colgroup> <col> <thead> <tfoot> <tbody>にも使えます

上のサンプルでは、テーブルセル <td>要素に visibility: collapse を使用しましたが、
セルのセットである以下の要素にも使えます。
<tr> <colgroup> <col> <thead> <tfoot> <tbody>

サンプルを見てみましょう。
下のテーブルは上から、
<thead>(ベージュの部分)
<tbody>(クリーム色の部分)
<tfoot>(グリーンの部分)の3つに分けています。

エリア 店舗名 来店総数 新規来店 リピート
A 渋谷店 100 80 20
神宮前店 150 100 50
青山店 200 120 80
B 三軒茶屋店 100 80 20
二子玉川店 150 100 50
合計 700 480 220

<tbody>(クリーム色の部分)に visibility:collapse を指定するとこうなります。

エリア 店舗名 来店総数 新規来店 リピート
A 渋谷店 100 80 20
神宮前店 150 100 50
青山店 200 120 80
B 三軒茶屋店 100 80 20
二子玉川店 150 100 50
合計 700 480 220
<table id="smp4">
<thead>  <!--theadを使ってグループにしています-->
  <tr>
    <th class="b_left">エリア</th>
    <th>店舗名</th>
    <th>来店総数</th>
    <th>新規来店</th>
    <th>リピート</th>
  </tr>
</thead>

<tbody> <!--tbodyを使ってグループにしています-->
  <tr>
    <th rowspan="3" class="b_left">A</th>
    <td>渋谷店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
   〜途中省略〜
  <tr>
    <td>二子玉川店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
</tbody>

<tfoot>  <!--tfootを使ってグループにしています-->
  <tr>
    <th colspan="2" class="b_left">合計</th>
    <td>700</td>
    <td>480</td>
    <td>220</td>
  </tr>
</tfoot>
</table>
table#smp4 {
	width:100%;
	margin:0 0 3em;
	border-top:1px solid #ccc;
	border-spacing:0px}
.b_left {border-left: 1px solid #ccc}
table#smp4 tr th, table#smp4 tr td {
	text-align:center;
	font-size:12px;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding: 3px}
table#smp4 thead tr {background:#F0E1D8}
table#smp4 tbody tr {background: #ffc}
table#smp4 tbody {visibility:collapse}
table#smp4 tfoot tr {background:#86BD7E; color:#FFF}
table#smp4 tfoot tr td {font-weight:bold}

テーブル関係の要素については、
[16-3] table のセルを連結しよう(colspan属性, rowspan属性)
[16-5] table横列グループ化 <thead> <tbody> <tfoot>
[16-6] table縦列グループ化 <colgroup> <col>

をご覧ください。

また、visibility: collapse と似たような使い方ができる empty-cells: hide があります。
これもテーブル専用のプロパティですが、こっちは空のセル限定
指定したセルが 空(から:中身が何も無い)だったら自動的にセルを非表示にします。中身があれば表示される。
だから空のセルだったらこっちの empty-cells: hide のほうがオススメ。
詳細はこちらで↓
[16-4] table のセルの枠線を非表示にしよう(CSS使用_empty-cells)

次回予告

次回は overflowプロパティを使ってみましょう。
overflowはボックスから「あふれた」中身をどうするか決めるモノで、要素の幅や高さを制限した場合に、ぜひ知っておきたい便利なプロパティです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.