Web制作#Chrome 縦線 カーソル 消す

Chromeでクリックすると縦線のカーソルが出る原因|キャレットブラウジング(F7)の切り方【2026年】

ノートPCの画面に浮かぶ大きな縦の棒を見ながら、会社員がキーボードの上の段のキーを1つ押そうとしているイラスト
イラスト:AIで作成

この記事の結論

Chromeでクリックするたびに縦線のカーソルが出るのは、F7キーで切り替わるカーソル ブラウジングが原因です。F7か設定画面で消せます。当社が2026年7月16日にサイトの不具合と見分けた手順つき。

目次7項目
  1. Chromeで縦線のカーソルが出る原因は、カーソル ブラウジング(キャレットブラウジング)
  2. 縦線のカーソルを消す手順:F7キーと、設定の「テキスト カーソル」
  3. 縦線のカーソルが「サイトの不具合」か「ブラウザの設定」かを切り分ける手順
  4. 裏方で実際に起きた例:2026年7月16日、申込完了画面の縦線をサイトの不具合と疑った
  5. 縦線カーソルを再発させない・早く気づくためのルール
  6. 業務でサイトの表示不具合を調べるときの注意
  7. よくある質問

SNS運用・広告・採用マーケティングの無料相談はこちら →

Chromeでページの文字をクリックするたびに縦線のカーソルが出るなら、原因はカーソル ブラウジング(キャレットブラウジング)がオンになっていることです。F7キーをもう一度押すか、設定の「ユーザー補助機能」でオフにすれば消えます。サイトの不具合と見分ける手順も、当社の実例と一緒に書きます。

Chromeで縦線のカーソルが出る原因は、カーソル ブラウジング(キャレットブラウジング)

入力欄ではない普通の文章をクリックしたのに、文字のあいだで縦線が点滅する。この症状は、サイトではなくChromeの側に原因があることがあります。当社で起きた例もそうでした。

カーソル ブラウジングとは、マウスの代わりにキーボードでページの中を移動し、文字を選んだりリンクを押したりできるChromeの機能のことです。2026年10月時点のGoogleの公式ヘルプは、この設定を日本語で「カーソル ブラウジング」、英語で caret browsing と呼んでいます。キャレットブラウジングという呼び方は、英語の名前をカタカナにしたものです。

この機能は、目や手の事情でマウスを使いにくい人のためのユーザー補助の機能です。オンにすると、ページの文章の中に、文字の位置を示す縦線(テキスト カーソル)が出ます。ワープロで文字を打つときに点滅している、あの縦線と同じ見た目です。

問題は、オンにするキーが F7 の1つだけだという点です。公式のキーボード ショートカットの一覧には、WindowsとLinuxの欄にも、Macの欄にも、「カーソル ブラウジングをオンにする」のキーとして F7 が載っています。カタカナに変換しようとしたとき、音量や再生のキーを押そうとしたときに、気づかずに押してしまうことがあります。

縦線が出る原因は、大きく2つに分かれます。

縦線が出る場所原因のある場所見分け方直す人
どのサイトでも出るブラウザの設定(カーソル ブラウジングがオン)無関係なサイトで同じ操作をすると再現するそのブラウザを使っている本人
特定のページでだけ出るサイトの作り(ページが編集できる状態になっている)ほかのサイトでは出ないサイトを作った側

当社で起きた例は上の行でした。確かめるのも上の行からが早く済みます。下の行は、ページの文章が書き換えられる状態で公開されている場合で、見分け方は後の章に書きます。

縦線のカーソルを消す手順:F7キーと、設定の「テキスト カーソル」

消し方は2つあります。早いのはキー、確実なのは設定画面です。どちらも、そのChromeを使っている本人が操作します。

  1. Chromeのウィンドウを選んだ状態で、F7 キーを1回押す。 公式ヘルプ(PDFの扱いのページ)には、カーソル ブラウジングをオンまたはオフにするには F7 キーを押す、と書かれています。
  2. 消えないときは、設定画面を開く。 公式ヘルプの手順は、Chromeの右上の「その他」から「設定」を開き、左下の「ユーザー補助機能」をクリックする、です。当社の社内メモでは、アドレスバーに chrome://settings/accessibility と入れてこの画面を開く方法も記録しています(公式ヘルプには載っていません)。
  3. 「テキスト カーソル」で始まる項目をオフにする。 公式ヘルプでは、項目名は「テキスト カーソルを使ってページ内を移動する」です。
  4. 普通の文章をクリックして、縦線が出なくなったか確かめる。

