こんにちは！

Itoop（アイティープ）の技術担当、佐藤です！

だんだん夏らしくなり、スーパーではスイカや夏野菜が目に入るようになってきましたね！

暑くなってきたからこそ、旬のものでエネルギーを補給したいです！

ところで、今回はWEBページ改修依頼の対応中にコンテンツの左寄せがうまくいかない事象を解決したので、理解の整理もかねて紹介させてもらいます！

初めて対応した、コンテンツの左寄せ！

今回は、WEBページの要素について左寄せというのを対応しました。

調べたところ、真っ先に目についたのが「float（フロート）」！

「float」は左右に要素を寄せるときに使う設定で、left、rightと指定することで左右に寄せることができます。

floatを利用することで左寄せが完了しました！

しかし、このあと対応を続けていくなかで想定外の問題が発生しました。。

問題発生！要素が重なってしまう！

左寄せは「float:left」で実現しました！

しかし、レスポンシブ対応といって、画面の幅が違うデバイスに対応させようとしたとき、不思議な挙動をするようになりました。

対象の画像と別の画像が重なって見えるようになってしまったのです！

別の画像は重ならずに左右に分かれたままだったり、左右に合った要素の段が変わったりしていたので、素直に「なんでこんなことに？」と驚きました！

悩んでも分からない僕は、先輩に相談しました！

どうやら左寄せを実現するために利用した「float」の仕様が問題でした！

『display:inline-block』で解決！

先輩の言葉をもとに調べたところ、左寄せを実現するために複数のやり方を発見しました！

例を挙げると、「float」「inline」「inline-block」・・・

それぞれ役割が違いました！

原因としては、今回利用した「float」の仕様でした。ほかの要素に「float」の設定がないと干渉しないという動きをします。

ほかの要素との間隔を直接数値で指定していたのもあって、画面の幅が変わると画像と画像が重なるような動きになっていました！

今回の対応に限れば「display:inline-block」という設定を「float:left」の代わりに利用するのが最適でした！

ほかの画像と重なることもなく、そのあとに加えた設定とも競合しませんでした！

参考：https://saruwakakun.com/html-css/basic/display

おわりに

今回、自分の能力を超えた挑戦だったので、先輩に助けていただいて本当にありがたかったです！

「左寄せ」ひとつにしても、複数の対応方法があり、自分の考えに固執していたことに気づけました！

人に聞くことで、視点を増やせることと、CSSの操作の理解が深まりました！

この記事が自分のような駆け出しのエンジニアの力や、問題解決のきっかけになったらとても嬉しいです！

今日も良い一日をお過ごしください。