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

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jKitプラグインを利用して整形されたHTMLタグに対して、CSSのコーディングを行う方法について、いくつかのポイントをご紹介致します。
講師:
04:50

字幕

このレッスンでは jKit プラグインを 利用して成形された HTML タグに対して― CSS のコーディングを行う方法について いくつかのポイントをご紹介していきます まずはダウンロードしてきたこちらの tabs-css フォルダーの中に― 入っているこちらの index.html ファイルと― こちらの css フォルダーの中に 入っている― この style.css ファイルを エディターで開いてください そして これがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは 前回までのレッスンのおさらいです 前回までのレッスンでは タブ切り替え部分の HTML をコーディングして― そして その HTML に対して jQuery と― jKit プラグインを使って タブ切り替え機能を実装致しました 今回は最後の仕上げとして このタブ切り替え部分に― CSS を当ててスタイルを 整えていきたいと思います ただ このスタイルを制作していくに当たって 一つ注意点があります まずは こちらの index.html を 見てみましょうか これまでのレッスンでは  この様にタブ切り替え部分を― コーディングしてきましたね article の中にこの様に h3 タグ 今回はこの h3 部分がタブ部分ですね そして こちらの dl タグには こちらのタブに連動したコンテンツ― となっていました この構造を覚えておきましょう そして この index.html ファイルを ブラウザで開いてみましょう はい これが index.html ファイルを 開いた状態です では タブ切り替え部分を見てみます タブ切り替え部分はこちらの部分ですね この画面では 既に このタブ切り替え部分に対して― CSS のコーディングを完了している 状態となっています では こちらのタブ切り替え部分を このクロムブラウザの― デベロッパーツールを使って HTML の タグの構造を確認してみたいと思います クロムのデベロッパーツールはこちらの ボタンからその他ツール そして― デベロッパーツールでしたね すると この様にデベロッパーツールが― 起動してきます そして ここのエレメントをクリックすると この様にこちらのウエブサイトの― HTML のタグ構造を確認する事が出来ます 今回はこちらのタブ切り替え部分を 確認したいので こちらの ID ― seasonalMenu が 付いたセクションですね こちらの部分の中を見てみましょう すると セクションタグの中に h2 と div タグの二つがあって― 更にこちらの div タグの中に こちらの ul と そして― dl タグがあるのが分ります 先程 HTML ファイルを確認した時には こういった ul タグ等は― 無かったはずですが― 今はこの様に ul タグが 生成されていますね そして この ul タグの中のこの それぞれの li タグ― これがそれぞれのタブを表していますね そして この下にあるこの dl タグ この dl タグはこのタブに 連動したコンテンツとなっていますが― タブが四つあるのに対してこちらの dl の枠は一つしかありませんね この様に jKit プラグインを利用すると ある一定のルールでコーディングした― HTML タグを自動でその機能に適応した HTML タグの構造に成形してくれる― といった形になります 因みに その HTML コーディングの 一定のルールに関しては― jKit プラグインのウエブサイトの方に 記載があります ですので 実際にスタイルを整える為に CSS のコーディングを行う際には― 元々HTML コーディングを行った HTML タグに対して― スタイルシートを当てるのではなくて この様に jKit プラグインによって― 生成されてきた HTML タグを 確認しながらスタイルシートを― コーディングしていく― といった手法を 取る事になります その様にしてスタイルシートを実装したのが こちらのレイアウトという形になります この様にクリックしていく事で タブの切り替えが動いていますね この CSS のコーディングの際には 先程利用したブラウザの― デベロッパーツールを使うと 大変便利ですので― 積極的に利用していくようにしましょう 以上でレッスンは終了です 今回は jKit プラグインを利用して 成形された HTML タグに対して― CSS のコーディングを行う方法 についてのポイントをご紹介致しました 以降のレッスンからは jQuery と プラグインを使って― ライトボックス機能を実装する方法について 解説していきますので― そちらも合わせてご覧下さい

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

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

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

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

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

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