よくある原因
AIがCSS Gridのコードを生成するとき、学習データにChromeでのみ動作確認されたコードが多く含まれているため、FirefoxのGridエンジンとの差異が反映されにくい傾向があります。特に`minmax(0, 1fr)`や`grid-auto-flow: dense`などのプロパティは、ChromeとFirefoxで計算結果が微妙に異なることがあります。プロンプトで「Firefox互換」と書いても、AIが具体的に何を調整すればよいか判断できていないケースがあります。
AIが生成するGrid CSSは、デモやCodePenからの転用パターンが多く、それらの多くはChrome前提で作られています。そのため`align-items`や`justify-content`をコンテナに書くパターンと、`justify-self`をアイテムに書くパターンを混在させることが多く、Firefoxで整合が取れない状態のCSSが生成されることがあります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AIが生成したCSSのGridコンテナプロパティを洗い出し、`display: grid`の宣言があるセレクタに対して以下を確認します：`grid-template-columns`にminmax最小値があるか、`gap`（gapでなくgrid-gapと書かれていないか）、Gridコンテナに`min-width: 0`または明示的な`width`があるか。この3点が揃っていればFirefoxでの崩れリスクは大幅に下がります。
生成されたHTMLをローカルFirefoxで開いてF12→レイアウトタブのGridオーバーレイを確認します。目視でChrome版と差があった場合、Gridオーバーレイ上で列幅の数値をメモし、ChromeのDevToolsの同じ数値と比べます。差がある列の`grid-template-columns`値を確認し、`fr`だけの場合は`minmax(最小px, 1fr)`形式に修正してAIに再生成依頼するか、自分でCSSを編集します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
共有後に相手がFirefoxで崩れると報告してきた場合、まず「Firefoxのバージョンと、ズーム率はデフォルト（100%）ですか？」の二点を確認します。Firefoxのズーム変更でGridの折り返しが変わることがあるため、Ctrl+0でリセット後の状態を確認してもらいます。これで解消するケースは意外と多く、修正なしで終わることもあります。
ズームが問題でない場合、相手に「F12を押してConsoleタブを開き、赤いエラーが出ているか教えてください」と依頼します。CSSプロパティのサポートエラーは赤字で表示されます。エラーが`grid-template`関連なら、そのプロパティをMDNで検索してFirefoxのサポートバージョンを確認し、AIへの再生成プロンプトで使用禁止プロパティとして明示します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
Firefox互換のCSS GridをAIに生成させるためのプロンプト定型句の例：「CSS GridはFirefox最新版とFirefox ESR 115で正しく表示されること。grid-template-columnsはminmax(最小px値, 1fr)形式を使うこと。Gridアイテムのセンタリングはmarginではなくjustify-selfとalign-selfで行うこと。grid-gapではなくgapを使うこと。Gridコンテナにmin-width: 0を設定すること。」この文言をAIのシステムプロンプトまたは冒頭に追加することを推奨します。
生成後の確認ワークフローとしてFirefoxを必ずチェック対象に含めます。ギガサイト便アップロード前の作業リストに「Firefox表示確認」を追加し、確認OKのサインを付けてからURL発行するプロセスを標準化します。チームで運用する場合はプルリクエストやファイル名に「FF確認済」などのラベルを付ける運用も有効です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
AIに「Firefox対応のCSS Gridにして」と指示すれば大丈夫ですか？
「Firefox対応」という曖昧な指示では効果が薄いです。「minmax(最小px値, 1fr)を使う」「justify-selfでセンタリングする」「min-width: 0を設定する」のように技術仕様を具体的に書いたほうがFirefox互換コードを生成させやすいです。
`grid-auto-flow: dense`はFirefoxで動きますか？
Firefox 52以降でサポートされており、現在の主要Firefoxバージョンでは動作します。ただし`dense`指定時のアイテム配置アルゴリズムがChromeと微妙に異なることがあるため、視覚的に確認することを推奨します。
AI生成HTMLをFirefox互換にするために手動で修正すべき最優先CSSプロパティはどれですか？
`grid-template-columns`の`minmax`最小値設定が最優先です。次いでGridアイテムのセンタリング方法（margin → justify-self/align-self）、Gridコンテナへの`min-width: 0`の追加の順です。この3か所を直すだけで大半のFirefox崩れは解消します。