---
title: "FirefoxでCSS Gridが崩れる問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLのCSS GridがFirefoxで崩れる問題を、プロンプトの書き方で未然に防ぎたいエンジニア・デザイナー向け。Firefox互換を意識したプロンプトパターンと生成後の検証ポイントを具体的に紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/firefox-grid-broken-ai-prompt"
markdown: "https://giga-site.com/articles/firefox-grid-broken-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 6
---
# FirefoxでCSS Gridが崩れる問題をAI生成HTMLで防ぐプロンプト
AIに依頼してCSS GridのHTMLを生成すると、Chromeでは問題ないのにFirefoxで崩れるコードが生成されることが少なくありません。プロンプトに具体的な制約を盛り込むことで、Firefoxで動作するGridコードを最初から生成させることができます。
> Source HTML: https://giga-site.com/articles/firefox-grid-broken-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
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崩れは解消します。
## 関連記事
- [FirefoxでCSS Gridが崩れるときの原因と直し方](https://giga-site.com/articles/firefox-grid-broken-fix/index.md)
- [FirefoxでCSS Gridが崩れるときに共有前に確認するチェックリスト](https://giga-site.com/articles/firefox-grid-broken-checklist/index.md)
- [FirefoxでCSS Gridが崩れるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/firefox-grid-broken-request-message/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [ファビコンが更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/favicon-cache-ai-prompt/index.md)
- [QRコードで開くと404になる問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/qr-404-ai-prompt/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "FirefoxでCSS Gridが崩れる問題をAI生成HTMLで防ぐプロンプト",
"description": "AI生成HTMLのCSS GridがFirefoxで崩れる問題を、プロンプトの書き方で未然に防ぎたいエンジニア・デザイナー向け。Firefox互換を意識したプロンプトパターンと生成後の検証ポイントを具体的に紹介します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/firefox-grid-broken-ai-prompt",
"url": "https://giga-site.com/articles/firefox-grid-broken-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "AIに「Firefox対応のCSS Gridにして」と指示すれば大丈夫ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "「Firefox対応」という曖昧な指示では効果が薄いです。「minmax(最小px値, 1fr)を使う」「justify-selfでセンタリングする」「min-width: 0を設定する」のように技術仕様を具体的に書いたほうがFirefox互換コードを生成させやすいです。"
}
},
{
"@type": "Question",
"name": "`grid-auto-flow: dense`はFirefoxで動きますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "Firefox 52以降でサポートされており、現在の主要Firefoxバージョンでは動作します。ただし`dense`指定時のアイテム配置アルゴリズムがChromeと微妙に異なることがあるため、視覚的に確認することを推奨します。"
}
},
{
"@type": "Question",
"name": "AI生成HTMLをFirefox互換にするために手動で修正すべき最優先CSSプロパティはどれですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "`grid-template-columns`の`minmax`最小値設定が最優先です。次いでGridアイテムのセンタリング方法（margin → justify-self/align-self）、Gridコンテナへの`min-width: 0`の追加の順です。この3か所を直すだけで大半のFirefox崩れは解消します。"
}
}
]
}
```