最近は、CSSやWordPressで困ったときに「とりあえずAIに聞く」がだいぶ普通になってきました。
実際、シンプルなコードの書き方や文法ミスならAIの回答だけでサクッと解決できることも多いです。
ただ、実務でサイトをさわっていると、
「AIの回答どおりにやってみたけど、なぜか直らない…」
というパターンもかなり多いはずです。
この記事では、現場でよく相談される 「AIに聞いてもハマりやすいトラブル」を5つ取り上げて、
・なぜハマりやすいのか
・どこから順番に疑っていくと解決しやすいか
を「考え方ベース」でまとめてみます。
「とりあえずAIに丸投げ」から一段レベルアップして、
AIをうまく使いつつ、自分で原因を切り分けられるようになりたい人向けの記事です。
なぜ今「AIに聞くだけ」だとハマりやすいのか
AIツールは、単体のコード断片や「こう書きたい」という相談にはかなり強いですが、
「プロジェクト全体の状況」や「過去にどんな修正が積み重なってきたか」までは把握できません。
実案件のトラブルの多くは、
- 昔のCSSがどこかで悪さをしている
- 別のプラグインやテーマが出力したCSSが上書きしている
- 本番環境だけキャッシュや設定が違う
といった「状況要因」が絡んでいることがほとんどです。
つまり、「正しいコードの書き方」だけ分かっても解決しない問題が多くて、
そこにAIのコード例をそのまま貼り付けても、根本原因に届かないことがあります。
ここからは、実際によくあるトラブルを例に出しながら、
「どんな順番で原因を切り分けていくか」を具体的に見ていきます。
トラブル1：スマホだけレイアウトが崩れる
よくある症状
- PCではきれいに見えるのに、スマホで見ると横スクロールが出る
- スマホでだけ文字が異常に大きい／小さい
- 1カラムにしたいのに、なぜか横に並んでしまう
AIの回答がハマりきらない理由
「スマホだけ崩れる」と投げると、多くのAIは
- メディアクエリの書き方
- viewport設定（
<meta name="viewport">） - レスポンシブの基本的なサンプル
などを教えてくれます。もちろんこれは大事なのですが、実務では
- どこか1つの要素だけ「width: 1200px」など固定幅が残っている
- 画像のサイズ指定だけPC想定のまま（
max-widthではなくwidth固定） - テーマやプラグイン側のCSSが、こちらのメディアクエリより後ろで上書きしている
など、「そのサイト固有のクセ」が原因になっていることが多いです。
現場でのチェック順
- まずはブラウザの「検証ツール」で崩れている要素を特定
DevToolsで問題の要素を選択し、「どのCSSが効いているか」を確認します。
「取り消し線が付いているプロパティ」があれば、別のCSSに上書きされているサインです。 - 「幅」に関わるプロパティを全部見る
width、max-width、min-width、padding、marginあたりをチェック。
特にwidth: 1000px;のような固定値が残っていないかを確認します。 - 親要素の幅・余白も疑う
子要素の幅が100%でも、親に大きなpaddingやmarginが入っていると横スクロールの原因になります。 - メディアクエリの「順番」と「条件」を確認
@media (max-width: 768px)と@media (min-width: 768px)が混在していないか、
CSSファイルのどの順番で書かれているかもチェックします。
AIには「このCSSとスクショを見て、一番怪しい所を教えて」と聞きつつ、
上のチェックリストで自分でも切り分けていくと、かなり解決スピードが上がります。
トラブル2：flexで高さが揃わない／揃ったけどなぜかズレる
よくある症状
- カードレイアウトで、横に並べたボックスの高さがバラバラ
align-items: stretch;を指定しているのに、なぜか揃わない- スマホにすると今度は逆に余白がおかしくなる
AIの回答がハマりきらない理由
AIは大体こんな回答を返してきます。
display: flex;とalign-items: stretch;を指定しましょう- 高さを揃えたい場合は
heightやmin-heightを指定しましょう
もちろん間違いではないですが、実務では
- 子要素に
margin-bottomがバラバラに入っている - テキスト量がかなり違って、1行・2行・3行で見た目の高さがズレる
- SPで1カラムになったときに、逆に「高さ固定」が邪魔になる
といった「コンテンツ側の事情」が効いてきます。
現場でのチェック順
- まずは「何を揃えたいのか」をはっきりさせる
・カード全体の外枠の高さを揃えたいのか
・画像部分だけそろえたいのか
・ボタンの位置を揃えたいのか
を決めてからCSSを書くと迷走しにくくなります。 - カードの構造を「縦方向のflex」で組み立てる
カード全体をdisplay: flex; flex-direction: column;にして、
テキスト部分をflex: 1;で伸ばす構成にすると、
ボタン位置を揃えつつ高さもある程度揃えやすくなります。 - スマホ表示で同じ高さが本当に必要かを考える
SPで1カラムなら、高さを無理に揃える必要はないケースも多いです。
PCだけ高さを揃える、という割り切りも現場ではよくやります。
AIのサンプルコードをそのまま使うのではなく、
「カードの中身のどこを伸ばすか」を自分で設計するのがポイントです。
トラブル3：ヘッダー固定したら、コンテンツが隠れる
よくある症状
position: fixed;でヘッダーを固定したら、メインコンテンツの上が見えない- ページ内リンクでスクロールすると、見出しがヘッダーの裏に隠れる
AIの回答がハマりきらない理由
AIはよく
bodyやmainにpadding-topを付けてヘッダーの高さ分だけ空けましょう
という答えを出してくれます。
これ自体は正しいのですが、実務では
- PCとSPでヘッダーの高さが違う
- ログイン状態やお知らせバーの有無で、日によって高さが変わる
- ページ内リンク（アンカーリンク）のスクロール位置調整も必要
など、「高さが一定じゃない」ことが多いです。
現場でのチェック順
- ヘッダーの「実際の高さ」をCSSだけで決めない
単純なサイトならpadding-top固定でもOKですが、
状況で高さが変わる場合は、JSでヘッダーの高さを取得して余白を調整することも多いです。 - ページ内リンクは
scroll-margin-topも検討
近年のブラウザなら、見出しにscroll-margin-top: 80px;などを指定して、
固定ヘッダー分の余白を作る方法もあります。 - SPとPCで別々に考える
SPはハンバーガーメニューで高さが変わりやすいので、
「PCだけ固定する」「SPはスクロールで隠れる」といった割り切りも現場ではよくあります。
AIに「固定ヘッダー用のサンプルコードを出して」と頼んだうえで、
自分のサイトの事情に合わせて高さの扱いを調整するイメージです。
トラブル4：WordPressで特定ページだけ404／真っ白になる
よくある症状
- トップページや固定ページは表示されるのに、ある投稿だけ404になる
- 特定のURLだけ真っ白画面（ホワイトスクリーン）になる
AIの回答がハマりきらない理由
AIに投げると、
- パーマリンク設定を保存し直してみてください
- プラグインを停止して原因を切り分けましょう
といった「鉄板チェック」は教えてくれます。
ただ、実務では
- .htaccessが微妙に書き換えられている
- テーマの中のテンプレートファイル（single-xxx.phpなど）に致命的エラーがある
- 本番サーバーだけPHPのバージョンが違う
など、環境や運用歴が絡んだ問題も多いです。
現場でのチェック順
- まずはエラーログを見る
wp-config.phpでWP_DEBUGを有効にしたり、サーバーのエラーログを確認して、
どのファイルでエラーが出ているかを特定します。 - パーマリンクとリライトルールを確認
管理画面の「パーマリンク設定」を単に「変更を保存」だけ押すことで直ることも多いです。
カスタム投稿タイプやリライトルールをいじっている場合は、そのあたりも再チェックします。 - テーマのオーバーライドを疑う
子テーマでsingle.phpやarchive.phpを上書きしている場合、
そこにPHPエラーや条件分岐のミスがないかを確認します。
AIには「このエラーログの意味を教えて」と聞くのが相性がよく、
「どのファイルが怪しいか」を自分で特定 → 詳細はAIに聞くという流れが強いです。
トラブル5：本番サーバーだけ表示が違う／崩れる
よくある症状
- ローカルやステージングでは問題ないのに、本番だけ崩れる
- キャッシュを消すと直るが、しばらくするとまた同じ崩れが出る
AIの回答がハマりきらない理由
AIに説明しても、本番サーバー側の
- キャッシュプラグインの設定
- CDN（Cloudflareなど）のキャッシュ
- サーバー側のPHPバージョンやモジュール
までは把握できません。
「環境差」が原因のとき、AIはかなり情報不足の状態になりがちです。
現場でのチェック順
- 本番環境のキャッシュを「全部」疑う
ブラウザキャッシュだけでなく、
・WordPressのキャッシュプラグイン
・サーバー側のキャッシュ機能
・CDNのキャッシュ
を順番にクリアします。 - CSSやJSが本当に最新のファイルを読んでいるか確認
DevToolsの「ネットワーク」タブで、
CSSファイルのレスポンスヘッダや中身を確認し、ローカルと差分がないかをチェックします。 - ステージングと本番での設定差分を洗い出す
PHPバージョン、プラグインのバージョン、wp-config.phpの設定など、
明確に違うところがないかをリストアップします。
AIには「このエラーメッセージの意味」「この設定の違いが何を引き起こすか」を聞きながら、
差分リストを自分で作るのが一番手堅い方法です。
AIと人間の「いい役割分担」のイメージ
ここまで見てきたとおり、
AIは「コードの例」「文法の説明」「エラーメッセージの意味」を教えるのが得意です。
一方で、人間側がやるべきことは
- どの要素が崩れているかを特定する
- どのCSS／どのテンプレートが怪しいかあたりをつける
- 本番とローカルの環境差を洗い出す
といった「状況を整理して、AIが答えやすい質問に分解すること」です。
AIに丸投げするのではなく、
- 自分で検証ツールやログを見て、
- 原因候補をいくつかに絞り込み、
- その候補についてAIに深掘り質問する
という使い方をすると、トラブル対応の精度とスピードがかなり変わってきます。
まとめ：AIだけに頼らず、「考え方」を持っておくと楽になる
今回は、AIに聞いてもハマりやすい CSS・WordPressトラブルを5つ紹介しました。
- スマホだけレイアウトが崩れる
- flexで高さが揃わない／ズレる
- 固定ヘッダーでコンテンツが隠れる
- 特定ページだけ404／真っ白になる
- 本番サーバーだけ表示が違う／崩れる
どれも、AIが「コード例」を教えてくれるだけでは解決しきれないことが多く、
「どこから疑うか」「どう切り分けるか」という考え方が大事になります。
今後も、このブログでは
「現場で実際に起きたトラブル」と「そのときの考え方・チェック順」
をもう少し踏み込んでまとめていこうと思っています。
「AIに聞いてもスッキリしないトラブル」にハマったとき、
この記事を思い出して、
・検証ツールで要素を特定する
・幅や余白、メディアクエリを順番に疑う
・ログやエラーメッセージを見てからAIに聞く
という流れを一度試してみてもらえたら嬉しいです。
初学者のスタートダッシュに最適