CSSでデザインを再現する難しさと楽しさ

本日は、現在制作中のホームページでHTML・CSSの調整を行いました

今回はデザインカンプを見ながら、カードデザインの細かな部分を再現していく作業です。

「ここを数px動かすだけで印象が変わる」

そんなデザインの奥深さを改めて感じた一日でした。

アイコンの位置を微調整

今回一番時間をかけたのは、アイコンの配置です。

画像を差し替えたことで位置のバランスが変わり、

CSSで

* `position`

* `left`

* `top`

* `justify-self`

などを使いながら、デザインカンプに近づけていきました。

数pxの違いでも見た目の印象が大きく変わることを実感しました。

リボンデザインもCSSだけで実装

カード左上のリボンは、画像ではなくCSSだけで作成しました。

特に印象に残ったのが、擬似要素（`::after`）を使ってリボンの先端を作る方法です。

今までは画像で作るものだと思っていましたが、CSSだけでもここまで表現できることに驚きました。

デザインカンプとの比較

コーディングでは「動けばOK」ではなく、

デザインカンプを見ながら

* アイコンのサイズ

* タイトルとの距離

* 余白

* 線の位置

などを何度も見比べて調整しました。

細かい作業ではありますが、この積み重ねが完成度につながるのだと感じています。

---

 学んだこと

HTMLやCSSはコードを書くだけではなく、

「どう見せるか」

を考えることも大切だと改めて感じました。

デザインを忠実に再現するためには、

1px、2px単位の調整を繰り返すことも少なくありません。

少しずつですが、自分でもデザインカンプとの差を見つけられるようになってきたことが今日一番の成長です😊

本日はここまで！