指定の競合

後から追加したCSSが既存の指定を上書きしている、あるいは逆に上書きできていない状態です。プラグインが独自のCSSを読み込んでいる場合にも起こります。継ぎ足しで書かれたCSSほど発生しやすくなります。

幅の計算違い

box-sizing の設定や余白の扱いで、想定より要素がはみ出すケースです。親要素の幅を超えてしまい、横スクロールが発生する形で表面化することが多くあります。

ブレイクポイントの抜け

特定の画面幅だけ指定がなく、その範囲で崩れる状態です。スマホとPCは確認していても、タブレットの幅が抜けている、という例が典型的です。

ブラウザ差異

特定のブラウザで実装が異なる、または未対応の場合です。新しいCSSの機能を使っている場合に起こりやすく、対応状況の確認が必要になります。

依頼するときは原因を特定できていなくて構いません。ただし「どの環境で、どこが、どう崩れるか」が分かれば、調査時間は大幅に減ります。

1. 発生する環境：OS・ブラウザ・バージョン（例：iOS 18 / Safari）
2. 画面幅：スマホ実機か、PCブラウザを縮めた状態か
3. 該当ページのURLと箇所
4. スクリーンショット：崩れている状態と、本来あるべき状態
5. いつから起きているか：直前に何か更新したか

特に重要なのは5番目

「プラグインを追加した直後」「テーマを更新した後」であれば、原因の見当がつきます。逆に「いつからか分からない」場合、調査範囲が一気に広がります。

更新作業の記録を残しておくだけで、こうした場面の調査時間が変わります。日付と作業内容をメモしておくことをおすすめします。

スクリーンショットは2種類あると早い

崩れている画面だけでなく、本来どうあるべきかが分かる資料（デザインカンプ、正常だった頃の画面）があると、認識のずれが起きません。「崩れている」の基準は人によって違うためです。

• 1箇所の軽微な崩れ：5,000〜15,000円
• ページ全体のレスポンシブ調整：20,000〜50,000円／ページ
• サイト全体の見直し：時間単価または月額での対応が現実的

調査に時間がかかるのは、再現できない場合です。「たまに崩れる」「特定の端末だけ」という症状は、環境の特定に時間を要します。この場合、実機の情報（機種名、OSバージョン、ブラウザ）が手がかりになります。

依頼前に次を試すと、原因の切り分けが進みます。結果を伝えるだけでも調査時間が減ります。

ブラウザの検証ツールで確認する

該当要素を右クリックして「検証」を選ぶと、どのCSSが効いているかが分かります。打ち消されている指定には取り消し線が表示されるため、競合が起きているかどうかを目視で確認できます。

プラグインを一時停止する

プラグイン由来のCSSが原因のことがあります。一時的に停止して再現するかを確認すれば、範囲を絞れます。本番で試す場合は、アクセスの少ない時間帯に行ってください。

キャッシュを消す

これだけで解決することも実際にあります。キャッシュプラグイン、CDN、ブラウザの3箇所を確認してください。「修正したのに反映されない」という場合は、まずキャッシュを疑うのが定石です。

崩れを直すために !important を重ねると、その時は直りますが、次の修正がさらに難しくなります。打ち消しの打ち消しが積み重なり、どの指定が効いているのか誰にも分からない状態になります。

短期的には早くても、修正のたびに時間が増えていきます。繰り返し崩れが出るサイトは、CSS設計そのものを見直した方が結果的に安く済みます。

見直しを検討すべきサイン

• 1箇所直すと別の箇所が崩れる
• !important が何十箇所も使われている
• どのファイルのどの記述が効いているか追えない
• 同じような修正を繰り返し依頼している

これらが当てはまる場合、都度の修正費用の総額が、整理の費用を上回っている可能性があります。

• 崩れの原因は競合・幅の計算・ブレイクポイント・ブラウザ差異の4種類
• 「どの環境で、どこが、どう崩れるか」を伝えれば調査時間が減る
• 「いつから起きているか」が最も有力な手がかり
• 依頼前にキャッシュの確認だけはしておく
• 繰り返し崩れるならCSS設計の見直しを検討する