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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは これまでのレッスンに引き続き JavaScript と jQuery を使って タブ切り替えコントロールを実装するにあたり タブと連動して動く コンテンツ部分の CSS コーディングについて解説します まずはダウンロードしてきたファイル こちらの content_css フォルダの中にある こちらの3つのファイルを エディタで開いて下さい そして これがそのファイルを エディタで開いた状態です このファイルを使って 今回の レッスンを進めていきたいと思います それでは 早速レッスンを 始めていきましょう 今回 CSS コーディングをしていく場所 それは HTML ファイルで言うと こちらの「コンテンツ部分」となります それでは stylesheet.css を見てみましょう こちらのタブの部分の その下の所に content という所から 既に 今回レッスンでご説明する このコンテンツ部分のスタイルシートの設定が 完了している状態となっているのがわかります このコンテンツ部分の スタイルシートの設定ですが 特に特別なことをしているわけではありません 普段通りの CSS の書き方で大丈夫です 但し 一点見ておきたいのが こちらの部分です この p#content_B そして p#content_C の部分ですが display: none; としています これは この index.html をブラウザで開いた時に デフォルトの状態で タブAが 選択されている状態にしておきたいため このように関係のない タブB と連動する content_B そして タブCと連動する content_c に関しては このように非表示にしている状態 となっています それでは この状態で一度 ブラウザで index.html を開いてみましょう こちらのファイルですね 確認するブラウザは Chrome ブラウザを利用します それでは開いてみましょう すると このような形で表示されてきます このように 先程ご説明した通り タブBに連動する こちらのコンテンツ そして タブCに連動する こちらのコンテンツが今 非表示になっていて タブAに連動するコンテンツだけが 表示されています これで このコンテンツ部分に関しては この index.html をブラウザで開いた時に 表示される初期の形 になっていることがわかります それでは エディタに戻りましょう このようにタブ切り替えコントロールを作る といっても CSS 自体は非常にシンプルな形 そして 普段通りのコーディングをしておけば 全く問題ないので 特に難しく考えることはないでしょう 以上で今回のレッスンは終了です 今回は JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたっての 切り替えコンテンツ部分の CSS コーディングについて解説しました 以降のレッスンでは 実際に タブ切り替え処理を JavaScript と jQuery を使って 解説していきますので そちらも合わせて 参考にしてみて下さい

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

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

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

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

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

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