JavaScript + jQueryで作るナビゲーションバー

トップメニュー部分のCSSコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トップメニュー部分のHTMLコーディングの方法について解説致します。
講師:
04:27

字幕

このレッスンではJavaScript と jQuery を使ってナビゲーションバーを実装していくにあたり、トップメニュー部分にスタイルシートを当ててデザインを調整する方法について解説致します。まずはダウンロードしてきたこちらの topmenu_css のフォルダの中に入っている、これら3つのファイルをエディタで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを使って、今回のレッスンの解説を進めていきたいと思います。それでは早速、レッスンを始めていきましょう。今回、スタイルシートを当ててデザインを調整していく場所ですが、HTML コードでいうと、この ul class="slidemenu" 以外の部分となります。要するに、このナビゲーション部分とul タグと li タグと、こちらの span class="topmenu" の部分ですね。これらの部分にスタイルシートを当てていきます。スタイルシートを書いていくにあたって、まずはこのように index.html からstylesheet.cssこれが、この head タグの中で読み込みがされていることを確認して下さい。 それでは stylesheet.css を開きます。すると、ご覧の様に、今回のトップメニュー部分のスタイルシートの記述が完了しているのが分かります。今回はこれを実際に目で追いながらどのように設定しているのか、いくつかポイントをみていきたいと思います。基本的にはナビゲーションバーを作るからといって、特別なことはしていません。普段通りの CSS のコーディングで大丈夫です。その中でも、いくつかポイントとなる点を見ていきたいと思います。まずはこちらの li タグの部分。こちらの部分ですが、display: inline block を指定しています。こうすることによって、横並びのメニューのレイアウト、これを実現しているわけですね。そしてこちらに position: relative を指定しています。こうすることによって、後からでてくるスライドメニュー。そのスライドメニューの位置合わせをし易い様に予め準備しています。そして次に、この li:last-child という部分ですね。この li にはこちらの部分で記載の通りに、border-right: 1px白い線で描いてますが、最後の li 要素、要するにトップメニューの一番右側のメニューですね。 そちらの li タグからはborder を消しているという状態になっています。このようにすることで、不自然なデザインにならないようにしています。そして最後のポイントはこちらの span ですね。span class topmenu の部分。こちらは a タグではないので、この span 要素にマウスカーソルを当ててもポインターは何も変化はないですが、この部分の通りに、cursor: pointer と指定してあげることによってこの span class topmenu にマウスカーソルを当てると、カーソルがポインター、要するに指のマークですね。指のマークに変更するように指定しています。それではこの状態でindex.html をブラウザで開いて、どのようなデザインになっているかを確認しておきましょう。こちらの index.html をブラウザで開きます。すると、このように表示されてきましたね。先程のポイントで解説した通りに、メニューが横並びになっていますね。そしてマウスカーソルを合わせると、この様に指のアイコンに変化していますね。このように表示されてくれば、きちんと CSS コーディングができているということになります。 それではエディタに戻ります。以上でレッスンは終了です。今回はナビゲーションバーのトップメニュー部分に対するCSS コーディングについて解説致しました。以降のレッスンではスライドメニュー部分にスタイルシートを当てて、デザインを調整していく方法について解説していきますので、そちらも合わせてご覧ください。

JavaScript + jQueryで作るナビゲーションバー

このコースではJavaScriptとjQueryを使ってナビゲーションバーを作成します。スライドメニュー付きのナビゲーションバーの機能をJavaScriptとjQueryを利用して実装する方法について学びます。HTMLとCSSでのコーディングの仕方、クリックイベントの登録やクリック時のスライドメニューの表示の切り替え方法などを順を追って解説します。

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

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

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

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