スマホ表示の時は見えなくしたい要素があるなぁ・・・
というわけで今回は要素を消す（見えなくする）CSSを3つご紹介します。
要素を消す（見えなくする）CSS3選
- opacity 要素を透明にする
- display: none ; 要素を消す（後ろの要素を詰める）
- visibility: hidden ; 要素を消す（後ろの要素は詰めない）
それぞれ違いがありますので一つずつ紹介していきます。
opacity
opacityは指定した要素の不透明度を設定するプロパティです。
See the Pen 要素を透明にする（CSS ブログ掲載用） by そす (@Sosgoyo) on CodePen.
「title」「title2」「title3」というクラスに、それぞれopacityを「0」「0.5」「1」で付けてます。
「title」はopacity:0;ですので、不透明度0、つまり透明となり完全に消えてます。
見えなくなっていますが、要素自体の存在は消えてないので実はそこに残ってます。
わかりやすいようにhoverアクションを付けてますのでカーソルを合わせてみてください。
個人的にopacityをよく使うシーンはhoverアクション時でしょうか。
リンクやボタンなど、カーソルを合わせたら少し透明になるのは定番ですね！
display: none ;
display: none ;を使うことで、要素の表示をなくし、レイアウトに影響を与えなくなります。
すべての子孫要素も表示がなくなります。
See the Pen 要素を透明にする（CSS ブログ掲載用 display: none ;） by そす (@Sosgoyo) on CodePen.
コード通りなら、「透明だよ1」と「透明だよ3」の間には「透明だよ2」の要素があるはずですが
display: none ;のCSSを充てることで、存在自体がなくなり、要素が詰めて表示されます。
なるほど。要素の存在自体を消してしまうんだね！！
レスポンシブとかで使えそう♪
display: none ;はレスポンシブ表示のときに良く使います。
PCの時は表示させたいけど、スマホの時は消したい、とかよくあるシーンですね♪
visibility: hidden ;
visibility: hidden ;は文書のレイアウトを変更することなく要素を表示したり非表示にできるプロパティです。
See the Pen 要素を透明にする（CSS ブログ掲載用 display: none ;） by そす (@Sosgoyo) on CodePen.
上記の通り、要素の存在は消えますが、レイアウトは維持されたままとなってます。
（「透明だよ2」の文字が消えカーソルも効きませんが、スペースは残ったままです）
個人的には、ハンバーガーメニューを作成するときとかに使用します。
クリック時、フワッと表示させたいときにdisplay: none ;で表示を消すとアニメーションがうまく効かず
パッと切り替わるような表示になります。
opacity: 0 ; ⇒opacity: 1 ;を使用すると、フワッとしたアニメーションが効きますが、opacityだけだと
透明になるだけで要素の存在が残っており、クリックとかが出来てしまう状態になってしまいます･･･。
そこでopacity: 0 ;で表示を消した上でvisibility: hidden ;を使用し、クリック時に
opacity: 1 ; visibility: visible ; とすればうまくアニメーションが効き良い感じになります。
合わせ技を使うってことか～。それぞれの利点を生かしてますね～。
まとめ
というわけで今回は指定の要素を消す方法3選を紹介しました！
是非、コーディングにお役立てください～。
