勉強の続き：パララックス効果を追加する

今日はフォームのcssを書きました。今日はパララックス効果を覚えた！

パララックス効果というのは、この本によりますと、「視差」という意味だそうです。

層になっている要素をスクロールする際に異なるスピードで動かすことにより、奥行き感を演出することができる表現方法です。
-これだけで基本がしっかり身に付くHTML/CSS＆Webデザイン1冊目の本 p.184

とのことです。

具体的にいうと、背景画像を固定して、前側にあるコンテンツ（dateセクションとformセクションの間に隙間が空いている）を動かすことで、隙間から固定されている背景画像が見える、というやつです。

手順としては、

(1)まずdateセクションの下に余白をつける（margin-bottom）
(2)dateセクションの擬似要素を作る
(3)画面いっぱいに画像を固定配置する
(4)背景画像を指定する（background）
(5)擬似要素を背面に移動させる

となっています。正直これ、タグ打ってる時はわけわからんかった…。復習って大事ですね…。

でもこの「擬似要素」という概念がちょっとよくわからんな。調べてみます。

こんなページがありました。ありがたい！

よくよく読んでみたのですが、えっとつまり、

擬似要素を使えば、HTMLに手を加えずにcssで装飾ができる、ということのようです。

あ、そうか。今回の場合、普通だったら背景画像はhtmlで指定するものだけど、htmlで背景画像を追加するという手続きをせずに、cssだけで背景画像を指定できていますね。なるほど！

この本に、

content： ””；　背景画像はbackgroundで指定するのでcontentはカラにする（p.185）

と書いてあったんです。何でカラにするのにわざわざ書くんだろう？と思っていたのですが、

::beforeも::afterも、contentを入れないといけないもののようです。あ、「コンテンツを追加する」ための命令文だからか…。なるほど…。

そして今思い出しましたが、::hover　はFammで習ったやつだ！あれも擬似要素だったのかー！

理解しました。スッキリ！

明日はいよいよレスポンシブ！！