非表示から表示へ変わるとき、急にではなくアニメーションさせたい。display:noneでアニメーションする方法を解説します。前提:display:noneはアニメーションできない最初に言っておくとdisplay:noneからdisplay:blockにはアニメーションできません。アニメーションは「0%から100%へ」というように数字の変化ならできますが、それ以外は基本的にアニメーションできないのです。同様に「0からauto」という動きもできません。「非表示から表示」へのアニメーションなら可能です。(もちろんその逆も可能です。)下記から「非表示から表示」へのアニメーションの方法を解説します。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むフェードイン・フェードアウトするとき非表示には「display:none」ではなく「opacity:0」を使いましょう。opacityは要素を透明にするCSSです。0~1の数値を使うことができ、0なら透明、1なら不透明です。よってopacityを0から1へアニメーションさせます。以下の枠内にマウスを乗せると画像がフェードインします。alt=""></div>上下へ表示させるとき上記のフェードインでは最初からスペースがあります。今度は最初はスペースがなく、ボタンを押したら、上下に伸びながら表示されるというものです。heightを使って0から100%にしたいところですが、height:100%は親要素のheightがauto以外のときしか使えません。使えたとしても、その中身がぐじゃっとなります。ここではjavascript(jQuery)を使います。いっても難しいコードではありません。jQueryについては下記で解説しています。【jQuery】クリックしたら特定の要素にclass付与する方法こっちの要素をクリックしたときにあっちの要素を変化させたい!あっち要素にclassさえつけばCSSで調整できるのに!という要望を実現できます。クリックしたら特定の要素にclassをつける方法を紹介します。この記事を読む下記のボタンをクリックするとその下の画像が表示・非表示されます。alt=""></div>jQueryを使い、.divbuttonがクリックされたとき、.heightがslideToggleされるようにしています。slideToggleを指定すると要素を縦にスライドすることができます。表示の時は非表示に、非表示の時は表示に、アニメーション付きで動作します。高さだけではなく、paddingなども縮小され、崩れることもありません。.heightには最初は表示されないようにdisplay:noneを指定しています。slideToggleが動作するとdisplayを元の状態にしながらアニメーションまでしてくれるわけです。この動作についてはムリにCSSでやるよりjQueryを使った方がカンタンでキレイです。左右へ表示させるとき横からニョキっとでてくる方法です。スマートフォンのメニューでよく使われます。下記の枠にマウスを乗せると横から表示されます。alt=""></div>方法はいくつかあるでしょうが、簡単なのはmargin-leftで自身を欄外に押し出すことです。hiddenを指定し見えなくします。上記は簡単にするためマウスオーバー時に動いていますが、jQeryを使ってボタンを押されたとき動作する、としてもいいでしょう。display:noneでアニメーションする方法まず、display:noneをアニメーションすることはできません。非表示から表示へのアニメーションをするなら他の手段をとりましょう。フェードイン・フェードアウトするときopacityを0から1へアニメーションさせます。上下へ表示させるときjQueryのslideToggleを使います。hiddenで隠し、margin-leftで欄外へ押し出します。display:noneでアニメーションする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。