わくわくtech

RPAやWEB制作などのテクノロジーにワクワクするサイト☆

WEB制作

【CSS・JQuery】表示・非表示の切替え方法とアニメーション

投稿日:

表示・非表示を可能にするプロパティやメソッドはいくつかあります。

互いに何が違うのか、どのような場面で使うのか、私なりにまとめてみました。

 

以下が本記事で比較するCSSプロパティおよびjQueryメソッドのサンプルです。ボタンを押して動作を比較してみてください。

CSS
display

表示
非表示

CSS
visibility

表示
非表示

CSS
opacity

表示
非表示

jQuery
show/hide

表示
非表示

jQuery
fadeIn/Out

表示
非表示

jQuery
slideDown/Up

表示
非表示

なんとなく違いや共通点がイメージできたでしょうか。

CSSとjQueryそれぞれで比較していきます。

CSS

displayとvisibilityの違い

CSSで頻繁に比較されるプロパティです。サンプルを確認された方は何が違うのかはっきりわかったことでしょう。

非表示の際の要素の扱いが異なります。

displayは要素そのものをHTML上から取り除き、そのため下(横)の要素はその分詰められます

visibilityは見えないだけで要素は残っており詰められることはありません

レイアウトと相談し、詰めたいのか詰めたくないのか。この点で比較することになるでしょう。

対象要素の親要素でサイズ(width,height)を指定することで、disply:noneで要素を消しても詰められないようにすることは可能です。

display visibility
表示
非表示

opacity

本来opacityは透明度を指定するプロパティなのですが、最小値と最大値を用いてvisibilityプロパティと同様の表示・非表示を表現できます。

表示
(不透明度0%)
非表示
(不透明度100%)

jQueryメソッド

jQueryについて簡単に説明すると、jQueryはJavaScriptのライブラリで、短いコードでWebサイトに動きを加えることができます。

jQueryのメソッドの中で、使いやすいメソッドをピックアップしました。対となるメソッドはセットで紹介します。

show/hide

もっともシンプルな表示・非表示メソッドです。

見ていただいた通り、動作はCSSのdisplayプロパティと同じです。

hideメソッドの完了時、要素は無くなります。

displayプロパティと同様に、親要素でサイズを指定することで詰められることを避けることができます。

表示
非表示

fadeIn/Out

フェードイン/フェードアウトのアニメーションのメソッドです。

fadeOut後は要素がなくなります。

ログイン画面のようなモーダルダイアログ等で使用されます。

表示
非表示

slideDown/Up

スライドによる表示・非表示のメソッドです。

slideUp後は要素がなくなります。

上下に閉開するアコーディオンメニュー等で使用されます。

表示
非表示

補足:jQueryを使用するための準備

jQueryを使用するためにライブラリを読み込む必要があります。

HTMLの<head></head>内で読み込みます。

ファイルをダウンロードして読み込む方法もありますが、今回はWeb上のソースを読み込んでいます。

 

jQueryをJavaScriptファイル(.js)で記述し、HTMLの<body></body>内で読み込みます。

</body>の直前に記述すると良いそうです。

 

サンプルコード

冒頭のサンプルで使用したコードです。

HTML

 

CSS

 

jQuery(JavaScript)

 

 

 

 

-WEB制作
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressに埋め込んだ要素をレスポンシブにしてみた

閲覧端末毎にデザイン(見せ方)を変えることをレスポンシブデザインといいます。 過去、Wordpressの個別記事に直接HTMLを埋め込んだ記事を投稿したのですが、同記事をスマホで閲覧したときにデザイン …