よくある原因
AIが生成するHTMLは外部CSSファイルを`<link>`で参照する構造にすることが多いです。これは通常の開発では正しい分離ですが、静的HTMLを手動で差し替える運用ではCSSのキャッシュが残りやすく、更新が反映されない原因になります。プロンプトに「外部CSSファイルに分離せず、すべてのスタイルを`<style>`タグ内にインラインで書いてください」と指定するだけでこの構造的問題を回避できます。
AIがTailwind CSS CDNリンクを使う場合、CDNのCSSにはブラウザが長期キャッシュを設定します。Tailwindのバージョンが変わっても古いキャッシュが使われ続け、新機能のクラスが適用されないことがあります。「Tailwind CDNではなく、必要なスタイルをカスタムCSS変数と最小限のflexboxで書いてください」と指示すると外部依存ごと排除できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AIが生成したHTMLを受け取ったら、まず`<link rel="stylesheet"`が含まれていないかを確認してください。外部CSSへの参照が一つでもあればインライン化の指示が通っていません。追加で「このHTMLに含まれる外部CSSの参照を`<style>`タグにインライン化してください」と依頼します。
インライン化後にHTMLファイルをシークレットウィンドウで開き、DevToolsのNetworkタブで読み込まれているリソースのタイプを確認してください。`stylesheet`タイプのリクエストが出ていなければ完全にインライン化されています。リクエストが0件のCSSが理想的な状態です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
AI生成HTMLを配信している場合に相手からCSSが古いと報告が来たら、まず「ページのソースを表示してstyleタグの中を確認してください」と伝えてください。styleタグの中に直接CSSが書かれているか、linkタグで外部ファイルを参照しているかで原因の切り分けが素早くできます。
外部CSSの参照があった場合は、そのURLに直接アクセスして最新のCSSが返ってくるかを確認します。古いCSSが返ってくる場合はCDNキャッシュパージが必要で、新しいCSSが返ってくる場合はブラウザのローカルキャッシュが問題です。状況に応じて対処が変わるので、まずここで分岐します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
チームで使うAIへの共通プロンプトに「CSSはすべて`<style>`タグにインラインで記述し、外部CSSファイルやCDNへの参照を含めないこと」という制約を追加してください。この一文があるだけでキャッシュ起因のCSSトラブルを構造的に防げます。プロンプトのバージョン管理はNotionのデータベースかGitリポジトリで行うと管理しやすいです。
やむを得ず外部CSSを使う場合は、AIに「linkタグのhrefに`?v=1`のクエリパラメータを必ず含めてください」と指示してください。更新のたびにクエリの数値を上げることをルール化すると、外部CSS運用でもキャッシュ問題を抑えられます。この指示もプロンプトテンプレートに含めておくと指示忘れを防げます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
AIにインラインCSSを指示しても外部CSSを使い続ける場合の対処は？
「このHTMLの`<link rel='stylesheet'>`を削除し、その参照先CSSの内容を`<style>`タグに貼り付けてください」と具体的なステップで指示すると精度が上がります。抽象的な禁止より具体的な操作を指示する方が効果的です。
インラインCSSにするとHTMLが読みにくくなりませんか？
AIが生成した時点では人が直接編集する頻度が低いため、可読性より配信の安定性を優先するのが実用的です。次回修正が必要になったときもAIに全体を再生成させればよく、インライン化は配信の観点でメリットが大きいです。
外部CSSのキャッシュ問題はHTMLを自己完結型にする以外に解決策はありますか？
CSSのURLにコンテンツハッシュを付与するキャッシュバスティングが標準的な解決策です。ただし手動管理では抜け漏れが起きやすいため、自動化が難しい環境ではインライン化の方が確実です。