【解説】CSSで表示・非表示にする方法3選【切り替えアニメーションあり】

パソ君

・CSSを使って要素を表示したり、非表示したりする方法ある？
・切り替えるアニメーションも知りたい。

こんな疑問にお答えします。

レスポンシブ時などで、要素を表示したり非表示にしたい時がありますよね。

実はそれ、3つの方法があります。

それぞれ特徴が異なるため、意味を知っていないと使い方を誤る場合あり。

ジト

しっかり覚えておこう！

ということで、この記事では「CSSで表示・非表示にする方法3選」について解説していきます！

【解説】CSSで表示・非表示にする方法3選

CSSで要素を表示・非表示にする方法は、主にこちらの３つ。

順に見ていきましょう。

表示・非表示にする方法①：opacity: 0; 

まずはopacityプロパティを使う方法。透明度を設定することができます。

値を0にすることで、透明になり見た目を非表示にすることが可能。やり方としては「opacity: 0;」を指定するだけ。

ちなみに値は0～1（0％～100％）で指定できますよ。

サンプルがこちら↓見えてないですがopacity:0 ;で透過させてるテキスト部分が実はあります。

See the Pen Untitled by jito-coder (@jito-coder) on CodePen.

<p class="opacity-1">このテキストはopacityで透明度1にしています</p>
<p class="opacity-0_7">このテキストはopacityで透明度0.7にしています</p>
<p class="opacity-0_3">このテキストはopacityで透明度0.3にしています</p>
<p class="opacity-0_0">このテキストはopacityで透明度0にしています</p>

.opacity-1 {
    opacity: 1;
}

.opacity-0_7 {
    opacity: 0.7;
}

.opacity-0_3 {
    opacity: 0.3;
}

.opacity-0_0 {
    opacity: 0;
}

表示・非表示にする方法②：display: none;

2つ目がdisplayプロパティを使う方法。

要素の表示形式を指定するプロパティなだけだって、非表示にすることが可能です。

やり方としては「display: none;」を使うだけ。

サンプルがこちら↓これも実はdisplay: none;で見えてない文字があります！

See the Pen opacity: 要素を表示・非表示にする by jito-coder (@jito-coder) on CodePen.

<p class="display-block">このテキストはdispaly: block;で表示しています</p>
<p class="display-none">このテキストはdispaly: none;で表示しています</p>

.display-block {
    display: block;
}

.display-none {
    display: none;
}

表示・非表示にする方法➂：visibility: hidden;

3つ目がvisibilityプロパティを使うこと。これは要素の表示状態を変更することができます。

やり方としては「visibility: hidden;」を使うだけ。

サンプルがこちら↓これも実際は文章がもう一つありますが、hiddenで非表示にしています！

See the Pen display: 要素を表示・非表示にする by jito-coder (@jito-coder) on CodePen.

<p class="visibility-visible">このテキストはvisibility: visible;で表示しています</p>
<p class="visibility-hidden">このテキストはvisibility: hidden;で表示しています</p>

.visibility-visible {
    visibility: visible;
}

.visibility-hidden {
    visibility: hidden;
}

【解説】CSSで表示・非表示にする方法の違い【切り替えアニメーション付き】

要素をCSSで表示・非表示にする方法を3つ紹介していきました。ただ実はそれぞれ、特徴が異なります。

非表示にしたいからといって、どれでも使ってよいわけではありません。その時の使いどころによって、都度使うプロパティを変える必要があります。

ジト

そのため特徴を知っておくべし！

それぞれの違いを表にしてみた！

違いとしてはこんな感じ↓

順に見ていきましょう。

opacity: 0の非表示特徴【切り替えアニメーション付き】

まずopacityで非表示にした場合、要素の領域はそのままあり、クリックもできる状態になっています。

つまりただ透明になっただけ。物体はそのままあるということ。

サンプルを見たほうがわかりやすいかと↓

See the Pen ➁visibility: 要素を表示・非表示にする by jito-coder (@jito-coder) on CodePen.

紺色の要素をクリックすると、このサイトのTOPページに飛びます。
下のボタンを押すと、要素が表示・非表示に切り替えることが可能。

実際にやってみると、非表示にしても要素の領域自体は残しつつ、TOPページに飛ぶリンクもクリックできる状態を維持していますよね。

そして透明に切り替わるアニメーションも対応しています。

これがopacityで非表示にした時の特徴です。

コードがこちら↓

<a href="https://jito-site.com/" target="_blank" class="text">ここをクリックしたらサイトのTOPへ飛びます</a>
<button class="btn">クリックしたら表示・非表示します</button>

.text {
    ~~~
    opacity: 1;
    transition-property: opacity;
    transition-duration: .5s;
}
.text.opacity {
    opacity: 0;
}

$(document).on('click', '.btn', function() {
  $('.text').toggleClass('opacity');
})

display: noneの非表示特徴【切り替えアニメーション不可】

2つ目がdisplay: none;で非表示にした場合。

この場合、完全に要素自体がなくなります。そのため領域も確保されませんし、クリックもできません。

サンプルがこちら↓

See the Pen ➁visibility: 要素を表示・非表示にする by jito-coder (@jito-coder) on CodePen.

非表示にしたら、要素自体の領域がなくなりボタン要素の位置が上がりますよね。

こんな感じで、要素ごと非表示になるのがdisplay: noneの特徴です。

コードはこちら↓

<a href="https://jito-site.com/" target="_blank" class="text">ここをクリックしたらサイトのTOPへ飛びます</a>
<button class="btn">クリックしたら表示・非表示します</button>

.text.none {
    display: none;
}

$(document).on('click', '.btn', function() {
  $('.text').toggleClass('none');
})

visibility: hiddenの非表示特徴【切り替えアニメーション付き】

最後にvisibility:hiddenで非表示にした場合。

こちらは非表示にしても領域は確保され、transitionも使用可能です。ただクリックはできません。

つまり要素自体は残るけど、触れれなくなるということです。

サンプルがこちら↓

See the Pen visibility: 要素を表示・非表示にする by jito-coder (@jito-coder) on CodePen.

非表示後、領域は残ってるけどリンク先をクリックすることはできませんよね。

これがvisibility:hiddenで非表示にするときの特徴。

（transitionの可否検証のため、opacityも一緒に使ってますがご了承ください）

コードはこちら↓

<a href="https://jito-site.com/" target="_blank" class="text">ここをクリックしたらサイトのTOPへ飛びます</a>
<button class="btn">クリックしたら表示・非表示します</button>

.text {
    ~~~
    opacity: 1;
    visibility: visible;
    transition-property: opacity visibility;
    transition-duration: .5s;
}
.text.hidden {
    opacity: 0;
    visibility: hidden;
}

$(document).on('click', '.btn', function() {
  $('.text').toggleClass('hidden');
})

【解説】CSSで表示・非表示にする方法3選【注意点】

非表示にする場合ですが、注意点があります。

それが3つの方法どれを使っても、ソースコード上では存在しているということ。つまり検索エンジンには読み込まれます。

そのため意味もないのに過剰に使いすぎると、SEO的にはあまりよろしくはないでしょう。

隠しコンテンツとみなされて、スパム扱いされる可能性もあるらしいですからね。

通常使うことに対しては問題ないですが、過剰に意味もなく使うのはやめたほうがよいかと。。

【解説】CSSで表示・非表示にする方法3選【切り替えアニメーションあり】：まとめ

ジト

レスポンシブ対応やアニメーション時に、要素を非表示にすることが案件ではあるので覚えておこう！