visibility

要素の「表示／非表示」を指定します。displayプロパティでnoneを指定した場合も要素を非表示にできますが、visibilityプロパティで非表示にした場合、要素の表示領域は確保されたままとなっています。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ visibility : 値; }

▲PageTop

指定できる値

値 初期値 意味
visible 要素を表示します。
collapse <tr>や<td>など、行・列要素を非表示にします。それ以外の要素に指定した場合は、hiddenと同様となります。(IEは未対応)
hidden 要素を非表示にします。
inherit ○ 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      img#sample1 {
        visibility : hidden;
      }
      a:hover img#sample1 {
        visibility : visible;
      }
      img#sample2 {
        display : none;
      }
      a:hover img#sample2 {
        display : inline;
      }
      .sample {
        margin-right : 30px;
        float : left;
      }
      .sample img {
        border : 0;
      }
    </style>
  </head>
  <body>
    <p>※リンクにマウスを合わせると画像が表示されます。</p>
    <div class="sample">
      <a href="#">
        ↓【visibility : hidden】<br>により画像が非表示になっています。<br>
        <img id="sample1" src="../../../../images/development/htmlcss/image.gif" alt="visibilityサンプル画像">
      </a><br>↑画像の表示領域は確保されています。
    </div>
    <div class="sample">
      <a href="#">
        ↓【display : none】<br>により画像が非表示になっています。<br>
        <img id="sample2" src="../../../../images/development/htmlcss/image.gif" alt="displayサンプル画像">
      </a><br>↑画像の表示領域は確保されていません。
    </div>
    <br style="clear : float;">
  </body>
</html>

表示結果

※リンクにマウスを合わせると画像が表示されます。


↓【visibility : hidden】
により画像が非表示になっています。
visibilityサンプル画像
↑画像の表示領域は確保されています。
↓【display : none】
により画像が非表示になっています。
displayサンプル画像
↑画像の表示領域は確保されていません。

▲PageTop

関連項目

CSS

display

▲PageTop

▲