fjordbootcamp 「CSS tutorial」終了‼️

fjordbootcampの「CSS tutorial」を無事に終了することができました😃

このプラクティスはHTMLは変えず、CSSのみで、見本のWebサイトの見た目に合わせていくというもので、私は、なんだかんだで、26時間くらいかかってしまいました💦

この度なんとか終了することができたので、このプラクティスについて学んだことを記録がてら書いていきたいと思います。

学んだこと　

flex box の使い方について

　「flex box」とは、親要素を指定すると、その子要素が綺麗に並ぶ（デフォルトでは横並び）になるプロパティのこと。

もともとfloatしか知らなかった私はこれを理解するのに時間がかかってしまいました💦

flexを使うと、子要素が並ぶだけではなく、高さや幅なども自動で調整してくれます。そして、なんとレスポンシブデザインに対応までしてくれるという優れもの‼️

擬似要素を使うと、複数のボックスに交互に色を配置したり、模様を作ることができる。

　擬似要素::before ::after、プロパティcontent"" border そして、width heightを指定することで、空白のコンテンツが生まれ、そこにborderだけが存在する形になります。そしたら、position:relative position:absoluteを使用して、コンテンツの位置を調整することで、四角を基調とした模様を作成することができます。アイディア次第で、自由な模様を作れます😍

　また、nth-child(odd) `nth-child(even)'を使用することで、偶数個、奇数個の要素のみを指定しての配色が可能になります。

画像を丸くトリミングするなら、border-radius:50%!!

　これで、画像や図形を丸くトリミングすることが可能です！！

要素のスクロールを作るには、overflow:scroll

　overflowは要素からはみ出た部分をどう扱うのかを決めるプロパティです。それをscrollに設定すると、スクロールバーが表示され、要素からはみ出た部分をスクロールして見ることができるようになります。

見本のコードを見てみて思ったこと

• line-heightが全く使えていない！！

　line-heightは行の高さを調整するプロパティです。これを、要素の高さに指定することで、行の中央に文字列や記号を配置することができます。私は、padding や positionなどで文字列や記号などの位置を設定していましたが、line-heightを使った方が、書くコードの数も少なくなると勉強になりました。

• flexを多用している

　私は、なんでも「とりあえず、flexにしておくか」という癖があるみたいで、もとから縦に要素が配置されている場合でもflex-direciton:columnを多用してしまっていました。このように無駄なコードは書かないということが大切ですね。

終了してみての感想

　私は、一応progateのHTML・CSS中級までは２週したのですが、いざ今回の見本を前にすると何から初めて良いか分からず、2時間ほどぼーっとしておりました。

　そこで、まずは全体のレイアウトから初めていくことを教わり、なんとかflexを用いて取り組んでいきました。CSSなどのデザインに取り組むときの基本は全体のレイアウト→細部の調整だということが実感できました。この手順を念頭に入れて、今後も学習を続けていきます^ ^

　次はもっと洗練されたCSSコードが書けるようになりたいです‼️