WebデザイナーのためのJavaScript & jQuery入門

メソッドを知ろう CSS編

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サンプルページを使って、動的にCSSをコントロールしてみましょう。また、簡単なアニメーションを試してみましょう。
講師:
08:12

字幕

このレッスンでは jQuery の動きのあるメソッドを学んでみましょう。jQuery はアニメーションも作ることが可能です。それでは final のファイルをブラウザで見てみましょう。開くと、このようにボックスがアニメーションをして文字なども大きくなって最後は消える、というアニメーションが実行されました。では begin のファイルをブラウザで開きそして Sublime Text で編集をしていきます。ファイルをこのように並べたらまずこのボックスが黄色い箱でこのような横幅であるということを確認しました。そして HTML の方の下の方にコメント「メソッドを試そう」という部分がありますのでそこに追記をしていきましょう。まず 「box1 を隠しておく」というメソッドを試してみます。こちらに $( )そしてセレクタは必ずクォーテーションで囲みます。そして .box1 という風にHTML 上で class="box1" と書かれているのでこちらにも box1 を使うことにします。そしてこちらに .hide そして ( )そしてパラメータは空で行末にセミコロンです。そして上書き保存をしてブラウザで更新。 そうしますと、 box は hide 隠れます。そして今度は隠した box をフェードインさせてみましょう。fadein のコメントの後ろに$( ) そしてクォーテーション.box1 とセレクタを記述したらメソッド .fadeInIn の I は大文字であることに注意をして( ) でパラメータを記述しますが一旦パラメータは空で行末にセミコロンそして上書き保存をします。そしてブラウザを更新します。そうしますと更新した時にフェードインしました。もう一度更新してみましょう。フェードインしたのが分かります。では fadeIn の値に2000 と入れてみました。そして上書き保存そしてブラウザにフォーカスして更新してみましょう。先程よりも更新した時にゆっくりフェードインしたことが分かります。これはメソッドのパラメータに2000 ミリセカンドつまり、2秒という命令を与えたことで2秒かけてフェードインということが実現できました。それではこの行をコピーします。コピーしたら slideDown というところでペーストをします。そしてメソッドを fadeIn からsilideDown。こちらも D が大文字であることに注意してください。 そして保存をします。が、この時に fadeIn とslideDown が同じ hide を打ち消してしまうのでfadeIn をコメントにしておきます。そして上書き保存そしてブラウザで更新をします。そうすると今回は更新した時に縦に伸びるように スライドダウンという動きをしています。それでは今まで書いた行もコメントにしたいのでこのようにコメントに変えておきましょう。そうしましたら この animate のメソッドを最後に試してみたいと思います。まず $( )そしてクォーテーションそして .box1そしてメソッドはアニメート.animate と書きます。そして ( ) の内側に{ } を記入します。そして Enter を押してここにアニメートさせたいものを書きます。今回は width が 100そしてカンマを忘れないでください。カンマを打ったら heightそして 100と打ちました。そして上書き保存をしてブラウザをフォーカスそして更新をしてみましょう。更新をするとこのように幅 100 、高さ 100 に縮まるアニメーションが加わりました。そして animate は引数としてスピードを持つことができますのでこの } と ) の内側にカンマを入れて2000 と入れて保存をしてブラウザで更新をすると2秒かけて縮むというようなアニメーションになりました。 そしてここからメソッドチェーンというものをやってみます。こちらは一度ドット ( ) でメソッドが終わるのですがその後ろにもう一度ドットとしてメソッドを繋げることが可能です。今回は animate をさらに繋げていきたいと思います。( ) の内側にもう一度{ } を打って今度は width を 510 としてカンマ そして paddingBottomB は大文字にします。CSS ではpadding-bottom でしたがjQuery 上で書くときはこのようにB を大文字で間隔を空けません。そしてコロン 300としました。そしてこの } と ) の内側にスピードをカンマで入力します。500そして更に繋げましょう。.animate ( )そして { }その内側にアニメートさせたいプロパティを書きますが今度は文字サイズとしてfontSizeS が大文字に変わります。コロン そして文字列を値として持たせたい時はクォーテーションで 80px と書くことも可能です。そしてこちらもアニメーションのスピードをカンマで 30003秒と指定して最後の仕上げに.slideUpというメソッドを書いて空の ( ) をつけてセミコロンで閉じてみましょう。 これで3つの animate とslideUp をチェーンで繋げています。上書き保存をしてブラウザを更新しましょう。1つ目のアニメート2つ目のアニメート3つ目は文字が大きくなるアニメートで最後はスライドアップで閉じるという風にアニメーションを作成することができました。このようにメソッドチェーンを覚えると楽しいアニメーションも作ることが可能になります。このレッスンでは jQuery の動きのあるメソッドについて学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。