position:absolute だらけのデザインを CSS3 世代へ引っ越したらこうなった

はじめに

業務でcodexと共同で作業した記録を残そうと思い、本記事を執筆しました
内容自体はcodexから排出し、ChatGPTで添削及びmarkdown化してもらいました

発端

LP 全体が “画像の上に絶対配置しまくる” スタイルで、画面幅を変えると CTA がずり落ちる問題が発生。
特に akari/index.html の “奇跡エピソード” と “人気の占い” セクションが壊れやすい。

試したこと

• 背景画像の比率を aspect-ratio で確保し、カード自体をコンテナ化。
• clamp()＋%＋cqw（Container Query Units） で top / bottom / width を割合指定に置き換え。
• CTA ボタンを flex / grid でまとめ、nth-of-type で位置を決めていた頃の “マジックナンバー地獄” から脱出。

ハマりポイント

• inset で動かしたいのに要素がピクリともしない → position を付け忘れていた。
• 親子どっちを基準にするか曖昧なまま進めると再び迷子になるので、
  popular → recommend → recommend__list の 3 段階で position を明示。

仕上げ

• .popular__links を一つにまとめ、clamp で幅・余白をコントロール。
• .recommend__list に元の PNG を background 指定 し、HTML 側はテキストだけに専念。
• 装飾（色・影）はそのまま残して、レイアウトだけを近代化。

学び

• clamp() × aspect-ratio を組み合わせると、昔ながらの “画像に絶対配置” でも意外と再利用できる。
• container-type: inline-size;＋cqw を覚えておくと、縦横比が読めないバナーでも微調整が楽。
• inset は便利だけど、position を忘れるとただの飾り。