opacity・display・visibilityを使って
CSSのみで要素を表示/非表示にする方法と注意点

2024.03.10
2019.04.30

opacity/display/visibility - cssで要素を表示/批評ににする

コーディングをしていく中で、とある条件によっては表示して、とある条件によっては非表示にしたいという事はよく起こります。

特にレスポンシブデザインなどのコーディングにおいては、PC/SPに応じて要素を出したり隠したりというのはしょっちゅうかもしれません。

この表示・非表示は、今ではCSSだけで行えるのですがやり方は大きく分けて3種類あり、それぞれに特徴があり、表示・非表示だけでない他の設定にも絡んで来ることもあるため、それぞれどういうケースならどの設定を使えばというのを知っておく必要があります。

今回はそんなCSSのみで要素を表示・非表示にする方法を見ていきましょう。

この記事の目次

CSSで要素の表示・非表示を変えるのは大きくわけて3種類

先ほども書いてきたように、CSSを使って要素の表示もしくは非表示にする方法は、下記の3つが主な設定方法になります。

opacity: 0; / opacity: 1;
display: none; / display: block;
visibility: hidden; visibility: visible;

この設定を使う事で、表示と非表示を切り替える事ができます。
それぞれ同じ「表示・非表示」ですが書いてきたようにそれぞれに特徴があります。

opacity: 0 / 1 での表示・非表示

ではopacityについて見ていきたいと思います。
opacityはその要素の透明度を設定するものになります。

値は0～1になりますが、実際には0.01～1までの100分の1単位の値で指定することができ、1がデフォルトの初期値で表示、0にすれば透明＝非表示という形になります。

<p class="opacity1">opacity: 1の設定。opacity: 1の設定。</p>
<p class="opacity08">opacity: 0.8の設定。opacity: 0.8の設定。</p>
<p class="opacity06">opacity: 0.6の設定。opacity: 0.6の設定。</p>
<p class="opacity04">opacity: 0.4の設定。opacity: 0.4の設定。</p>
<p class="opacity02">opacity: 0.2の設定。opacity: 0.2の設定。</p>
<p class="opacity0">opacity: 0の設定。opacity: 0の設定。</p>

.opacity1{
  opacity: 1;
}

.opacity08{
  opacity: 0.8;
}

.opacity06{
  opacity: 0.6;
}

.opacity04{
  opacity: 0.4;
}

.opacity02{
  opacity: 0.2;
}

.opacity0{
  opacity: 0;
}

デモページ

display: none / block での表示・非表示

次にdisplayについて見ていきたいと思います。
こちらはopacityのような数値の値はなく、表示か非表示かをそのまま指定します。

<p class="dis-block">
  display: blockで表示している
</p>

<p class="dis-none">
  display: noneで非表示にしている
</p>

<p>
  テキストの途中や色々な要素に使えます。<br class="dis-none">
  こうすると改行が非表示になります。
</p>

.dis-block{
  display: block;
}

.dis-none{
  display: none;
}

デモページ

visibility: hidden / visible での表示・非表示

最後が、visibilityを使った表示・非表示になります。
とはいえ、先述のopacityやdisplayと比較するとそこまで使用する機会はなく、ほとんどのケースで、opacityやdisplayが使われる事が多いです。

<p class="visible">visibility: visibleで表示している</p>
<p class="hidden">visibility: hiddenで非表示にしている</p>

.visible{
  visibility: visible;
}

.hidden{
  visibility: hidden;
}

デモページ

それぞれの違いや特徴について

同じ表示・非表示という設定になりますが、何度も書いていたようにそれぞれ似てはいるものの細かなところで違いそれぞれに特徴があります。

単に非表示にすれば良いという事では無く、どういう時にどれを使えば良いかというのも変わってくるため、それぞれの違い・特徴はしっかりとおさえておく必要があります。

ブラウザがレンダリングするかどうか

opacity: 0	display: none	visibility: hidden
○	×	○

opacity: 0;および、visibility: hidden;ともにブラウザにレンダリングされます。
レンダリングはされるのですが、非表示設定になるため、結果的に要素の中にあるコンテンツや背景カラーなども非表示となります。

ただ、その場に何も表示されないブロックができる形になります。
そのため、仮に非表示にした要素が、高さのある設定になっているとその高さ分だけは非表示だけれども存在していることになり、見た目何もない余白だけが表示されるという形になります。

その一方で、display:none;はレンダリングがされない仕様になっていますので、高さを設定していたとしても関係ありません。

デモページ

クリックやコピペなどができるかかどうか

opacity: 0	display: none	visibility: hidden
○	×	×

クリックやコピペは、opacity: 0;でのみ可能になります。
非表示にはなっているものの、コピペもクリックも可能な一方、display: none;やvisibility: hidden;はコピペやクリックなどはできない仕様になっています。

デモページ

CSS Transitionに対応するか

opacity: 0	display: none	visibility: hidden
○	×	△（実質×）

cssのtransitionについては、opacityとvisibilityは対応していますが、display: none;に関しては対応していません。

cssで動きを付けるために、transitionを設定することは多々あるかと思いますが、このtransitionと相性が良いのは、opacityになり、最も良い感じの想定している通りのtransitionが動いてくれ、徐々に非表示から表示、表示から非表示へと切り替わってくれます。

visibilityもtransitionに対応という事にはなるのですが、非表示から表示とする場合は即表示という性質を持っていて、逆に表示から非表示の場合も、transitionが完了後に非表示という動きになり、直前までコンテンツが表示されてしまうという事になり、一般的に想定しているtransitionの動きにはならず、対応はしてるけれど実質対応してないようなものです。

どれをどういうシーンで使うのが良いのか

それぞれに特徴があって違いがあるものの、結局のところ、それぞれはどういうシーンに使うのかおちうのはよく悩むポイントかと思います。

transitionなどアニメーション的な動きを要するかどうか

これに尽きるのかなと思います。
transitionなどを使いたい場合は、どうしてもdisplay: none;からdisplay: block;に切り替える際は、transitionが効かずに即表示になってしまい相性が悪いところがあります。

一方、opacity:0 はtransitionが完全に効いてくれるのですが、opacity: 0;は見えないだけどその領域にコンテンツが存在するため、クリックができるなどのデメリットがあります。しかしながら、実はopacity:0とvisibility: hidden;は両方同時に設定することで、非表示にしつつクリックすることもできなくし、さらにtransitionも効かす事ができるという理想的な使い方が可能になります。

opacityとvisibilityは併用することで、それぞれのデメリットを補う事が可能になっています。