---
title: "ボタンがクリックできないときの原因と直し方"
description: "AI生成HTMLやノーコード制作のページでボタンがクリックできない・反応しない問題の原因を症状別に解説。CSSの重なり順、JS読み込みエラー、pointer-eventsの設定まで具体的な直し方を紹介します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/button-not-clickable-fix"
markdown: "https://giga-site.com/articles/button-not-clickable-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# ボタンがクリックできないときの原因と直し方

共有したHTMLページのボタンを押しても何も起きない、またはクリックできない——このトラブルはCSSの`z-index`やJavaScriptの読み込みエラーが原因であることが多く、ブラウザの開発者ツールを使えば数分で原因箇所を特定できます。症状別に原因と修正手順を整理しました。

> Source HTML: https://giga-site.com/articles/button-not-clickable-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

最多パターンは、見えないdivや半透明のオーバーレイ要素がボタンの上に重なっていてクリックイベントを横取りしているケースです。AI生成のモーダル実装では`position: fixed; top: 0; left: 0; width: 100%; height: 100%;`のバックドロップ要素が閉じた後も`display: none`にならずに残ることがあります。

JavaScriptファイルが読み込めていないケースも多いです。外部JSファイルへのパスがローカル絶対パス（`C:\Users\...`）になっていたり、CDNのURLが古くなって404を返している場合、ボタンのclickイベントが登録されず何も起きません。DevToolsのConsoleタブに赤いエラーが出ているか確認してください。

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

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

まずDevToolsのConsoleタブ（F12）を開いてエラーメッセージを確認します。`Uncaught ReferenceError`や`Failed to load resource`があればJSが動いていないサインです。次にElementsタブでボタン要素を選択し、右クリック→「Scroll into view」でボタンが実際にクリック可能な位置にあるかを確かめます。

原因がCSSの重なりであれば、DevToolsのElementsタブで怪しい要素を選び`pointer-events: none;`をStylesパネルに追加して試してみます。ボタンが反応するようになれば、その要素が犯人です。本番修正としては該当要素に`pointer-events: none;`を追加するか、`z-index`を調整します。

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

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

相手から「ボタンが押せない」と報告があったら、使用ブラウザとデバイスを最初に確認します。iOSのSafariではタッチイベントとクリックイベントの扱いが異なるため、`cursor: pointer`がない要素はタップが効かない場合があります。CSSに`cursor: pointer;`が設定されているか確認してください。

相手に「F12を押してConsoleタブを開いてもらい、エラーメッセージが赤字で出ているか教えてください」と依頼するのが最速の切り分け方法です。エラーが出ている場合は画面キャプチャを送ってもらうと、こちらで即座に原因を特定できます。

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

## 再発防止の運用

AIにボタンを含むHTMLを生成させる際は「ボタンのclickハンドラはインライン`onclick`で書き、外部JSファイルへの依存をなくすこと」と指定します。外部JSに依存しなければ、読み込み失敗によるクリック無効を防げます。

共有前チェックとして「全ボタンを1回ずつクリックして期待どおりの動作になるか確認する」ステップを運用に組み込みます。ギガサイト便でアップロードした後は必ず公開URLを自分でも開いて動作確認してから相手に共有するよう習慣づけましょう。

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

## よくある質問

### ボタンにはclickイベントが設定されているのにConsoleにエラーが出ないのに動かない場合は？

イベントは登録されていても関数が空か、条件分岐でreturnしている可能性があります。DevToolsのSourcesタブでclickハンドラにブレークポイントを置き、実際に実行されているかをステップ実行で確認してください。

### モバイルでだけボタンが押せません。PCでは正常です

iOSのSafariではfocus/blurイベントの扱いが特殊で、`<div onclick>`のような非インタラクティブ要素へのクリックが効かないことがあります。`<button>`タグに変更するか、`cursor: pointer;`と`-webkit-tap-highlight-color`を設定してください。

### disabled属性を外したらクリックできるようになりましたが、なぜdisabledがついていたのですか？

AIがフォームの送信ボタンを生成する際、バリデーション未通過時はdisabledにするJSロジックと合わせて生成することがあります。JSが読み込めていないとdisabledが解除されず永遠に押せない状態になります。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ボタンがクリックできないときの原因と直し方",
  "description": "AI生成HTMLやノーコード制作のページでボタンがクリックできない・反応しない問題の原因を症状別に解説。CSSの重なり順、JS読み込みエラー、pointer-eventsの設定まで具体的な直し方を紹介します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/button-not-clickable-fix",
  "url": "https://giga-site.com/articles/button-not-clickable-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ボタンにはclickイベントが設定されているのにConsoleにエラーが出ないのに動かない場合は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "イベントは登録されていても関数が空か、条件分岐でreturnしている可能性があります。DevToolsのSourcesタブでclickハンドラにブレークポイントを置き、実際に実行されているかをステップ実行で確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "モバイルでだけボタンが押せません。PCでは正常です",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "iOSのSafariではfocus/blurイベントの扱いが特殊で、`<div onclick>`のような非インタラクティブ要素へのクリックが効かないことがあります。`<button>`タグに変更するか、`cursor: pointer;`と`-webkit-tap-highlight-color`を設定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "disabled属性を外したらクリックできるようになりましたが、なぜdisabledがついていたのですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "AIがフォームの送信ボタンを生成する際、バリデーション未通過時はdisabledにするJSロジックと合わせて生成することがあります。JSが読み込めていないとdisabledが解除されず永遠に押せない状態になります。"
      }
    }
  ]
}
```