はじめてのCSS3アニメーション

ボタンのロールオーバーとクリックの表示を変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボタンとして用いる要素にロールオーバーしたり、クリックしたときに表示を変えます。また、要素ボックスの角を丸めます。
講師:
06:43

字幕

このレッスンでは 今グーグルクロームで開いているような ボタンを作りたいと思います このボタンは いわば最低限の動きがついています マウスポインターを合わせると ロールオーバーと言いますけれども 色が明るくなります さらにクリックすると暗い色に変わる それからちょっとした課題ですけれども ボタンの周りが少し角丸になってると こういったパーツを CSS を使って作りたいと思います まだボタンの動作を付け加える前の HTML ドキュメントのコードがこちらです このコースではHTLMドキュメントの編集に Adobe Dreamweaver CC を使います もっぱらこのコードを編集を行いますので 他のパネルは邪魔です ですのでウィンドウメニューから パネルの非表示ということで コードをよく見えるようにしたいと思います ボディ要素の中には div 要素が入っていて それからボタンの本体なんですけれでも p 要素です クラス属性には btn とついてあって ボタンに表示するテキスト Push Buttonが a 要素の中に入っています この段階ではまだ ボタンとしての動作は付いていません どんな状況なのか確認してみたいと思います ファイルメニューからブラウザプレビューで グーグルクロームを選びます プッシュボタンという白い文字があり それを四角い緑の領域が囲んでいます けれども動作は付いていませんから ポインターを重ねても もちろんクリックしても何も変わりません ここにボタンの要素に CSS で ボタンの動きを付け加えたいと思います それからこの角のところですね 角が丸くなっていません とんがっています これもこの後変えていくことになります ドリームウィーバーに戻って CSS の内容をまず確認していきましょう スタイルシートを確かめましょう スタイル要素の中身です まずはボディのフォントの指定 それから .btn これはボタン本体 p 要素に定めたクラスでした ですからこれがボタンの 見栄えを決めることになります ボックスの表示の仕方 幅 それから margin padding などが 見え方 座標が決まっていくわけですね そして文字色が white 白 テキストをセンターにおいて 普通 a 要素には アンダーラインがついてしまいますけれども それがないようにということで デコレーションを消しています それから背景 ボックスの中の 背景色は明るいグリーンでした マウスポインターを重ねるときの ボタンの背景色を変えたいと思います ポインタを重ねた時というのは やはりクラスは btn の a 要素に 擬似クラス hover ですね そしてこの中に指定をしていくことになります カラーを変えたいので background color で色は明るい色にします ではこれでどう変わったか 確認してみたいと思います ファイルメニューから ブラウザ プレビューでグーグルクロームです 保存をしておきましょう 初めの状態は先ほどと変わっていません けれどもマウスポインタを重ねると 明るい色に背景色は変わりました まだクリックしても何も起こりません ではこちらも変えていきますので また Dreamweaver に戻ります ボタンをクリックした場合のセレクタを 加えていきます やはりクラスは btn ですね そして a 要素の クリックした時はアクティブです ここにやはり background color ですね カラーを少し暗い色です darkcyan にしましょう ついでに文字の色も ちょっと変えてみたいと思います 文字のカラーを少し暗めの色です さてこれでまた改めて確認をします グーグルクロームにいきますので ファイルメニューからブラウザでプレビューで グーグルクロームです 保存をしましょう まずマウスポインタを重ねると 先ほどと同じように 明るいグリーンに色は変わります そしてクリックすると 背景が暗めのグリーン darkcyan ですねに変わったうえ 文字も少し暗くなっていますね では仕上げはこの 角を丸くするとゆうところです また Dreamweaver に戻ります ボタンのブロックの角の形は この Button クラスの a 要素のところに定めます CSS は border-radius です ここにそうですね 5ピクセルにしましょう 一旦保存します そしてブラウザでプレビューしましょう グーグルクロームです ボタンの角が丸くなりましたね そしてマウスポインタを重ねると 明るいグリーンに クリックすると背景が暗いグリーン そして文字が少し暗くなります そして角を丸くするということです このレッスンで学んだことを もう一度おさらいします マウスポインタを重ねた時の hover 擬似クラス そこに設定をすると背景色が変えられました そして押した時は active 擬似クラスでしたね そしてやはりカラーを変えました バックグラウンドと文字ですね それから角を丸くするというのは border-radius と いうプロパティを使いました。

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

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

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

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

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