WebデザイナーのためのjQuery実践講座

「タブ切り替え機能」部分のHTMLの作成方法

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「タブ切り替え機能」を実装する為の、HTMLのコーディング方法について、いくつかのポイントをご紹介致します。
講師:
03:18

字幕

このレッスンでは jQuery と jKit プラグインを使って― タブ切替機能を実装する為の HTML のコーディング方法について― いつくかのポイントをご紹介していきます まずは ダウンロードしてきた こちらの tabs-html ― というフォルダーの中に入っている こちらの index.html ファイルを― エディターで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう こちらの index.html ファイルの こちらの部分ですね seasonalMenu と書かれている 部分からこの様に下の部分まで この辺りまでですね この辺りまでがちょうど このタブ切替部分となっています まずは seasonalMenu という ID を付けたセクションタグで コンテンツの大枠を作って そして h2 でタイトル画像を設置しています そして 実際にタブ切替でコンテンツが 切り替わる部分というのが― こちらの div タグの中になります それでは タブ切替部分をどの様に コーディングしているか 見てみましょう こちらの div タグの中の この一つのarticle タグ こちらの部分が一つのタブと それに連動するコンテンツとなっています まず こちらの article タグの中の こちらの h3 タグ この部分がちょうどタブの部分となります そして その次にあるこの dl タグ こちらの部分が 実際のコンテンツ部分となります つまりは タブ  ここでは h3 タグですね この h3 タグの内容に連動するのが その直下の dl タグの中のコンテンツ― という形になります これが一つのタブのワンセットとなります そして 今回はこのワンセットが 合計 いち に さん 四つ― 設置している状態ですね これで四つのタブ切替のコンテンツが 出来上がる事になります それでは この状態でこの index.html ファイルを― ブラウザで開いて確認してみましょう はい これがその index.html ファイルを ブラウザで開いた状態です では 下の部分を見てみましょう こちらが先程 HTML コーディングを 行ったタブ切替の部分となっています ただ まだ jQuery や jKit プラグインを利用して― タブ切替機能を実装していないので この様にレイアウトが整っていない状態 となっています 以降のレッスンでは  実際にこの部分にタブ切替機能を― 実装していきたいと思いますので そちらも合わせて参考にしてみて下さい 以上でレッスンは終了です 今回はタブ切替機能を実装する為の HTML のコーディング方法について― いくつかのポイントを確認致しました 次からのレッスンでは jQuery と jKit プラグインを使って― 実際にタブ切替機能を 実装していく方法について― みていきたいと思いますので そちらも合わせてご覧下さい

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

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

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

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