ぴよっ子エンジニアの日記

IT技術のアウトプット、Webページ作成の経過を綴ります

Webページ大枠の作成

Webページ作成7日目、大枠が出来上がりました。

色々な人のポートフォリオを見てデザインの調査をすることで、視認性をどう確保するかやファーストビューで何を伝えるかなど考えるきっかけになった。完成品ではファーストビューは自分を知ってもらうためにも顔写真がいいのかな。

また、基本的なコーディング手法(Webフォント適用方法、Twitterアイコンの設置方法)の勉強になった。Flexboxの使い方の復習にもなった。

クラス名はBEMで書いてるけど、名前の付け方がまだちょっとあやふやなところがあり。都度リファクタリングしつつ見直していこうと思います。

まだヘッダー、画像、フッターしかないけど、ここから色々と肉付けしていきたいと思います。 本当はカッコいいアニメーションとか入れたいけど、 まずは見やすさ、分かり易さを追求していきたいです。

備忘録

  • Flexboxは親側につける。
  • box-sizingについて、デフォルトではcontent-boxになってる。これだとpaddingつけたときにはみ出たりする。border-boxにすれば内側にpaddingが付くのではみ出る心配がない。
  • ulやliを用いて横並びにしてlist-style: none;で黒ぶちを消したときは、黒ぶち分の領域は出来ているので、必要に応じてpaddingを0にする。