ちづみさんの「コーディングの練習をしよう~その2~」完走しました!

ついに!ちづみさんのコーディング練習用デザインカンプ、完走しました!課題URLはこちら↓

https://note.com/chizumi_/n/n43e918e99656

所要時間は5日、20時間弱です。CSSとレスポンシブに想像以上に時間を取られました^^;以下、簡単に振り返りをまとめておきたいと思います。

今回のデザインカンプでは、2回目の時よりも、マウスホバーした時の背景色の変化やリンクの変化、ページ内リンク、ヘッダーの固定、フォント周り(remで表記)などに気を配りながらカンプを行いました。

レスポンシブ部分では問題なかったのに、いざピクセルパーフェクトを目指して透過画像と照らし合わせてみたら、いろんなところがごちゃごちゃになってしまい、修正、修正の繰り返しで、そこに大きく時間を取られたように思います。

また、デザインデータ通りの数値でやってみても、実際の表示は違っていたりすることもありました。「こういった場合は現場ではどうするんだろう?」と思いながら、とりあえず、数値よりもデザインの方に照らし合わせる形でコーディングを行いました。

大変なことも多かったけど、勉強になることがたくさんありました!

hrタグで実線作ったり、spanタグでSP用に改行させたり、2回目の課題だった「画像の幅の指定方法」についても意識して実践することができました!

メインビジュアルの大きな背景画像は、きちんとデータ通りのサイズにならなかったことが最後まで悔やまれますが、幸いにもちづみさんが解説記事やコーディングデータを配布してくださっているので、それで振り返りを行おうと思います!

以下、練習用としてポートフォリオ掲載させていただきます(ポートフォリオサイトは後々整理していきます)↓

https://eileben.conohawing.com/chizumi-renshu2/

この記事を書いた人