Webページ大枠の作成
Webページ作成7日目、大枠が出来上がりました。
色々な人のポートフォリオを見てデザインの調査をすることで、視認性をどう確保するかやファーストビューで何を伝えるかなど考えるきっかけになった。完成品ではファーストビューは自分を知ってもらうためにも顔写真がいいのかな。
また、基本的なコーディング手法(Webフォント適用方法、Twitterアイコンの設置方法)の勉強になった。Flexboxの使い方の復習にもなった。
クラス名はBEMで書いてるけど、名前の付け方がまだちょっとあやふやなところがあり。都度リファクタリングしつつ見直していこうと思います。
まだヘッダー、画像、フッターしかないけど、ここから色々と肉付けしていきたいと思います。 本当はカッコいいアニメーションとか入れたいけど、 まずは見やすさ、分かり易さを追求していきたいです。
備忘録
- Flexboxは親側につける。
- box-sizingについて、デフォルトではcontent-boxになってる。これだとpaddingつけたときにはみ出たりする。border-boxにすれば内側にpaddingが付くのではみ出る心配がない。
- ulやliを用いて横並びにしてlist-style: none;で黒ぶちを消したときは、黒ぶち分の領域は出来ているので、必要に応じてpaddingを0にする。