JavaScript + jQueryで作るタブ切り替えコントロール

切り替えコンテンツ部分のHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
切り替えコンテンツ部分のHTMLコーディングの方法について解説致します。
講師:
06:16

字幕

このレッスンでは これまでのレッスンに引き続き JavaScript と jQuery を使って タブ切り替えコントロールを実装するにあたり タブ部分と連動して動く 切り替えコンテンツ部分の HTML コーディングの方法について 解説いたします まずはダウンロードしてきた ファイルの中にある この content_html フォルダ こちらの中にある こちらの3つのファイルを エディタで開いてください そして これが このファイルを開いた状態です JavaScript と CSS には まだ何も書かれていない状態です そして HTML はこちらのタブ部分だけが コーディングされた状態になっています このファイルを使って 今回のレッスンを進めていきたいと思います それでは早速レッスンを始めていきましょう コンテンツ部分の HTML は こちらのタブ部分の HTML の 下に書いていきます それでは書いていきたいと思います まずコンテンツ部分の大枠の div を作ります 『div 』ですね この様に

を書きます そして その次に こちらのタブA タブB タブC こちらのタブに連動しておくコンテンツを この中に書いていきます 今回は pタグで作りたいと思います

そして

と書いて この中に そのコンテンツが何なのかを 分かりやすくする為に テキストを打っておきましょう ここでは 『ここには』 そしてこの中に 『「タブA」』と書いておきまして この後に『に対応する』  『対応した』にしておきましょう 『対応したコンテンツが入ります。』 と書いておきましょう そして今回は こちらのタブメニューが3つありますので こちらのコンテンツ部分も それに対応して3つ作る必要があります こちらの pタグをコピーして この下に2つ貼り付けておきましょう これで3つ出来上がりました そして次に こちらのそれぞれの pタグです こちらの pタグに目印となるような id をつけておきます 今回は『 id=" " 』のこの中に 『 content_A 』と書いておきます そして これを他の2つにも コピーして貼り付けていきます そして この中を『 B 』 そして この部分を『 C 』と そして こちらのテキスト部分も 『 B 』そして『 C 』という様に 判別が出来るように変更しておきましょう そして この3つの pタグを囲った この div タグ こちらにも 目印となる id をつけておきましょう ここでは『 id=" " 』の『content 』 と入れておきましょう これでコンテンツ部分の HTML コーディングは完了しました 最後に こちらのタブ部分と そしてこちらのコンテンツ部分は 1つの ui コントロールとなりますので これら2つの要素を大きく囲む div タグを作っておいてあげましょう まず こちらのタブ部分の上の所に
こちらのコンテンツ部分の後ろに
そして分かりやすいように こちらのコンテンツ部分とタブ部分を 1つインデントしておきましょう こちらの div タグにも 目印となる id を付けます 今回は『id=" "』 この中に『tabBox』と打っておきましょう これで JavaScript jQuery を使って実装する タブ切り替えコンテンツの HTLM コーディング部分は 完了いたしました 内容自体はとてもシンプルです それではこの状態で一度 この index.html を ブラウザで開いて確認してみましょう まずはこのファイルを保存します ファイルの保存のキーボードショートカットは Mac では command と S の同時押し Windows では Ctrl と S の 同時押しでしたね それではファイルを保存します そして こちらの index.html を ブラウザで確認してみましょう すると この様に表示されました この様に表示されてくれば きちんと HTML コーディングが できていることになります それではエディタに戻りましょう 以上でレッスンは終了です 今回は JavaScript と jQuery を使って タブ切り替えコントロールを 実装するに当たっての タブ部分に連動する 切り替えコンテンツ部分の HTML コーディングについて 解説いたしました 以降のレッスンでは コーディングしたこれらの HTML タグに CSS でスタイルを適応する方法について 解説いたしますので そちらも合わせて参考にしてみてください

JavaScript + jQueryで作るタブ切り替えコントロール

タブ切り替えコントロールとは、Webページ上でタブをクリックして表示しているコンテンツを切り替える機能のことです。このコースではJavaScriptとjQueryを利用して、タブ切り替えコントロールをサイトに実装する方法について解説します。このコースを見れば、JavaScriptやjQueryの基本についても同時に習得することができます。

59分 (11 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月30日

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

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

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