はじめに
コーディングを始めたばかりの頃、
私はmarginやpaddingで動かなかった時は、
とりあえずabsoluteでゴリ押ししていました。
- デザイン通りに置けない → absolute
- 余白が合わない → absolute
- スマホで崩れる → さらに absolute
そんな absolute万能時代の私がどう地獄を見て、
どう抜け出せたのかをまとめます。
同じ悩みを抱えている人の助けになれば嬉しいです。
なぜabsoluteに頼ってしまったのか
当時の私は
「デザイン通りに置ければ勝ち」
という考えで、余白より移動を優先していました。
● あるLPで遭遇した地獄
複数の画像・ボタンをabsoluteで固定して、
何px単位で微調整してパーフェクトピクセルを作っていたのですが…
スマホ版を開いた瞬間、
- 画像がワープ
- ボタンが画面外
- 文字がかぶる
- 要素が消える
もうどこから直せばいいのか分からない。
PCを直すとスマホが壊れ、
スマホを直すとPCが壊れる。
永遠の無限ループ。
ほんとに心折れました。
absoluteの呪いから抜け出せたきっかけ
● 「レイアウト＝流れ」だと知った日
ある記事に
「レイアウト＝要素の流れをつくること」
と書かれていたのを読んで、雷に打たれました。
私はずっと
「レイアウト＝位置を調整すること」
だと思っていました。
でも本当は、
- 要素の並び
- 親子関係
- 余白の取り方
これがレイアウトの本質だったんです。
「今までやってたの全部その場しのぎじゃん…」
と気づいた瞬間でした。
● margin/paddingが腹落ちした日
昔の私はmarginとpaddingを曖昧に使っていましたが、
要素の流れを意識し始めてから意味が分かりました。
- margin：外側の距離
- padding：内側の余白
この理解だけで、
absoluteで無理やり動かしていた場所が自然に整うようになり、
レイアウト崩れが大きく減りました。
● Flexを知らなかった頃の私は、本当に地獄だった
中央寄せひとつに1時間以上かかり、
topとleftを見ながら数値を動かす毎日。
「やっと真ん中に来た！」
→ スマホで全部崩壊して絶望
こんな作業を永遠に繰り返していました。
Flexboxと出会って世界が変わった
ある教材で見た3行のコード。
display: flex;
align-items: center;
justify-content: center;
書いた瞬間、
すべてが綺麗にど真ん中。
「え？これだけでいいの？
あの地獄いらなかったの…？」
本気で固まりました。
そこからFlexのすごさを知り、
- 横並びが勝手に決まる
- 縦中央も一瞬
- gapで間隔調整
- レスポンシブにも強い
margin地獄・absolute地獄が全部終わった感覚でした。
【まとめ】absoluteで苦しんでいたのは、正しい武器を知らなかっただけ
Flexを学んでから、absoluteの役割は
ズラすため” → 魅せるために変わりました。
Before（絶望）
- とりあえずabsolute
- 数値微調整の無限ループ
- スマホで崩壊
- 心が折れる
After（快適）
- ベースはFlexで整列
- absoluteはポイント使い
- レスポンシブでも崩れない
- 精神が安定（これ大事）
レイアウトは数字の戦いじゃなくて、
仕組みを知れば自然と整う世界です。
absoluteで苦しんでいる人がいたら、
まずは一歩、Flexを試してみてください。
コメント