手順3の項目名は、見る場所によって少し違います。公式ヘルプの別のページでは「テキスト カーソルを使ってページ間を移動する」、当社の社内メモに残っている2026年7月の表示は「テキストカーソルを使用してページ間を移動する」でした。Chromeの版によって言い回しが変わるようなので、「テキスト カーソル」で始まるスイッチを探してください。

パソコンの種類による違いは、公式で確認できた範囲では次のとおりです。

環境公式ヘルプに載っているキー
Windows・LinuxF7
MacF7
ChromebookCtrl+F7(内蔵キーボードは、検索キーかランチャーキーと最上段の8番目のキーでF7の代わりにする)

Macについて、1つ補足があります。当社の社内メモでは、Macでの解除のキーを fn+F7 と記録しています。公式ヘルプに fn の記載はありませんでした。F7 だけで切り替わらないMacでは、fn を押しながら試すか、手順2の設定画面から切ってください。

なお、キーを押したときに確認の画面が出るかどうかは、公式ヘルプに記載がなく、当社の記録にも残っていないので、ここには書きません。

縦線のカーソルが「サイトの不具合」か「ブラウザの設定」かを切り分ける手順

自分のChromeなら、上の手順で消えれば終わりです。困るのは、お客さんや社内の人から「このページ、クリックすると変な線が出る」と報告を受けた側です。サイトを直すべきなのか、相手のブラウザの話なのかを、先に決める必要があります。

当社が使っている順番は、次の3つです。

  1. 無関係なサイトで、同じ操作をする。 報告のあったブラウザで、example.com のような関係のないページを開き、文章をクリックします。そこでも縦線が出れば、原因はブラウザの設定です。サイトは調べなくて済みます。
  2. 別のブラウザや別の人のパソコンで、問題のページを開く。 ほかの環境で出なければ、やはり報告した人の環境の話です。
  3. それでも特定のページでだけ出るなら、ページが編集できる状態かを確かめる。 開発者ツールのコンソールで、次の2つを見ます。
document.designMode
document.querySelectorAll('[contenteditable]').length

designMode とは、ページの文書全体を編集できる状態にするかどうかを決めるプロパティのことです。MDN(ブラウザの機能をまとめた開発者向けの資料)によると、値は on か off で、Chromeの既定は off です。contenteditable とは、HTMLの要素を、見ている人が編集できるようにするかどうかを示す属性のことです。

1つ目が off で、2つ目が0件なら、ページの側に文字を編集できる場所はありません。縦線の原因はページではない、と言えます。逆に on になっていたり、意図しない要素が編集できる状態になっていたりすれば、サイトの側を直します。

順番が大事です。1を飛ばして3から始めると、原因の無いページを調べ続けることになります。

裏方で実際に起きた例:2026年7月16日、申込完了画面の縦線をサイトの不具合と疑った

ここからは、僕の会社(株式会社UrakaTA)の社内メモからの転記です。

2026年7月16日、当社が制作に関わっているクライアントのサイトで、申込完了の画面を僕が確認していました。そこで、文章をクリックすると縦線のカーソルが出ることに気づきました。申し込みを終えた人が最後に見る画面です。表示がおかしければ直さなければならないので、サイトの不具合を疑い、AI(Claude Code)に調査を頼みました。

調査の結果は、次のとおりでした。

  • ページは編集できる状態ではなかった(designMode は off、contenteditable の要素は0件)
  • 関係のない example.com で同じようにクリックしても、同じ縦線が出た
  • つまり、原因はサイトではなく、僕のChromeの設定だった

いつ押したのかは記録にありませんが、F7 キーを気づかないうちに押していたのだと考えています。

この調査で分かった細かい点が2つあります。1つ目は、縦線は点滅するので、画面の写真を1回撮っただけでは写らないことがある点です。AIにブラウザを操作させて再現を確かめたときは、クリックした後の画面を拡大して2回撮らせました。2つ目は、AIには解除ができなかった点です。当社の環境では、ブラウザの拡張機能を通したAIの操作から、F7 キーを送ることも、chrome://settings の画面を操作することもできませんでした。デスクトップを操作する別の仕組みも、ブラウザは画面を見るだけの扱いで、操作はできませんでした。解除は、僕が自分でキーを押して行っています。

