初心者🔰のWebデザイン独学記録🐣✏️

その日の気づき・疑問点・進捗📝

#Day78 揃える(これ多分定期的に見直すとかじゃなくて常になんだ笑)

#Day78

 

フィードバックを見ながら合わせていく。

 

定期的に揃えるのではなく一つ編集や追加をしたらまず揃えるのか。

 

まずショッピング(検索ボタンコンテンツ)の上の余白。

最初感覚で60くらいの余白を開けたが何となくまだ詰まってるように見えて、下のコンテンツ同士の余白78に合わせる。

shoppinngというテキストと検索ボタンの間を56にしたいが56.73になる・・

全て整数の四角で作っているのに。🧐

→これは時間置いてもう一回やったらボタンの四角の高さが小数点で配置されてたからだと発覚

 

検索ボタンの中はそれぞれまた整数にし直して余白を割り切れるように左右対称の数値で配置できるようにやり直した。

余白を合わせたが何となくヒヨコと予算から探すのテキストが中央に見えないのは錯覚・・?

でも個別のボタン単体で見ると揃ってる。

 

Rankingのテキストは画像と合わせるのか・・・!

ここに関しては【男の子ランキング➕鳥マーク】があるので広く見えて、下のLineupの上の段の値段の部分から下の画像までも同じ余白にしたけど、どうしてもランキングの余白が多く見える。

 

それ以外の部分は揃え直した。

それぞれ四角が半端な数字になっているものもあって揃わなかったのもあり、四角の大きさから見直した。

 

揃える時にコンテンツごと動かしたい場面も多かったので自然にレイヤー整理も同時進行。

進捗

https://www.figma.com/file/gfoImPAq636rIrkYg8v6EU/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB?type=design&node-id=0%3A1&mode=design&t=yNWgM10X4PXqIuxd-