【初心者必見！】CSSで要素を非表示にする方法3選！

2022/10/19 HTML/CSS

はじめに

　初めまして、シャトルと申します。先日入社したての見習いですが、お手柔らかにお願いします。さて、今回はCSSで要素を非表示にする方法を3つ紹介いたします。ユーザビリティやレスポンシブの観点から、要素を表示させたり非表示にしたりすることが多いかと思います。そんなときに、今回紹介するプロパティは非常に役立ちます。コーディングの質が上がること間違いなしです。

要素を非表示にする3つのプロパティ

1. displayプロパティ

　まず、一つ目はdisplayプロパティです。displayというと、要素の表示方法に関するプロパティでblockやinline-block、flexを頻繁に目にしますが、要素を非表示にするときはnoneを記述します。実際にコードでみてみましょう。


selector {
	display: none;
}

　このように記述すると、指定された要素は消えます。では、具体的にどのように反映されるのかを下記のコードでお試しください。

See the Pen Untitled by adatype (@adatype) on CodePen.

　上のコードでは、ボタンを押すことで要素の表示・非表示の切り替えをしていて、それにdisplayプロパティを活用しています。値をnoneにすれば、要素が非表示になるのでとても便利な印象です。また、noneからblockやinline-blockなどに変更すると、要素が表示されます。このプロパティを使用するイメージとしては、要素をないものとするというのが個人的にしっくりきます。

2. visibilityプロパティ

　次に、visibilityプロパティです。これはあまり見ないプロパティですが、display同様、要素を非表示にする値が用意されており、それがhiddenという値です。以下をご覧ください。


selector {
	visibility: hidden;
}

　このように記述すると、指定された要素は消えます。それでは、具体的にどのように反映されるのかを下記のコードでお試しください。

See the Pen Untitled by adatype (@adatype) on CodePen.

　上記でのコードでもボタンを押すと要素の表示・非表示の切り替えをしていて、そこにvisibilityプロパティを活用しています。このプロパティでは値をhiddenからvisibleに変えると要素が表示されます。hiddenという単語からも連想されますが、そこにあった要素を隠したという認識で間違いないでしょう。ただ、このプロパティには注意点もあります。上記のコードのように要素を非表示にしたとき、その要素があったスペースがそのままになるので、ブロックに使用すると大きな余白が出来てしまいます。なので、このプロパティはいったん要素を消しておきたいときに使用するのが良いのかもしれません。

3. opacityプロパティ

　最後に、opacityプロパティです。コーディング経験者ならお馴染みですね。これは要素の透明度を自由自在に変えることができるプロパティです。そのため、完全に透明にすることで要素を非表示にすることができます。それでは、見ていきましょう。


selector {
	opacity: 0;
}

　上のように記述すると、指定された要素は消えます。こちらも、具体的にどのように反映されるのかを下記のコードでお試しください。

See the Pen Untitled by adatype (@adatype) on CodePen.

　この場合、opacityの値を0にすると要素が透明になり見えなくなる（要素が非表示になる）という仕組みです。こちらの方法では、visibilityと同様に要素の範囲を保ったままになりますが、違う点が一つあります。それは要素をクリックできるか否かです。visibilityではクリックできないですが、opacityでは良くも悪くもクリックできてしまいます。なので、ボタンなどを透明にしてしまうと、誤って押すことになるので注意が必要です。

　蛇足ですが、opacityのメリットとしてはtransformプロパティやanimationプロパティなどと組み合わせることで、JavaScriptを使わずに動きのあるサイトを再現できます。以下に参考になるサイトを載せておきますので、興味のある方は是非。

CSSアニメーションの使い方 | 動くWebデザインアイディア帳