2日に１回ブログを更新しようと決めたのに今回、3日になってしまった。
今日は、progateの上級編の模写をやってました！！
なかなかの具合で進んでおります(笑)
勉強したこととしては、
1、box-shadowの使い方
2、margin,paddingの使い方
3、またもや、flexについて…
1、については
box-shadowについては、
box-shadow:水平方向の影,垂直方向の影,ぼかしの距離,広がりの距離,色の指定,(insetを入れるかどうか);
水平方向では、正の値が右へ、負の値が左へ
垂直方向では、正の値が下へ、負の値が上へ
ぼかしの距離については、負の値はなく、0に近づくほどくっきりとする
広がりの距離については、正の値では影の形状を全方向へ、負の値では縮小する。
色の指定はそのまま
insetは、外側の影から内側の影へ変える
2、については
marginは、まだ確認中だが、position:fixed;を使えば、下にもぐった要素は、margin-topでずらすこと。※ただし、fixedを指定したものにグローバルナビゲーションであればtop:0;left:0;を入れること。
paddingについては、要素内を狭くするときにも使用できる。
今回、flexを用いた時、子要素の横幅がばらばらだった。ので親要素にpaddingを使って全体を小さくして無理やり？均等にした。
3、については
flexは横に均等に並べるときに、すごく便利だが、子要素にmarginを指定していたらうまくいかないことがある。と分かった。
今日は以上です。
もりけん塾https://terracetech.jp/ourvalue/morikenjuku/
もりけん先生https://terracetech.jp/
コメント