CSS3のアニメーションテクニック

メインメニュー項目の間に仕切りの線を引く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素の上に線を加えたうえで、最初の要素だけ設定を変えます。
講師:
05:50

字幕

このレッスンではメニューの 開け閉じができるようになった このメニューに対して一つ 手を加えたいと思います それはこの閉じた時 メニュー項目の間に仕切りを入れて 三つのメインメニュー項目であることが わかるようにしたいと思います 具体的にはこのように 白い線を仕切りとして加えます メインメニューの間に まだ仕切りが入っていない HTMLドキュメントを Dreamweaver で開きました ボディ要素を確認しましょう メインメニューは li 要素で設定されています そして そのli要素には titleと ゆうclassが定められています ですからこのtitleと ゆうclassに対して CSSを設定すればいいとゆうことです class titleのセレクターが これですのでここに 線を加えるボーダーです 上に加えましょう ボーダートップトします そして白い線を加えるわけですけれども 太さはまず1ピクセル そして実線ですね 色はホワイト とゆうことで 一旦ファイルを保存して確認しましょう 確認はブラウザーでプレビュー グーグルクロームで開きます メインメニューの項目の間に 線がつきました もちろん動きも問題ありませんね からよく見てみるとちょっと気になります 拡大しましょう ショートカットはcommand + macの場合 Windowsではctrl +です ショートカットを使って ちょっと拡大させてもらいます この一番上の メインメニューの 上に線が入ってしまっていますね メインメニューの項目の上に線を入れろと 設定したわけですから 入れてるわけですが この線ちょっと邪魔です 消したいと思います ではまた Dreamweaver に戻りましょう メインメニューの li 要素 class が title ですが 項目は三つありました この三つある項目のうちの 一番最初だけ 除外したい つまり一番最初だけ のセレクターが必要になるわけです MDNのCSSリファレンスを開きました 最初の要素を選ぶには first-child 擬似クラスを使います これは細かく言いますと 自分の親から見て 最初の子要素と いうのが選ばれます 構文を少し確認してみましょう まず要素を 定めたら first-child 擬似クラス そしてその設定を行うと いうことなんですけれども 例が出ています li 要素の first-child に対して バックグラウンドの色を ライムにします そして ul 要素と li 要素が このように定められています そうすると li 要素の 親から見た 親というのはこの ul 要素ですね ul 要素から見た最初の チャイルドということになると この項目になります ですからこの項目が 下に実際の例が出ていますけれども ライム色になり 二番目は 元のままということです Dreamweaver に戻りました 線を消したい 最初のメインメニュー項目 というのはこれですね li 要素で クラスが title です その親 ul 要素から見た 最初の子供ということになります では CSS の方の設定を行いましょう title のセレクターの下に 新たにセレクターを加えます リスト要素 title ですね その親から見た first-child これに対して設定をすればいいと いうことです そして線が 元はついてるわけですから それを消したいやはり ボーダートップですね そして もともと線がついてるんですけれども 1ピクセルの線がついていますが 消したいので 消したい場合には none とします これでファイルを保存しましょう そしてブラウザーで確認します ブラウザーでプレビュー グーグルクロームです 線がつきましたね そして一番上の線 が消えています 一応念のため拡大しましょう ctrl もしくは command +で 先ほどと同じように拡大しますと 今度は線がついていません 大丈夫ですね では表示を元に戻して 念のため動きを確認しますと ちゃんと動いています このレッスンでは メインメニューの 項目の上に 白い線を引きました 線を引くには ボーダートップです 1ピクセルの白い線が引かれています ただし 一番最初の要素だけ 設定を変えたいと言う場合に 最初の要素を選ぶのは first-child という class でした そしてこの 一番最初の要素だけ ボーダートップを none にすることで 線を消したというわけです

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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