CSS 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="portrait.webp" style="visibility: hidden">

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

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

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ブラウザで次のように表示される。

継承

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

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

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

JavaScript

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

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

CSSプロパティ

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

参考文献

World Wide Web Consortium (2016) Visual effects