【display,visibility】要素を非表示にする

displayプロパティとvisibilityプロパティでは、指定した要素を表示しないようにすることができます。 要素を非表示にするには、displayの値に「none」、visibilityに「hidden」を指定して下さい。

また両社の違いは、display:noneではボックス事態が生成されなくなり、その要素自体がもともとないような状態となります。 visibility:hiddenでは、その要素自体は透明(非表示)となりますが、その要素の表示領域は確保された状態となります。(指定した要素は見えなくなるが、要素が表示されていた部分のスペースが残る)

書式

  • display : none ……… その要素がない状態にする(表示領域は残らない)
  • visibility : hidden ……… 表示領域を残して非表示にする

使用した時の例

.sample1 {display: none;}
.sample2 {visibility: hidden;}

div {background:#EEF4FA;}
<div class="sample1">この部分にdisplay:noneを指定。</div>
<p>この段落の上にdisplay:noneを指定したdivがあります</p>
<div class="sample2">この部分にvisibility: hiddenを指定。これを指定した要素は、
表示領域の部分を残して透明のような状態になります</div>
<p>この段落の上にvisibility: hiddenを指定したdivがあります</p>

ブラウザ上の表示例

この部分にdisplay:noneを指定。

この段落の上にdisplay:noneを指定したdivがあります

この部分にvisibility: hiddenを指定。これを指定した要素は、表示領域の部分を残して透明のような状態になります

この段落の上にvisibility: hiddenを指定したdivがあります

下記は全てを表示させた状態となります。

この部分にdisplay:noneを指定。

この段落の上にdisplay:noneを指定したdivがあります

この部分にvisibility: hiddenを指定。これを指定した要素は、表示領域の部分を残して透明のような状態になります

この段落の上にvisibility: hiddenを指定したdivがあります

対応ブラウザなどのデータ

【display】
初期値 inline 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ 【none】Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera7~ , Safari1~
【visibility】
初期値 visible 値の継承 継承する
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

関連情報