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

Mozilla Developer Network(MDN)で構文を調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイトにおけるCSSプロパティなどの調べ方として、Mozilla Developer Network(MDN)のCSSリファレンスをご紹介します。
講師:
05:09

字幕

このレッスンでは CSSのプロパティを調べたい時など サイトを使ってどのように確かめたら良いか ご説明します ご紹介するのはMDN モジラ・デベロッパー・ネットワークの CSSリファレンスです モジラというのは ブラウザーのFirefoxを 開発しているファンデーションです ですからリファレンスも非常に詳細で 一度開いたら ブックマークに登録しておくことを お勧めします。 もっとも グーグルでも- 簡単に検索することができます キーワードとしては 文字どおり CSSリファレンス でいいでしょう 二番目に CSSリファレンス MDNと出てきます あるいはMDNというのを覚えていただければ CSS「リファレンス」がついても- つかなくても結構だと思います MDN ということで MDNがトップに来て CSSリファレンスが二番目に来ます プロパティの調べ方としては ABC順のリストになっていますので 名前がわかっていれば 順番に 見ていけば 見つかります 今回このボックスシャドウと いうのを見てみたいと思うのですが もし プロパティ名がよくわからないと いう場合には 検索の窓があります ここで ボックスに影をつけたいと ボックスに 影と いうことで 検索すると 一番上には出てきませんけれども ボックスシャドウが見つかります このボックスシャドウプロパティを例にとって リファレンスの見方を簡単にご紹介します ボックスシャドウ・プロパティというのは 名前の通り 「要素」のボックスに ドロップシャドウを与えます プロパティの指定の仕方 構文 あるいはシンタックスと言いますけれども このページの下の方に出ています 「ボックスシャドウはこんな風に書くんだよ」と ちょっと長いんですけれども まず頭は 縦棒がありますと この noneかinset どちらかを最初に書きます noneというのは これは noneと書いてはいけなくて 「何も書かない」という場合です 「指定なし」 あるいは inset という指定をして その後に この場合は数値になるんですけれども 数値が 五つ指定することができます 値の説明も簡単に見ていきましょう 最初にまず none か inset と 言いましたけれども 指定がない場合 これは普通のドロップシャドウになります もし inset という値を指定した場合には これは影が内側につくんですね 「穴を開けた中に影が落ち込んだ感じ」と いうふうにいえば お分かりになるでしょうか そして 数字を指定するんですが offsetx offsety というのは 影というのは普通 光の方向によって 実際のものよりもズレます そのズレのX方向とY方向の値です で 値は length と書いてありますが えー この場合はピクセルとか あるいは ミリメートル ポイント など 指定ができます それから blur-radius というのは 「ぼけの半径」と いうふうに 日本語になりますけれども 「ぼけ幅」ですね どれくらい影がぼけるかと いうことです それから spread-radius スプレッドというのは広がりということで 影を 拡大する 大きくすると いうことで その大きくする幅も やはり 数値で length で指定します ポイントとかミリメートル それから ピクセルがやはり多いでしょうかね そして最後は color これはもう文字通り 影の色です この色で影をつけることができます もし 黒とかではなく 逆に明るい色をつければ 光っているように見せることも可能ですね 文字の説明だけでは分かりくいと いう場合も多いでしょう そのために 実例が紹介されています 例えば Yのオフセットをマイナスにすると 上に影を持っていくことができます こちらは まぁ普通 ありがちな 黒い影ですね それから カンマ区切りで 影を複数つけることもできます この場合には右下に 赤い影 それから Xがマイナスになっていますので 左の方にズレていますね えー 影をオリーブでつけることができます 単位は文字で使われる emと いうものも使うことができます このレッスンでは サイトにおけるCSSプロパティの調べ方 中でも ここでは MDN モジラ・デベロッパー・ネットワークの CSSリファレンスの使い方について ご紹介しました

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

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

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

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

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

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