---
title: "モーダルが閉じないときに共有前に確認するチェックリスト"
description: "HTML共有前にモーダルの閉じる動作を確認するチェックリストを紹介。AI生成HTMLで見落とされやすいJSイベント未設定・ID不一致・overflow残留を含む確認項目をまとめます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/modal-not-closing-checklist"
markdown: "https://giga-site.com/articles/modal-not-closing-checklist/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# モーダルが閉じないときに共有前に確認するチェックリスト

モーダルが閉じないトラブルを共有前に防ぐには、HTMLを相手に送る前に動作を自分で確認するチェックリストが有効です。AI生成コードでは開く側の実装は正しくても閉じる側が抜けているパターンが多く、4〜5項目のチェックで大半のトラブルを未然に防げます。

> Source HTML: https://giga-site.com/articles/modal-not-closing-checklist
> Article index: https://giga-site.com/articles/index.md

## よくある原因

チェックリストで防げるトラブルの典型は「モーダルを閉じるボタンのID名とJSの参照IDが違う」問題です。AIがHTMLを生成する際に`close-modal`と命名し、JSでは`closeModal`（キャメルケース）で参照していたり、スペルミスが1文字混入していることがあります。

モーダルが閉じた後に`body`の`overflow: hidden`が残って背景がスクロールできなくなるのも、チェックリストがあれば防げる典型的な問題です。「閉じた後に背景をスクロールできるか」を確認ステップに入れておくと、この症状を共有前に発見できます。

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

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

チェック①：モーダルを開く→×ボタンをクリックして閉じる、の操作を実施。チェック②：モーダルを開く→オーバーレイ（背景の暗い部分）をクリックして閉じる、の操作を実施。チェック③：モーダルを閉じた後にページ全体をスクロールできるか確認。チェック④：モーダルを開く→閉じる→再度開く、の繰り返し操作が正常か確認。

DevToolsのConsoleタブを開いた状態でチェック①〜④を実施し、赤いエラーが一件も出ないことを確認します。エラーが出た場合はメッセージをメモして原因を特定します。`Cannot read properties of null`はID名の不一致、`is not a function`は関数定義の場所の問題です。

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

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

相手から「モーダルが閉じない」と報告があったら、「×ボタンとオーバーレイクリックのどちらを試しましたか？両方ダメですか？」と聞きます。両方ダメなら閉じるロジック全体の問題、片方だけなら特定のイベントリスナーの問題です。

スマホユーザーの場合、「モーダルの外をタップしても閉じない」という報告は、オーバーレイのタッチイベントが設定されていないことが多いです。`onclick`はiOS Safariでは一部要素で動かないため、`addEventListener('touchend', closeModal)`を追加するか、`cursor: pointer`をオーバーレイ要素に設定します。

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

## 再発防止の運用

モーダルを含むHTMLの共有前チェックを「①×ボタンで閉じる、②背景クリックで閉じる、③再オープン可能、④スクロール復帰、⑤Consoleエラーなし」の5項目に標準化します。Notionのチェックボックステンプレートに組み込んでおくと毎回の確認が習慣化します。

AIにモーダルを生成させる際は「テスト手順：①×ボタンで閉じる ②背景クリックで閉じる ③2回目の開閉が正常 をすべて満たす実装にしてください」とプロンプトに含めると、生成時点からテストケースを考慮したコードになりやすいです。

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

## よくある質問

### チェックリストの①〜④はすべてやらないといけませんか？最低限どれが重要ですか？

最低限は①×ボタンで閉じる確認と⑤Consoleエラーなしの2項目です。時間があれば②背景クリックと③再オープン確認を追加すると実用上の不具合をほぼカバーできます。

### モーダルを閉じるとページが一瞬白くなります

モーダルを閉じるJSが`location.reload()`をセットで呼んでいる可能性があります。閉じる関数のコードを確認し、不要な`reload`を削除してください。AIがリセット処理として自動的に挿入することがあります。

### 複数のモーダルがある場合、チェック項目は倍になりますか？

基本的には各モーダルに対してチェック①③を実施する必要があります。ただし閉じるロジックを共通関数にまとめてある場合は、代表の1つを確認すれば十分なことが多いです。

## 関連記事

- [モーダルが閉じないときの原因と直し方](https://giga-site.com/articles/modal-not-closing-fix/index.md)
- [モーダルが閉じない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/modal-not-closing-ai-prompt/index.md)
- [モーダルが閉じないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/modal-not-closing-request-message/index.md)
- [OGP画像が更新されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/ogp-image-not-updating-checklist/index.md)
- [SVGが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/svg-not-showing-checklist/index.md)
- [WebP画像が表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/webp-not-showing-checklist/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "モーダルが閉じないときに共有前に確認するチェックリスト",
  "description": "HTML共有前にモーダルの閉じる動作を確認するチェックリストを紹介。AI生成HTMLで見落とされやすいJSイベント未設定・ID不一致・overflow残留を含む確認項目をまとめます。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/modal-not-closing-checklist",
  "url": "https://giga-site.com/articles/modal-not-closing-checklist",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "チェックリストの①〜④はすべてやらないといけませんか？最低限どれが重要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "最低限は①×ボタンで閉じる確認と⑤Consoleエラーなしの2項目です。時間があれば②背景クリックと③再オープン確認を追加すると実用上の不具合をほぼカバーできます。"
      }
    },
    {
      "@type": "Question",
      "name": "モーダルを閉じるとページが一瞬白くなります",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "モーダルを閉じるJSが`location.reload()`をセットで呼んでいる可能性があります。閉じる関数のコードを確認し、不要な`reload`を削除してください。AIがリセット処理として自動的に挿入することがあります。"
      }
    },
    {
      "@type": "Question",
      "name": "複数のモーダルがある場合、チェック項目は倍になりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "基本的には各モーダルに対してチェック①③を実施する必要があります。ただし閉じるロジックを共通関数にまとめてある場合は、代表の1つを確認すれば十分なことが多いです。"
      }
    }
  ]
}
```