AIで知識ゼロからアプリ開発1000時間 #6

#6：止まってくれ、ボタン。〜CSSポジション地獄からの生還〜

CSSのposition指定（relative, absolute, fixed）が分からなくてレイアウトがめちゃくちゃになった話だじゃ。
でもAIと一緒に「親が誰で、子がどごさ動くのが」ってのをちゃんと理解して、思い通りに配置できるようになったんず。
今回はその「わげわがねCSS地獄」から抜け出したストーリーだびょん。

画面に表示されるボタンが、なんぼ直しても思ったどおりの場所さ来ねぇ。
「なんでだべ？marginだが？paddingが多すぎだべが？」ってあれこれ触っても、ぴったし来ねぇ。
そんとき、CSSのposition指定が「親子関係」で動いてるって、AIが教えてけだのさ。

■ わがんね3兄弟：relative・absolute・fixed

最初に「position: relativeが親で、absoluteが子」って言われても、頭がハテナだらけだったじゃ。
だけど、AIが「家の中の子ども」とか「ソファの上のクッション」って例えしてけで、ちょっとだけ理解できるようになってきたんず。

• relative：親（ソファ）として「わたしが基準です」って立つ
• absolute：そのソファの上で「ここから20cm右」とか自由に動くクッション
• fixed：部屋全体にガムテで貼られた注意書き。動かねぇ。スクロールしてもそこさある。

■ 実際のコードで混乱どMAX

cssコピーする編集する.status-box {
  position: absolute;
  bottom: -240px;
  right: 20px;
}

これ見たとき、「なんでbottom: -240pxってマイナスだば？ 画面の外さ逃げるじゃねぇが！」って思ったのさ。
でもAIが「その子（status-box）は、親を基準にして逃げてんのさ」って教えてけで、ようやく納得した。

■ fixedは親を無視する反抗期の子

背景ぼかしの設定でこんなのもあったじゃ。

cssコピーする編集する.settings-background {
  position: fixed;
  top: 0;
  left: 0;
}

こいつはどんなに親が動こうがスクロールされようが、絶対に動かねぇ。まるで、怒られてもどっしり構えてる中学生みてぇだ。
このfixedのおかげで、背景画像がスクロールしても変わらない演出ができたんず。

■ 失敗しながら覚えていぐのが、ゼロからの道

正直、最初は「CSSって言うだけでムズイ！」って拒否反応あったじゃ。
でも、なんも知らねぇとこから、1個ずつ「これは親なんだべ」「これは逃げる子どもなんだべ」って分かってきたことで、ちょっとだけ成長した気がしたんず。

---

画面が崩れてイライラしたとき、「わがんね！」って投げ出す前に、AIに聞いてみる。
それがオラにとっての「次の一歩」になった。
だんだん、自分の思い描いたとおりにボタンや吹き出しが出てきたときの達成感。あれはなかなかクセになる。

次もまた、ちょこっと理解できればそれでいい。そしたら、いつか「わがる」になるはんでな。