#Day79 どこかを揃えるとどこかがズレる。🫡
#Day79
作業しながらブログも同時進行でメモります✍️
ショッピングとランキングコンテンツとラインナップコンテンツの中を揃えたい。
まず見出しの位置を揃えたい。
ショピングとラインナップは背景色があるので上からの数値を揃えやすい。
上から26ピクセルに配置。
検索ボタンは４つでグループなので、ショッピングの見出しは単体と考え、ここはくっつきすぎないよう目視で調整。
ラインナップも同様、フィードバックにもあったように６つの商品がグループなので見出しはくっつきすぎないように目視で調整。でもショッピングのコンテンツ内のピクセルとは繰り返しの法則で同じ間隔の方がいいので・・・ここも26ピクセルに配置。
shoppingとボタンの間は45。
lineupと口コミNo1までも45。
ランキングは背景色がなくてどこに合わせればいいかわかりづらかったのでラインナップと同じ高さ700の四角を背景に設置してみる。（もっとやりやすいやり方ありそうだけどこれしか思いつかなかった）
この見えない四角の上でランキングの見出しも上から26ピクセルに配置。
これで上は揃った！として、鳥の大きさを指摘してもらったことを思い出し一旦鳥を揃える。”男の子ランキング””女の子ランキング”の文字の間隔もOK、画像までの間隔も11で良し😵💫💪
男の子ランキングと女の子ランキングの間隔は48ピクセル。
アイテムラインナップの二倍以上間隔をとっているので、ここはグループ分けとしてOKだよね🧐ちょっと離しすぎかな、一旦これで行こう。
商品名と画像の間隔。ランキングの方は画像と商品名を6ピクセルにした。（目視でこれくらいかなとした）
全画像6に合わせる。商品名の四角が半端な数字だったから画像の中央から小数点単位でずれるので商品名の四角を整数にする。
全ての商品名が画像の中心、尚且つ画像との間隔6ピクセル感覚、よし😵💫💪
ここの6ピクセルに対して、アイテムラインナップは商品名と画像の間を9ピクセル間隔にした。
商品名（定番セット）と値段（¥3,000)をグループにして移動する。
キリよく10ピクセル開けてみたら何となく遠すぎな感じもあったので9にした・・
ここもテキストが画像の中央ではなかったので調整。
→ここでフィードバックの動画見直してそういう意味じゃなさそうと思った。
商品名と値段は近くあるべきだけど繰り返しの法則として画像からの距離はランキングと同じであるべきなのか。同じ6ピクセルに直す。
andmoreボタンはアイテムラインナップの見出しと画像までの間隔（45ピクセル）に揃えるべきと配置。これも中央になっていなかった😩ので中央に直す。
あとは・・・ランキング揃えよう。
まずさっき作った見えない背景の上から他と同じ26ピクセルのところにランキングの文字配置はされている。
上はok。として、男の子ランキンググループと40しか離れていなかったのでここを45に合わせる。
見えない四角のトップから見出しまでは先ほど26に合わせているので男の子ランキングコンテンツ自体を下に下げていって45の間隔をとる。
そうすると女の子ランキングのまとまりと男の子ランキングが近くなってしまうので女の子ランキングを更に下にずらして先ほどの48ピクセルに合わせ直す。
念の為鳥がずれてないか確認。グループにしているから大丈夫そう。
以前グループ分けちょっとよく分からんって思っていたけど、ここへきてレイヤー分けでグループにしておく便利さに気づく笑😇
ここで一旦全体を見る。
うーんやっぱりランキングの見出しと男の子ランキングまでの距離が、他と同じにしているのに若干長く見える・・・これはフィードバックでも貼ってもらったリンクにあった視覚のズレっぽい・・・ので全体を揃えてから考えるとする。一旦このまま他を揃える。
大枠のコンテンツ幅。目視で68ピクセルくらい開けていたのでそれぞれここで68の幅にする。
ファーストビュー画像からショッピングコンテンツ 68
ショッピングコンテンツからランキングコンテンツ（配置した見えない四角）まで68
ランキングコンテンツからおすすめ商品コンテンツまで68
全体的にせま・・・🥲となりMacBookpro14自体を伸ばす・・・。
え・・・同じコンテンツ幅なのに流石にランキングとおすすめ商品離れすぎてる🥹
ランキングの見えない四角の高さが原因か。andmoreボタンありきのラインナップコンテンツと同じ高さので考えてるのが違うのかな。
andmoreボタンとコンテンツ背景色の下までは43になっているので、一旦ランキングの中の女の子ランキングと見えない四角の下までを43に揃えてみる。
・・・と思っていじったらランキング見出しを上から26に揃えたのがズレる。
しかも小数点単位。
えええ🥹確認するとランキングの画像みんな小数点単位の大きさだった・・？
画像の大きさから修正。高さが140.22になってる。全部140にする。
予想通りこれで王冠マークもずれた。修正。王冠マークも小数点単位の高さだった。
王冠マーク高さ43.01から43ジャストに変更。
そしたら揃わない笑
高さ140の画像の上で43の画像を配置しようとしても割り切れないとしても間隔は整数になるはずなのに何故かここも小数点単位になる。。。
なんでだ・・・さっきランキングの背景見えない四角移動したの関係アルカナ・・
→関係あるっぽい😇さっき見えない四角のトップから見出し26ピクセルにしたのに26.04になってる。
なんでかわからなかった🧐取り合えず男の子ランキング・女の子ランキングそれぞれ高さもまたずれたので揃える。高さ218に統一。
このままさっきやろうとしてた女の子ランキングと下（見えない四角の）をandmoreと下の間隔と同じ43に合わせる。
で、男の子ランキングを女の子ランキングと幅48まで揃え直す・・。
ランキングの見出しを同じく揃えようとするとやはり小数点出現。
わかった、多分”男の子ランキング”の文字の四角の高さが小数点でそこに合わせようとしてるからかも。と思い、
とりあえず文字の四角も整数にしてRankingの文字を手動で揃える。45にできた。
これで・・背景の上との26ピクセルだけズレてるので、背景の四角を合わせよう・・
できた。というか・・・・多分さっきランキングのグループレイヤー全部選択していじってたのかも。
背景の四角だけレイヤーの欄から選択してサイズ変更したらできた🤣
こういうことの繰り返しすぎる😄😅
今度はちゃんとランキングの全体を選択してショッピングコンテンツとの間隔を68とる。よし😵💫💪
これで一旦コンテンツ幅は68で揃ってるはず。
おすすめ商品とラインナップが詰まって見えるけど！！！
一回揃えて全体見てから錯覚系は手をつけたいので進む。
ここで検索ボタンのしたの余白が73で、どことも揃っていないのが気になる。
下のラッピングと名入れコンテンツも68ピクセルに合わせて配置し直し。
羊🐏は単純に高さが足りなくて切れていると思って36の高さにしたら何故か途中の🐏が切れる自体発生。なんで？！35にしたら収まった。
全体を揃えたかったところまではやった。😵💫シャドウもとった。
あとはショッピングの中のフィードバックであった宿題（クイズ）と、口コミの色とかだ。
と思って見直したらandmoreの下の余白53になってる。あれ。これだとランキングの見えない四角としたの余白と合わない💦
ランキングの画像の大きさもまた小数点になってる。王冠もだ。
もう一度やる・・・・。😵💫😵💫😵💫どこで変わっちゃてるのか気づきたい・・・😓
