ついに!ちづみさんのコーディング練習用デザインカンプ、完走しました!課題URLはこちら↓
https://note.com/chizumi_/n/n43e918e99656
所要時間は5日、20時間弱です。CSSとレスポンシブに想像以上に時間を取られました^^;以下、簡単に振り返りをまとめておきたいと思います。
今回のデザインカンプでは、2回目の時よりも、マウスホバーした時の背景色の変化やリンクの変化、ページ内リンク、ヘッダーの固定、フォント周り(remで表記)などに気を配りながらカンプを行いました。
レスポンシブ部分では問題なかったのに、いざピクセルパーフェクトを目指して透過画像と照らし合わせてみたら、いろんなところがごちゃごちゃになってしまい、修正、修正の繰り返しで、そこに大きく時間を取られたように思います。
また、デザインデータ通りの数値でやってみても、実際の表示は違っていたりすることもありました。「こういった場合は現場ではどうするんだろう?」と思いながら、とりあえず、数値よりもデザインの方に照らし合わせる形でコーディングを行いました。
大変なことも多かったけど、勉強になることがたくさんありました!
hrタグで実線作ったり、spanタグでSP用に改行させたり、2回目の課題だった「画像の幅の指定方法」についても意識して実践することができました!
メインビジュアルの大きな背景画像は、きちんとデータ通りのサイズにならなかったことが最後まで悔やまれますが、幸いにもちづみさんが解説記事やコーディングデータを配布してくださっているので、それで振り返りを行おうと思います!
以下、練習用としてポートフォリオ掲載させていただきます(ポートフォリオサイトは後々整理していきます)↓