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

「ヘッダー&ナビゲーション」部分のHTML/CSSの作成方法

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「マウスオーバー効果」を実装する為の、HTML/CSSのコーディング方法について、いくつかのポイントをご紹介致します。
講師:
04:03

字幕

このレッスンでは マウスオーバー効果を 実装するための HTML CSS のコーディング方法について いくつかのポイントをご紹介していきます まずは ダウンロードしてきたこちらの mouseover-html という フォルダーの中に入っている こちらの index.html ファイルと そして こちらの CSS フォルダーの中に入っている この style.css ファイルを エディッターで開いてください そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル そして 右側には style.css ファイルを 表示させている状態です これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回のマウスオーバー効果を 実装するに当たって この HTML コーディングと CSS コーディングに関しては とくに特別なことを意識する必要はありません 普段通りのコーディングの方法で大丈夫です それでは まず こちらの index.html ファイルの方を 確認してみたいと思います まず こちらのヘッダータグの 部分に ウェブサイトのロゴ 及び メニューの部分の コーディングを行っています ヘッダータグの中に div タグを 更にに置いて 更にその中に h1 でロゴ画像 そして こちらのナビゲーションタグで メニューを作成しています そして そのナビゲーションタグの中には ul タグ そして li タグで それぞれのメニューを囲ってあげています そして それぞれのメニューに対しては a タグを付けて リンクの形にしています これで HTML コーディングの 方は完了です それでは 次に style.css の方を見てみましょう それがこちらの部分ですね こちらのナビゲーションタグの中が 実際のメニュー部分となりますが その部分に対してのスタイルを 定義しているのがこちらの部分ですね こちらの CSS の部分に対しても とくに特別なことは行っていません 強いて挙げるとするならば  こちらの部分でしょうか こちらの部分では 各メニューの 文字列の前後に境界線を描く CSS を作成しています このメニューの境界線ですが 以前はよくこちらの文字列の部分に 同じようにこの境界線を文字列の中に入れて 実装するケースがありましたが 今は こういった形で CSS で before や after といった機能が使えるようになっています この before や after を 利用すると 例えば この li の before に このコンテンツ そして この境界線の棒を書いてあげることによって この li タグの前にこちらの境界線を 設置することができて さらに その逆で このように after と書いてあげることによって この li 要素の最後にこのように 棒線を描画することができます この部分の機能は 直接マウスオーバー効果に 関係していませんが ちょっとした CSS の テクニックとなっていますので 是非とも合わせて覚えておきましょう それでは この状態で この index.html ファイルを ブラウザで開いて確認してみたいと思います はい これがその index.html ファイルをブラウザで開いた状態です 先ほど HTML と CSS の コーディングを確認したところは こちらの部分ですね そして メニューの部分は こちらの部分となります 現状は jQueryを使って マウスオーバー効果を付けていないので このようにマウスを上にもっていっても 何も変化は起きませんね 以降のレッスンでは この部分に対して jQuery を使って 実際にマウスオーバー効果を 実装する方法について 解説していきたいと思います 以上でレッスンは終了です 今回は マウスオーバー効果を実装する為の HTML CSS のコーディング 方法について いくつかのポイントを ご紹介いたしました

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

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

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

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

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

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