---
title: "FirefoxでCSS Gridが崩れるときに共有前に確認するチェックリスト"
description: "「崩れています」と言われてから修正するより、共有前に自分で気づく方が圧倒的に早い。FirefoxでCSSグリッドが崩れる原因を優先順位付きで確認できるチェックリストをまとめました。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/firefox-grid-broken-checklist"
markdown: "https://giga-site.com/articles/firefox-grid-broken-checklist/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# FirefoxでCSS Gridが崩れるときに共有前に確認するチェックリスト

CSS GridレイアウトのHTMLをFirefoxで共有する前に一人で実施できるチェックリストを用意しておくと、相手から「崩れています」と言われる前に自分で問題を発見できます。確認の優先順位と具体的なチェック方法を整理しました。

> Source HTML: https://giga-site.com/articles/firefox-grid-broken-checklist
> Article index: https://giga-site.com/articles/index.md

## よくある原因

AI生成HTMLでFirefox Grid崩れが起きる主な原因は三つです。①`minmax(0, 1fr)`の最小値0がFirefoxでの列幅計算に影響する、②GridアイテムのセンタリングにChromeで動く`margin: auto`を使っているがFirefoxで効かない、③Gridコンテナの幅が親要素のflexコンテナ内で暗黙的に0になる。AIはChromiumでのテスト結果を学習しているため、これらのFirefox特有の挙動を考慮したコードを生成しにくい傾向があります。

古いFirefox（バージョン52以前）では`grid-template-areas`の文字列指定にバグがあるケースも報告されていましたが、現在の企業環境でそこまで古いバージョンを使うことはほぼなくなりました。ただしFirefox ESRを使っている組織では最新機能のサポートに数ヶ月の遅れが生じることがあり、`subgrid`など比較的新しいプロパティが動かないことがある点は注意が必要です。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

チェック1：HTMLをローカルのFirefoxで開き、Gridレイアウト部分を目視確認します。Chromeと並べて表示できない場合は、同じURLをFirefoxとChromeで別タブで開き、スクリーンショットを並べて比較します。列数・行の高さ・アイテムの位置が一致しているかを確認します。

チェック2：F12→レイアウトタブでGridオーバーレイを有効にし、Gridラインと各エリアの境界が意図した通りか確認します。列幅の数値がChrome版と大きく異なる場合は`grid-template-columns`の値に問題があります。`repeat(auto-fill, minmax(150px, 1fr))`のように明示的な最小値を設けている場合は通常Firefox互換で動きますが、`minmax(0, 1fr)`や`minmax(auto, 1fr)`は要注意です。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

チェックリストを相手向けに送る場合は「Firefoxのアドレスバーに`about:support`と入力してバージョンを確認し、教えてください」と具体的な手順で依頼します。`about:support`ページはFirefoxの詳細設定情報も一覧表示されるため、企業ポリシーによる設定変更が問題を引き起こしているかの判断にも役立ちます。

相手がレイアウト崩れのスクリーンショットを送ってきた場合、Gridアイテムが縦1列に積み重なっているなら`grid-template-columns`の列幅計算失敗、アイテムが重なっているなら`grid-template-areas`の指定ミス、アイテムが意図した順序と違うなら`grid-column`や`grid-row`の指定ミスが原因候補です。スクリーンショットを見るだけでおおよその原因カテゴリを絞り込めます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

AIでGridレイアウトのHTMLを生成したあと、生成物のCSSを以下のルールで自己レビューします：①全ての`fr`単位の使用箇所でminmaxに明示的なpx最小値があるか、②Gridアイテムのcenteringがmarginでなくjustify-self/align-selfか、③Gridコンテナにexplicitなwidthかdisplay:gridの親要素でmin-width:0があるか。この3点だけ確認すれば主要なFirefox非互換を事前に排除できます。

ギガサイト便でURLを発行した後は「Chrome・Firefox確認済み」フラグを管理表に記録します。Googleスプレッドシートなどで「URL・確認日・Chrome○・Firefox○・備考」の列を持つ台帳を作ると、後から確認状況を振り返れます。管理コストが低く、チームで共有できる利点があります。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### Firefox ESRを使っている相手にはどのバージョンのFirefoxをチェックリストの基準にすればよいですか？

ESR最新版を基準にします。2024年時点ではESR 115系またはESR 128系が企業環境で多く使われています。MDN Web Docsの各CSSプロパティページで「ESR」サポート状況を確認し、ESRで赤表示のプロパティは使用を避けるか代替手段を用意します。

### `subgrid`を使っているHTMLはFirefoxで動きますか？

Firefox 71以降で`subgrid`がサポートされています。ただしESR 102以前では未サポートです。社内ブラウザがESR 102以前の場合は`subgrid`を避け、明示的な`grid-template-rows`で高さを合わせる代替手法を取ります。

### チェックリスト確認後にアップロードしたのに相手のFirefoxで崩れました。なぜですか？

相手のFirefoxがズーム変更状態（Ctrl+0でリセット可）か、拡張機能がCSSを変更している可能性があります。相手にInPrivate（プライベートウィンドウ）で開くよう依頼し、それで直るなら拡張機能が原因です。直らない場合は相手のFirefoxバージョンを確認します。

## 関連記事

- [FirefoxでCSS Gridが崩れるときの原因と直し方](https://giga-site.com/articles/firefox-grid-broken-fix/index.md)
- [FirefoxでCSS Gridが崩れる問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/firefox-grid-broken-ai-prompt/index.md)
- [FirefoxでCSS Gridが崩れるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/firefox-grid-broken-request-message/index.md)
- [OGP画像が更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/ogp-image-not-updating-checklist/index.md)
- [ファビコンが更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/favicon-cache-checklist/index.md)
- [QRコードで開くと404になるときに共有前に確認するチェックリスト](https://giga-site.com/articles/qr-404-checklist/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "FirefoxでCSS Gridが崩れるときに共有前に確認するチェックリスト",
  "description": "「崩れています」と言われてから修正するより、共有前に自分で気づく方が圧倒的に早い。FirefoxでCSSグリッドが崩れる原因を優先順位付きで確認できるチェックリストをまとめました。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/firefox-grid-broken-checklist",
  "url": "https://giga-site.com/articles/firefox-grid-broken-checklist",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Firefox ESRを使っている相手にはどのバージョンのFirefoxをチェックリストの基準にすればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ESR最新版を基準にします。2024年時点ではESR 115系またはESR 128系が企業環境で多く使われています。MDN Web Docsの各CSSプロパティページで「ESR」サポート状況を確認し、ESRで赤表示のプロパティは使用を避けるか代替手段を用意します。"
      }
    },
    {
      "@type": "Question",
      "name": "`subgrid`を使っているHTMLはFirefoxで動きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Firefox 71以降で`subgrid`がサポートされています。ただしESR 102以前では未サポートです。社内ブラウザがESR 102以前の場合は`subgrid`を避け、明示的な`grid-template-rows`で高さを合わせる代替手法を取ります。"
      }
    },
    {
      "@type": "Question",
      "name": "チェックリスト確認後にアップロードしたのに相手のFirefoxで崩れました。なぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "相手のFirefoxがズーム変更状態（Ctrl+0でリセット可）か、拡張機能がCSSを変更している可能性があります。相手にInPrivate（プライベートウィンドウ）で開くよう依頼し、それで直るなら拡張機能が原因です。直らない場合は相手のFirefoxバージョンを確認します。"
      }
    }
  ]
}
```