30DAYSトライアル

【30DAYSトライアル】に挑戦 DAY3&4 HTML&CSS中級編

 

引き続きDAY3&4を進めていきました。

今回の内容は、ProgateのHTMS&CSSの中級編です。

 


 

内容は、CSSをうまく活用して、初級編で作成したWEBページを超える素敵なWEBページを作成する。という感じのものでした。初級編の復習になることに加えて、新たな知識も身についたので、皆さんもぜひ挑戦してみてください。

 

今回ハマったポイント

relativeとabsolute

positionプロパティという要素の位置を指定できるものがあるのですが、relativeとabsoluteの意味がわかっておらず、これで少しハマってしまいました。

positionには、四つの値があります。

その後に、左から(leftプロパティ)、上から(topプロパティ)どのくらいの場所にあるかを指定します。

① static (通常バージョン、何も指定しなかった場合)

② relative (現在の要素を基準に相対的な位置を決める)

③ absolute (親の要素を基準に絶対的な位置を決める)

④ fixed (画面のある位置に固定する)

の4タイプです。

①staticは、positionプロパティを何も指定しなかった場合の状態で、leftやtopなどの位置指定ができません。

②relativeは、指定した要素自身がtopやleftを指定しなければ本来あるはずの位置を基準として、要素を動かしたい時に使えます。

③absoluteは、指定した要素の親要素の位置を基準に要素を動かしたい時に使えます。

④fixedは、要素の位置を画面のある部分に固定する時に使います。ヘッダーなどを常に表示し続ける場合によく用いられています。

 

box-shadow

box-shadowでは、どういう値を指定すればいいのかを忘れていました。下に影を出したいのに横からでてきたんです。。。

box-shadowプロパティのとる値は、左から、水平方向、垂直方向、色の三つです。boxというクラスがついた要素に指定するならばこんな感じです。これで、要素の右側と下側に影がつきます。

.box { box-shadow: 10px 10px red; }

ちなみにマイナスの値を指定すると、通常の反対側に影ができます。

 

まとめ

初級編に比べると少し覚えることが多くなりますが、楽しみながら自然と覚えていけるのがProgateのすごいところだと改めて感じました。次の課題は、上級編です。