CSSが増えすぎて、どこを直せばいいのか分からなくなった
ロボFPの開発を進める中で、
「PCでは問題ないのに、スマホで見るとレイアウトが大きく崩れる」
という状態が続いていました。
原因を振り返ると、
- CSSを書いている場所が
- 子テーマ
style.css - 外観カスタマイズの追加CSS
- 記事内カスタムCSS
と 3箇所に分散
- 子テーマ
- 過去の試行錯誤で
width: 512px / 1024px / 1080pxheight: 1100px
などの 固定値CSSが混在
- Gutenberg（wp-block-columns）の flex 設定と干渉
という、「よくあるが一番ハマる状態」になっていました。
方針を大きく変更：「削除」ではなく「整理」
最初は
「いったん全部消して書き直すべきか？」
とも考えましたが、今回は次の方針を採用しました。
✔ CSSは“追加CSSの1箇所”に完全統一
✔ デザイン資産は残し、レイアウトだけを再設計
具体的には、
- 残すもの
- 見出し装飾（h2 / h3）
- ロボFP用ボタン（
.robot-fp-buttons） - カードUI（
.box2） - 円形アイコン（
.circle） - 色・フォント・影の世界観
- 捨てる／置き換えるもの
- px固定の横幅・高さ
- 同じセレクタの二重定義
という整理を行いました。
レスポンシブの土台を作り直す
まずは 「はみ出さない」ことを最優先に、CSSの土台を作り直しました。
ポイントは3つです。
① 固定幅をすべて「最大幅」に変更
width: 100%;
max-width: 1080px;
これで
- PCでは従来どおり
- スマホでは画面幅にフィット
するようになります。
② wp-block-columns は必ず折り返す
Gutenbergのカラムブロックは、設定次第で横にはみ出します。
.wp-block-columns.is-layout-flex {
flex-wrap: wrap;
}
これを明示することで、
PCでは横並び、スマホでは縦積みが安定しました。
③ 画像は必ず max-width:100%
1024px画像が3カラムに入ると、一瞬で崩れます。
img {
max-width: 100%;
height: auto;
}
これは必須だと改めて実感しました。
「box2 をリンクにしたら崩れる」問題への対応
もう一つハマったのが、
白いカード（
.box2）全体をリンクにしたい
というケースです。
最初は
<a>
<div class="box2">...</div>
</a>
としましたが、
WordPressテーマの影響でレイアウトが崩れてしまいました。
最終的に採用したのは、box2自体をリンクにする方法です。
<a href="..." class="box2 box2-link">
<p>家計の収支改善のアドバイスをください</p>
</a>
これにより、
- クリック範囲が自然
- hover 表現も安定
- スマホ・PCともに崩れない
という、いちばん事故の少ない形になりました。
今回の学び
今回の修正で、あらためて感じたのは次の3点です。
- CSSは「増える前提」で設計しないと必ず破綻する
- レスポンシブ対応は
「pxを使わない」だけで難易度が激減する - WordPress + Gutenbergでは
構造（HTML）をシンプルにする方が勝ち
結果として、
PC・スマホともにレイアウトが安定し、
今後の拡張もしやすい状態になりました。
ロボFPは引き続き進化中です
ロボFPは、
- 家計診断
- 収支改善アドバイス
- FP相談の入口
を、誰でも迷わず使えるUIにすることを目指しています。
今後も、
開発の過程で得た知見はこのブログで共有していきます。
同じように
「CSSがカオスになっている…」
と悩んでいる方の参考になれば幸いです。
コメント