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

タブ部分のCSSコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タブ部分のCSSコーディングの方法について解説します。
講師:
05:37

字幕

このレッスンでは これまでのレッスンに引き続き JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたり タブ部分の CSS コーディングについて 解説します まずダウンロードしてきたこの tab_css フォルダの中にある― この3つのファイルを エディターで開いて下さい これがそのファイルを開いた状態です 今回はこれらのファイルを使って 解説して行きます 早速レッスンを始めていきましょう 今回はこの HTML で コーディングしてある― タブ部分の CSS コーディングについて 見ていきたいと思います CSS ファイルはこちらの stylesheet.css ですね このように見ていただければ分かるように 既に今回のタブ部分のスタイルシートの コーディングは完了している状態です 今回のこの CSS のコーディング タブ切り替えコントロールを実装すると 言っても現状 特に特別な事はしていません 普段どおりにこのスタイルシートを使って タブ部分のデザインを構築している状態です では このスタイルシートの中から いくつかポイントだけを 説明したいと思います その前に一度今の状態のファイルを ブラウザで開いて どのようなデザインになっているか 確認しておきましょうか では 先程のダウンロードしてきた ファイルのこちらの index.html を ブラウザで開いてみましょう 確認するブラウザは Chrome ブラウザを利用します ファイルを開くとこのような形で表示されます このようにタブ部分のスタイルシートで デザインが実装された状態になっています これを踏まえた上で 再度エディターに戻ってみましょう 先程のタブ部分のデザインを このスタイルシートで実装するにあたり ポイントとなる点がいくつかあります では順番に見て行きましょう タブ部分が先程横並びになっていましたね この部分の実装方法を見てみたいと思います それはこの18行目から25行目の 間で定義されています 見て頂きたいのはこちらの部分です display: inline-block このように書いています こうすることによって横並びの block 要素を作ることができる訳ですね 勿論この部分は display: inline-block を使わなくても 例えば float: left といった形でも 実装は可能です そして次にこちらの部分 こちらの部分はそれぞれタブの メニューが横並びになっている li li 要素の中の a タグ 要するにクリッカブルになっている所 この部分を定義しています この部分ではこちらの background こちらの記述の中で CSS3 の グラデーション機能を使って 白から灰色へグラデーションが かかるように設定しています そしてこちらの border こちらはそのタブ部分の上下左右に 1 px の灰色の線を引いている状態です 最後にこの部分 この部分ではタブメニューの2番目の要素 こちらの左右の border を消している 状態となっています 先程こちらの上の部分で タブメニューのそれぞれ上下左右に border を 1px 引いていましたが それぞれを3つ並べると 真ん中の2番目の要素の左右は border が 2px となって 表示されてしまうため それを防ぐために2番目の要素の 左右の border だけ消して 1px に維持しているという 状態になっています 今説明したこれらのスタイルシートの 書き方ですが 勿論作りたいタブ切り替えコントロールに よってデザインはそれぞれ異なりますので これらのスタイルシートの書き方が 直接その実装プログラムに 影響してくるわけではないですが 効率良くスタイルシートを書いていくための 1つのテクニックとして 覚えておいても良いでしょう 最後に これらスタイルシートが 書かれているこの stylesheet.css このファイルがきちんとこちらの index.html の中の head タグの中で 読み込まれていることを確認しておいて下さい 以上でレッスンは終了です 今回は JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたっての― タブ部分の CSS コーディングについて 解説しました 以降のレッスンではタブ部分に連動して 表示される切り替えコンテンツ部分の― CSS コーディングについても 解説いたしますので そちらも合わせて参考にして下さい

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

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

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

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

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

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