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

丸くてへこんだように見えるボタン

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
角丸の設定と影を工夫して加えると、要素を丸くへこんだボタンのように見せられます。
講師:
08:30

字幕

このレッスンでは フォトギャラリーのベースとなるレイアウトに 少し飾り付けをします 1つはこの白い写真が置かれる gallery の領域なんですけども その右下に薄っすらと影を落としています それから下に並んでいるボタンは これはリストで作っているんですが その1つ1つのボタンの形を丸くして 少し凹んだ様な見栄えにします ではこの飾りつけをする前の HTML ドキュメントを DreamWeaver で開きましょう これが飾り付け前の HTML ドキュメントです body 要素の方を確認します 先程言いました通り要素 idgallery が 全体をくくっています この gallery が 画像が置かれるべき領域という事になります そしてその中に要素で ボタンが置いてあるんですが 上の CSS でボタンの位置を マイナスにしています ここですねこの -60 というのが そうなんですけども 要素の位置を gallery の下端から -60px* としています ですから gallery の中には あるんですけども その外に配置されたという事になります ではまずこの gallery の CSS を見て そこに影を作る事にしましょう CSS を確認します idgallery の セレクターがこれです その周りに影を落とすという事なので ここに box-shadow の プロパティを定めて x, y方向のずれは 0px にします ただ 5px ぼかしますので gallery の周囲に 薄っすらと影が出て来るという事になります 薄っすらという事なので rgba で 影はカラーは rgba は黒ですが アルファを 0.2 とします ですからかなり薄い感じの影になりますね では確認してみましょう ファイルを "保存" して ブラウザーでプレビュー します Google Chrome で 見てみましょう 薄っすらと影が付いているのが 言われれば分かるという事かもしれませんが 今回はここはこのままにしておきます 次はボタンですね HTML ドキュメント DreamWeaver に移ります ボタンはまず丸くします ボタンは gallery の中にある リストの中の要素ですね 大きさと形それから影が 定められていますけども 背景が定められていますけども ここに影を後で付け加えます その前にまず丸くするという事で border-radius です ボーダーの角の丸なんですけども 角の丸の大きさをとても大きくします 具体的には 50% にすれば 丸くなるという事です 確認してみましょう ファイル メニューで 保存 をしたら ブラウザーで確認します ブラウザーでプレビュー Google Chrome で 見てみましょう ボタンが丸くなってますね ちょっと拡大しましょうか もう1回くらい 丸くなっているのが確認出来るかと思います では表示は元に戻して 今度は凹んでいる様な表現です DreamWeaver に戻ります ボタンを凹んでいる様に見せるには 影を使います 影を設定するのは同じセレクターで ここに影を加えます まず普通の影を加えてみましょう 普通の影は box-shadow ですね そしてちょっとだけ付け加えます ですからずれは 0px の垂直方向に 1px だけずらします そしてぼけ幅も 1px そしてカラーは rgba で 影ですから rgb は 0 で アルファは 0.6 としましょう まずこれで確認してみます ファイルを 保存 したら ブラウザーでプレビュー です 下に影が付きましたね このボタンもまたちょっと拡大してみましょう 表示 メニューの 拡大 拡大 はショートカットがあるので ショートカットを使います Macの場合 command + Windows であれば ctrl + です もう1回 command + もしくは ctrl + もうちょっと拡大しましょうか あと2回くらいそしてスクロールしてみます 右下に影が付いていますね これは普通の影です 凹んでいるどころか 出っぱっている様に見えてしまいます この設定をちょっとだけ変えます では表示を元に戻しまして DreamWeaver で もう1度設定を変えます 今は普通の影を付けたんですが この box-shadow の先頭に 1個キーワードを付け加えます inset これだけです もう一度確認します ファイル メニューで 保存 をしてから ブラウザーでプレビュー します ちょっとショートカットで拡大してみましょう スクロールしてみると 上が凹んでいる様に見えますね inset というのはこの表現で 影が内側に付きます 影が内側に付くと その穴の中に影が落ちている様に見えると そういう仕組みで影が凹んでいる様に見えます 今度は反対側の下の方ですね こちらを明るくすると より凹んでいる感じが増します では表示を元に戻しましょう そして DreamWeaver に戻ります ボタンに白い影を追加します 影を複数付け加えるには カンマ区切りで設定をまた加えれば結構です 今度は下に影を普通に落としますので inset は付けません そして数字に指定は上と同じにします x 方向には 0 y 方向には 1px ぼけも 1px そして不透明にして構わないので white とします これで1度保存して ブラウザーでプレビュー します Google Chrome です また拡大しましょう これが最大のようですね 500% になりましたけども 下スクロールしてみるとどうでしょうか 上の内側に黒い影が付いて 下の外側に普通の影が ただし白く付く こうすると凹んでいる様に見える ちょっとしたテクニックです このレッスンのポイントは 丸く凹んで見えるボタンを作る事でした まず丸くするには角丸である border-radius の大きさを 50% にする そうすると丸くなるという事です それから凹んだ様に見せるためには box-shadow を 工夫して使います まず上の内側に影を付けるという事で inset というキーワードを 頭に付けて 黒い影を設定しました すると内側に黒い影が付きます それから今度は下の外側に 普通に影を付けるんですが white にする事によって ライトが当たっている様に つまり凹んでいる所から せり上がって来た様に見えるという事ですね こうする事で凹んだ丸いボタンが出来ました

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

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

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

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

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

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