調査にかかった時間は、記録に残していないので書きません。この出来事を「前提を疑わずに調べ始めた失敗」として振り返った話は、AI導入の失敗事例7つの「失敗6」に書きました。この記事は、その原因と消し方の詳しい版です。

縦線カーソルを再発させない・早く気づくためのルール

F7 キーの押し間違いそのものは、防ぎきれません。当社が決めたのは、起きたときに早く気づくためのルールです。

  • 「縦線が出る」と聞いたら、最初にカーソル ブラウジングを疑う。 サイトのコードを開く前に、報告した人に F7 キーを押してもらいます。
  • 表示の不具合の報告は、無関係なサイトでの再現確認から始める。 当社はこれを調査の手順の1番に固定しました。AIに調査を頼むときも、指示の最初に書きます。
  • 点滅するものは、2回以上撮って確かめる。 1回の画面写真に写っていないことは、出ていない証拠になりません。
  • 社内のメモに、症状の言葉で残す。 「キャレットブラウジング」という名前を知らないと、検索もできません。当社は「クリックすると縦線が出る」という症状の言葉でメモを残しています。

AIに調べさせる場合の注意もあります。AIは「サイトの不具合を調べて」と言われると、サイトの中を調べ続けます。前提が違うかもしれない、という確認は、人が手順として渡す必要があります。

業務でサイトの表示不具合を調べるときの注意

お客さんへの返事は、切り分けの後にする。 「サイトを直します」と先に答えてしまうと、原因がブラウザの設定だったときに説明をやり直すことになります。逆に、確かめずに「そちらの設定の問題です」と返すのも危険です。無関係なサイトで再現するかどうかを確かめてから答えます。

人のブラウザの設定は、本人に変えてもらう。 カーソル ブラウジングは、必要があってオンにしている人もいるユーザー補助の機能です。相手のパソコンを勝手に操作して切るのではなく、F7 キーと設定画面の場所を伝えます。

AIのブラウザ操作には、できないことがある。 当社の環境では、AIからブラウザの設定画面は操作できませんでした。AIに任せられるのは原因の調査までで、設定を戻すのは人、という分担になります。AIにブラウザを操作させたときのほかの困りごとは、Claude in Chromeでスプレッドシートに日本語が入力できない時の回避策にも書きました。

当社が確かめたのは、MacのChromeだけです。 Windows・Linux・Chromebookのキーは、2026年10月時点の公式ヘルプの記載を写したもので、当社では試していません。Claude Codeまわりのほかの症状は、Claude Codeのエラー・困りごと一覧から引けます。

「サイトの表示がおかしい」という報告の原因が、サイト・ブラウザ・端末のどこにあるのか分からないときは、下のフォームからご相談ください。切り分けから一緒に見ます。

よくある質問

Chromeの縦線のカーソルは、ウイルスや故障が原因ですか?

当社で起きた例では、どちらでもありませんでした。原因はChromeのカーソル ブラウジングという設定がオンになっていたことです。Googleの公式ヘルプでは、F7キーでオンにできるユーザー補助の機能として案内されています。F7キーか設定画面で元に戻せます。

キャレットブラウジングとカーソル ブラウジングは同じものですか?

同じ機能です。Googleの公式ヘルプは、英語版で caret browsing、日本語版で「カーソル ブラウジング」と書いています。キャレットブラウジングは、英語の名前をそのままカタカナにした呼び方です。設定画面では「テキスト カーソル」という言葉で出てきます。

Chromebookではどのキーで切り替えますか?

Googleの公式ヘルプでは、Chromebookのショートカットは Ctrl+F7 と案内されています。内蔵キーボードでは、検索キーかランチャーキーと、最上段の8番目のキーを組み合わせてF7の代わりにします。外付けキーボードでは、F7と書かれたキーを使います。

引用元・参考にした記事

  1. Chrome でユーザー補助の拡張機能を使用する出典Google Chrome ヘルプ参照
  2. テキスト カーソルを使用して移動やテキスト選択を行う出典Google Accessibility Help参照
  3. Chrome のキーボード ショートカット出典Google Chrome ヘルプ参照
  4. Chrome で PDF を管理する出典Google Chrome ヘルプ参照
  5. Document: designMode プロパティ出典MDN Web Docs参照
  6. contenteditable グローバル属性 (HTML)出典MDN Web Docs参照

Let's Create
The Next Move.

マーケティング・SNS運用・採用のご相談はこちらから。