takato（@n8takato）です！
CSSで要素を非表示にする方法を知りたい
この記事は上記の課題に向けて作成しています。
CSSでは要素を非表示にする方法がいくつかあります。
この記事ではそれぞれの方法を紹介していきます。
この記事を読むメリット
- cssで要素を非表示にする方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
CSSで要素を非表示にする方法
早速CSSで要素を非表示にする方法を紹介します。
要素を非表示に出来るcssは下記の3つです。
要素を非表示に設定出来るcss
- display:none;
- opacity: 0;
- visibility: hidden;
display:none;
「display:none;」は要素そのものを非表示にすることが出来ます。
対象の要素自体が非表示になるため、その次の要素が前に出てくるようになります。
記述方法は下記のようになります。
記述方法
.こちらにクラス名が入ります {
display:none;
}opacity: 0;
「opacity: 0;」は要素自体を透明にすることが出来ます。
先ほどの「display:none;」と異なり、透明になっているだけで表示はされています。ただし人の目では見ることが出来ないので、非表示されているように見えます。
指定した箇所だけ空白になります。
記述方法
.こちらにクラス名が入ります {
opacity: 0;
}visibility: hidden;
「visibility: hidden;」は先ほどの透明と似ており、指定した箇所の要素が見えなくなるように設定するコードです。
要素ごと非表示している訳では無いため、「opacity: 0;」同様にその箇所だけ空白になります。
記述方法
.こちらにクラス名が入ります {
visibility: hidden;
}CSSで非表示コードを使用するシーン
cssで要素を非表示にするシーンは大きく2つあります。
cssで要素を非表示にするシーン
- アニメーションで使用
- レスポンシブで使用
アニメーションで使用
jQueryでアニメーションを実装する際に使用します。
「addClass()」や「removeClass()」でクラスを追加したり外したりしてアニメーションを実装します。
その際cssで非表示設定しているクラスを追加したり外したりすることで、その要素が非表示になったり、表示されるようになったりします。
このようなアニメーションを実装する際に使用します。
レスポンシブで使用
PC版とスマホ版で使用する画像が異なる場合などに使用します。
PC用とスマホ用でそれぞれ画像を用意しておき、片方が表示されてもう片方は非表示されるという設定をします。
その際にcssで非表示設定します。
最後に
この記事ではcssで要素を非表示にする方法を紹介しました。
cssでは簡単に要素を非表示に設定出来ます。
是非実装してみてください。
cssに関する他の記事はこちら
