visibilityプロパティ

visibilityプロパティに指定できる値

visibilityプロパティには次の値を指定することができます。

以降はvisibilityプロパティを使ったコードと、ブラウザの使用例を紹介していきます。

使用例1: visible

visibilityプロパティの値に「visible」を指定する例です。

CSS コード例

.sample1 p {
  margin-bottom: 20px;
  padding: 20px;
  font-size: 18px;
}
.sample1 .dummy {
  color: #333;
  background: #ccc;
}
.sample1 .text1 {
  visibility: visible;
  color: #fff;
  background: #2693ee;
}

HTML コード例

<div class="sample1">
  <h2>vertical-align: 50%;</h2>
  <p class="dummy">dummy</p>
  <p class="text1">This text is sample for visibility property.</p>
  <p class="dummy">dummy</p>
</div>

ブラウザで表示してみると以下のようになります。

使用例2: hidden

visibilityプロパティの値に「hidden」を指定する例です。

要素を非表示にする点ではdisplayプロパティの「hidden」と似ていますが、違いはレイアウトへの影響です。
displayプロパティは要素の存在自体を無くすためレイアウトにも影響を与えますが、visibilityプロパティは要素を非表示にするのみでレイアウトに影響を与えません。
そのため、要素のサイズ分の空白が発生します。

CSS コード例

.text2 {
  visibility: hidden;
}

HTML コード例

<div class="dummy">dummy</div>
<p class="text2">This text is sample for visibility property.</p>
<div class="dummy">dummy</div>

ブラウザで表示してみると以下のようになります。

使用例3: collapse

visibilityプロパティの値に「collapse」を指定した例です。テーブルの行、または列をまとめて非表示にします。テーブル以外の場所でこの値を使うと「hidden」と同じ効果になります。

CSS コード例

.sample3 th,
.sample3 td {
  padding: 10px;
  font-size: 16px;
}
.sample3 th {
  color: #fff;
  background: #2693ee;
}
.sample3 td {
  color: #333;
  background: #ccc;
}
.sample3 .demo {
  visibility: collapse;
}

HTML コード例

<table>
  <tr>
    <th>visibility property</th>
    <th>Sample</th>
    <th>Sample</th>
  </tr>
  <tr class="demo">
    <td>Demo</td>
    <td>Demo</td>
    <td>Demo</td>
  </tr>
  <tr>
    <td>Demo</td>
    <td>Demo</td>
    <td>Demo</td>
  </tr>
</table>

ブラウザで表示してみると以下のようになります。