レイアウトが崩れたら

レイアウト崩れって、イージーミスであることが多い気がしますが、イージーなだけに気づきにくいし、見つけにくい。 ; 忘れとか、 / 忘れとか。

webサイトを作っていて、一通りレイアウトができて、コードも打ち込んで、最後にフッターを追加しようとしたんですね。まあ、コピーライトもどきなんですけど。

そうしたらずれまして。中央に置きたかったんですが、なんでかちょっと左にずれる。見た感じは ; 忘れも / 忘れもしていない。html の構造としては、メインコンテンツの後ろに、ただ新しいフッターのコンテナを追加しただけなのに、なんでかずれる。

ずれるどころか、文の頭の文字が消える。「© 2020 ナンチャラカンチャラ」みたいに html は打ち込んでいるのに、実際開いてみると「2020 ナンチャラカンチャラ」と、最初の©が消えてしまう。

何が起きてるのか全く理解できず、数時間打ち込んだコードを眺めたり、思いつくままに検索してみたりするも原因がわからない。いちから全部やり直してみることも覚悟しつつ、とりあえずできることはやってみようと思い、いろいろやってみたところ、フッターの手前に img タグで画像を設置したら、うまいこと©も表示されるし、ポジションもセンターにくる。

最悪フッターの前に適当な画像入れてごまかすかーと逃げることも考えつつ、じゃあ画像じゃなくて文章だったら?と思い、p タグで aiueo と入れてみると、これでも表示される。空白でもいける?と思って試したらこれは表示されない。a だけでも表示されない。ab なら表示される。

ここでやっとピンと来たんですが、©が表示されていない状態で、webサイト全体を見回してみました。そうしたら、上の方の、コンテンツとコンテンツの隙間にいました。©が。かくれんぼかな?見つけるのに数時間かかりました。はい、float ですね。

float で浮いていたコンテンツ同士の間に隙間があって、そこに©が入り込んじゃって、ついでに位置調整もうまくいかなかったんですね。で、画像や2文字以上の文章を入力したときは、彼らはその隙間に入らなかったんですね。で、隙間に入らなかったので彼らはコンテンツの下に来て、さらにその下にフッターが来てたので、当然のようにうまく表示されていたというわけでしょうか。

float の親要素に、clearfix を設定してあげたら、画像や文章を入れなくてもしっかり思い通りに設定できました。すごく時間をとられました。float はしっかり理解してないと、こういうことになるんですね。flexbox でやるようにした方が、こういうトラブルは少なくなるんでしょうか?flexbox は flexbox でいろいろ大変だったりするんでしょうか? float 、むつかしい。

そしてそれ以前に、全体のレイアウトをざっくり作ってから、細かくコードを打ち込んでいくべきですね。コード盛り盛りに記述したあとにコンテンツを追加しようとすると、今回のように何かしら不具合がでたときに、原因を特定するのが大変。いろんなwebサイトで言われていることですが、実際身をもって味わいました。この睡眠不足を忘れない。

かしこ

タイトルとURLをコピーしました