CSS2

1. 【一日でできる】初心者
のホームページ制作
～CSS（応用）編～

2. マロン先生
よーし！
今回は、様々な装飾を行ってもらう。
前回のファイルを開くのだ。
ブラック君
応用編か。。
頑張ってついて行って、カッコいい
ホームページを作るぞ！

3. マロン先生
下準備として、なんでもいいから好きな画像
をダウンロードしておいてくれ。
同じフォルダに保存することを忘れるなよ。
ブラック君
好きな画像か。。。
著作権に気を付けてフリー素材を見つけよ。
この画像に決めた。

4. マロン先生
下準備はこんなもんだ。
ではその画像を背景画像に設定するのだ。
ブラック君
えっ！？そうだったんですか？？
でも装飾ってなんだか難しそう。。
できるかな・・・・

5. マロン先生
下準備はこんなもんだ。
ではその画像を背景画像に設定するのだ。
body｛
background-image:url(“画像の名前”);
｝

6. マロン先生
Bodyというのは基本的に画面全体を示す。
以下のコードが、背景画像の設定なのだ。
body｛
background-image:url(“画像の名前”);
｝

7. マロン先生
Bodyというのは基本的に画面全体を示す。
以下のコードが、背景画像の設定なのだ。
body｛
background-image:url(“画像の名前”);
｝

8. マロン先生
次は、アニメーションについてなのだ。
今回はマウスをかざすと、色が変わる
アニメーションをやるのだ。
ブラック君
背景画像はあれで終わりか。
いよいよアニメーションだ、楽しみだな。
でも、難しそう。

9. マロン先生
H1タグにそのアニメーションを付けるのだ。
以下のコードで、完了なのだ
h1:hover｛
color:blue;
｝

10. マロン先生
実行して、h1の部分にマウスをかざすと
以下のようになっただろう。

11. マロン先生
タグの後ろに:hoverと付けると、マウスを
かざした時のアニメーションができるのだ。

12. マロン先生
次は、マウスをかざすと、透明になる
アニメーションをやるのだ。
これはよくつかわれるので覚えておくのだ。
ブラック君
あれがあると、マウスをかざしてるって感じ
がしますよね。
よーし、やるぞ。

13. マロン先生
早速以下のコードを書いてくれ。
0.5は透過度を示しているのだ。
Img:hover｛
opacity: 0.5;
｝

14. マロン先生
実行してかざすと、以下のようになる。
薄くなったのがわかるだろ。

15. マロン先生
早速以下のコードを書いてくれ。
これで、0.5秒かけてアニメーションするのだ。
img:hover{
opacity: 0.5;
}
img{
-webkit-transition: 0.5s ease-in-out;
}

16. マロン先生
以上で今回の授業は終わりなのだ。
アニメーションはやっていくうちに複雑に
なるから、基礎は重要なのだ。
ブラック君
意外とあっさり終わりましたね。
でもアニメーションが簡単で良かったです。
ありがとうございました。