ヒイヒイいいながら

こんばんわ。

今日も変わらず、サイト模写です。

一部、「ちょっと今の自分の力では無理だな」と思った部分に遭遇したのですが、午前中の３時間もかけて、なんとか解決に導くことが出来ました。

～今日の積み上げ～

↑これの作り方に超苦戦。

・白い四角を3つを横並べにすること、かつそれらを中央寄せにすること。justify-contentでなんとか解決。

・丸い画像を配置したはいいが、少しの拡大や縮小でその画像の位置がずれる問題。配置した位置を固定させたいのだが、position:absoluteやright、leftの指定だけではどうにも出来ず。そんな中transform: translateでなんとか解決。

/*３つを包む親要素*/
.sec8membermenu {
   display: flex;
   padding: 0 100px;
   justify-content: center; /*ここ*/
}

/*３つの四角のうちのひとつ*/
.sec8member {
   margin: 0 15px;
   position: relative;
}

/*画像*/
.sec8member img {
   border-radius: 100%;
   position: relative;
   top: 7%;
   left: 50%;
   transform: translate(-50%, 0%); /*ここ*/
}

やはり横並べ系に弱いようです自分。あと、transformは何かと便利そうなので、自分の頭の引き出しに追加されちょっと嬉しいという感じです。

ヒイヒイいいながら、ところどころ強引にここまで進みましたが、これがとても楽しい！という間隔は正直ありません。ですが、そこまで苦ではないな、という感じなので、割と適正はあるのかなって感じです。まずは、完成まで頑張ります。もっともっと成果物を増やさなければと思っていますので。

それとも、もうクラウドワークスでコーディングの案件を取ってしまったほうがいいものか…、背水の陣って感じで案件をやったほうが一番成長につながるとかいいますよね。世の中には本当に様々な情報があり、色んな人が色んな意見を語っています。

どれを参考にしたらいいか、情報の取捨選択も困難です。

それではとりあえず、おやすみなさい。