visibility スタイルシート属性

visibilityはHTML要素の表示・非表示を指定するCSSプロパティです。この記事ではvisibilityの使い方を紹介します。

書式

visibility: property;
property

表示するか否かを以下の値の中から指定します。

意味
visible表示する(規定値)
hidden要素及びその子孫の要素を表示しない。要素があるスペースには余白が生じる。
collapse 表の行、列または列グループを非表示にする

「visibility: hidden;」は要素を表示しないが、余白が生まれる。余白も無くしたい場合は、「display: none;」を使用する。

visible

スタイルシート属性visibilityを使用したHTMLの例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p>Here is <span style="visibility: visible;">visible</span> element.</p>

上記のHTMLはWebブラウザで次のように表示される。

Here is visible element.

hidden

要素を非表示にするには、visibility プロパティに hidden を指定する。非表示になった領域は詰められず、選択やクリックができない。

<p>Here is <span style="visibility: hidden;">hidden</span> element.</p>

上記のHTMLはWebブラウザで次のように表示される。

Here is hidden element.

画像も非表示にできる。

<img src="avator.jpg" style="visibility: hidden;">

上記のHTMLはWebブラウザで次のように表示される。

要素を非表示にするCSSプロパティは3種類あり、それぞれ次の違いがある。

要素を非表示にするCSSプロパティ
CSSプロパティ 領域 選択 クリック
display: none; 詰める 不可 不可
opacity: 0; 詰めない
visibility: hidden; 詰めない 不可 不可

collapse

表の行、列または列グループを非表示にし、その領域を詰めるには、visibility に collapse を指定する。

<table>
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>金融機関</th>
      <th>コード</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>みずほ銀行</td>
      <td>0001</td>
    </tr>
    <tr style="visibility: collapse;">
      <td>三菱UFJ銀行</td>
      <td>0005</td>
    </tr>
    <tr>
      <td>三井住友銀行</td>
      <td>0009</td>
    </tr>
  </tbody>
</table>

上記のHTMLはWebブラウザで次のように表示される。

金融機関コード
金融機関 コード
みずほ銀行 0001
三菱UFJ銀行 0005
三井住友銀行 0009

継承

visibility の指定は、子孫の要素へ継承される。

<div style="visibility: hidden;">
  <div>
    hidden
  </div>
</div>
  

上記のHTMLはWebブラウザで次のように表示される。

hidden

JavaScript

JavaScriptからCSSプロパティ「visibility」を参照・設定するには、Elementオブジェクトのstyleプロパティを使う。

<p id="example">
  This paragraph is invisible.
</p>
<script>
  document.getElementById("example").style.visibility = "hidden";
</script>

CSSプロパティ

CSSには次のプロパティがある。

参考文献

W3C (2016) Visual effects