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

アコーディオンパネルを作ってみようタブパネルを作ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ラベルをクリックすることで、スライドしながら現れるパネルを作成してみましょう。
講師:
05:16

字幕

このレッスンでは jQuery によるアコーディオンパネルの作り方を学びます。それではアコーディオンパネルがどのようなものかを見てみましょう。まず final のファイルをブラウザで開きます。そして、この見出しの部分をクリックしてみましょう。クリックすると、この様に内容部分がスライドで隠れたり現れたりするようになっています。それでは begin のファイルをブラウザとSublime text で開いて編集をしていきましょう。まず begin のファイルを見てみるとこの様に内容が 1・2・3 とすべて出た状態になっています。そして、このデザインがどのように成り立っているかはHTML を見てみましょう。class="accordion" とついたdl がありその中に dt が見出しdd がパネルの内容ということで dt と dd が一対で繰り返しています。それでは jQuery を書いていきたいと思いますがまず79行目にある(document).ready(functionというものを見てみます。この命令はドキュメントのつまり HTML の内容が読み込まれたら一回だけ実行するという意味です。 省略も可能なのですが実行タイミングなどを計る上でよく目にするものなので是非覚えておいて下さい。それでは1つ目のパネル以外は隠しておくという jQuery を書きたいと思います。まず $ ( ' ' そしてこれはパネルの内容部分をセレクトしたいので.accordion そして ddこのままだと3つとも内容が選択されてしまいますので: not そして ( で: first そして ) を閉じます。これで dd の中の最初以外のパネルを選択することができます。そして、ここに hide というメソッドを使って隠してみることにします。では上書き保存をしてブラウザにフォーカスそして更新を行います。そうしますと、この様に1つ目の内容は見えていますが2つ目と3つ目は隠れてくれました。それでは見出し部分にイベントを設定していきたいと思います。$ ( ' ' で .accordion の中の、見出しは dt になります。これをクリックしたらというイベントはこの様に click と書いて ( )そして ( ) の内側にはfunction が入ります。そして function に( ) を付けてこの位置で { } を打ってそして改行します。 そしてここにどのような命令を入れてあげればいいかというとコメントで先に書いておきましょう。「隣の dd 要素をスライドさせる」という命令をこのエリアに書きたいと思います。それでは $( )そして this と書きます。this は、これを指しますがつまりこのクリックされたものこれが this にあたります。そして .next( )これは、この要素の隣にあるものということで dt の隣にはdd がいます。そして、この next によって取得したものをslideToggleT は大文字です。そして ) を閉じておきます。そして行末にはそれぞれセミコロンを入れておいて上書き保存をしましてブラウザを更新そして見出しをクリックすると、この様に、伸縮するようなアコーディオンパネルが完成しました。このレッスンではアコーディオンを作って柔軟なセレクタを学びました。

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

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

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

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

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

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