CursorでHTMLプレビューする方法と便利な使い方

Cursorでは、HTMLファイルを編集しているだけだと完成画面が見えにくいので、HTML PreviewやLive Preview、Cursor Browserなどで表示確認の流れを作るのが現実的です。HTMLコードをプレビューする方法を探しているなら、まずは拡張機能で見るのか、ブラウザで見るのかを分けて考えると迷いにくいですよ。

Markdownでプレビューを表示するショートカットとHTMLの確認方法が混ざって、どれを押せばいいのか分からなくなることもありますよね。ここでは、CursorでHTMLプレビューを開く基本から、AI回答でHTMLを作った後の確認、表示されない時の見直しポイントまで整理します。

CursorでHTMLプレビューする基本

CursorでHTMLを作るときは、コードを書くだけでなく、表示結果をその場で確認できる状態にしておくと作業がかなり進めやすくなります。AIにHTMLを作ってもらう場合でも、最終的には見た目、リンク、ボタン、余白、スマホ表示を自分で確認する流れが大事です。

HTMLプレビューには、拡張機能で表示する方法、外部ブラウザで開く方法、Cursor BrowserやLive Preview系の機能を使う方法があります。どれが正解というより、あなたが作っているものが「単体のHTML」なのか「Webアプリ」なのかで選ぶのが現実的ですよ。

HTMLコードを確認する方法

CursorでHTMLコードを確認する基本は、フォルダーを開く → HTMLファイルを編集する → プレビューで表示する → 必要なら修正するという流れです。いきなりAIに全部任せるより、まずは今どのファイルを触っていて、どの画面に反映されるのかを押さえておくと迷いにくくなります。

単体のHTMLファイルなら、index.htmlのようなファイルを開いて、拡張機能やブラウザで表示を確認します。AI回答でHTMLを生成した場合も、Cursor上で差分を見てから反映し、その後にプレビューで崩れていないかを見るのが安全です。見た目がよくても、保存し忘れやCSSの読み込み忘れで反映されないこともあります。

HTMLコードの確認方法

✅ 確認時に見るポイントは、見た目だけではありません。リンク先が正しいか、画像パスが切れていないか、ボタンが押せるか、スマホ幅で崩れていないかもチェックしたいところです。特にAIが作ったHTMLは、雰囲気は整っていても細部の指定が足りないことがあります。

HTMLコードをプレビューする方法を探している段階なら、まずはひとつのHTMLファイルを確実に表示できる状態を作るのがおすすめです。そこで表示確認の流れが分かれば、CSSやJavaScriptを追加した時も、どこで問題が起きているか切り分けやすくなります。

HTML Previewの入れ方

CursorはVS Codeに近い操作感のエディターなので、HTMLプレビューも拡張機能を使って整えるのが分かりやすいです。左側の拡張機能エリアからHTML Preview系の拡張機能を検索し、目的に合うものを入れる流れになります。

ただし、拡張機能名や画面表示はバージョンや提供元によって変わることがあります。似た名前の拡張機能もあるため、インストール前に説明文、更新状況、使い方を確認してください。正確な情報は公式サイトや拡張機能ページをご確認ください。

プレビュー系機能の選び方

✅ 入れ方の流れは、だいたい次のように考えるとスムーズです。拡張機能を検索し、インストールし、HTMLファイルを開いた状態でコマンドパレットからプレビュー関連のコマンドを実行します。うまく表示できたら、画面分割でコードと並べるとかなり見やすいです。

拡張機能を入れたのに表示されない場合は、まず対象ファイルがHTMLとして保存されているかを確認してください。ファイル名が未保存のままだったり、拡張子が違ったりすると、プレビュー対象として認識されないことがあります。地味ですが、ここでつまずくケースは多いです。

HTML Previewは便利ですが、すべての環境で同じ動きをするとは限りません。CSSやJavaScriptの動作までしっかり確認したい場合は、外部ブラウザやLive Preview、必要に応じて開発サーバーでの確認も組み合わせると安心です。

プレビューを開くショートカット

プレビューを開く時にまず覚えたいのは、コマンドパレットです。Windowsなら一般的にCtrl + Shift + P、MacならCmd + Shift + Pで開き、そこからPreviewやOpen Previewのようなコマンドを探す流れが使いやすいです。

Markdownでプレビューを表示するショートカットとしては、VS Code系の環境ではCtrl + Shift + VやCmd + Shift + Vがよく使われます。ただ、これはMarkdown向けの操作として案内されることが多く、HTMLプレビューは入れている拡張機能によって呼び出し方が変わる点に注意です。

⌨️ よく使う操作の目安

✅ ショートカットが効かない時は、キーボード設定が他の機能と重なっている可能性があります。Cursorではショートカットを確認・変更できるので、普段よく使う操作は自分の環境で一度確認しておくといいですよ。

特に、HTML Preview系の拡張機能を入れている場合は、拡張機能側が独自のコマンド名を持っていることがあります。ショートカットだけで覚えようとすると混乱しやすいので、最初はコマンドパレットから開き、慣れてきたらショートカットを割り当てる順番が無難です。

ショートカットは作業効率を上げてくれますが、最初から全部覚える必要はありません。まずはコマンドパレット、画面分割、AIチャットの3つだけ押さえれば、HTMLプレビューまわりの作業はかなり回しやすくなります。

画面分割で並べて見る

CursorでHTMLプレビューを使うなら、コードと表示を並べるのがかなり便利です。左側にHTMLコード、右側にプレビューを置くと、見た目を確認しながらすぐ修正できます。AIで作ったHTMLを調整する時も、この形にしておくと差分に気づきやすいです。

画面分割は、エディターを左右に分けて使うイメージです。WindowsならCtrl + \、MacならCmd + \が目安になりますが、環境によって違うこともあります。操作できない場合は、メニューやコマンドパレットからSplit Editor系の項目を探してください。

️ 並べ方のおすすめ

✅ 並べて見る時は、まず保存のタイミングを確認してください。プレビューによっては、保存した瞬間に反映されるものもあれば、手動更新が必要なものもあります。変更したのに反映されない時は、コードが間違っているとは限らず、単に保存や更新ができていないだけの場合もあります。

画面分割は、初心者ほど使った方がいい機能です。コードだけを見ていると、閉じ忘れや余白の違和感に気づきにくいですが、表示を横に置くとすぐ分かります。とくにHTMLとCSSを同時に触る時は、作業時間の短縮にもつながりますよ。

AIにHTMLを作ってもらう場合も、生成されたコードをそのまま信じ切るのではなく、プレビューで見てから調整するのが大事です。AI回答を見る → 反映する → プレビューで確認する → 必要なところだけ直すという流れにすると、作業が散らかりにくくなります。

Markdownプレビューとの違い

MarkdownプレビューとHTMLプレビューは、見た目は似ていても目的が違います。Markdownプレビューは、Markdown形式で書いた文章がどう表示されるかを見るものです。一方でHTMLプレビューは、HTMLコードをWebページとしてどう見せるかを確認するために使います。

ここが混ざると、Ctrl + Shift + VやCmd + Shift + Vを押したのにHTMLが表示されない、ということが起きやすいです。ショートカット自体は便利ですが、今開いているファイルがMarkdownなのかHTMLなのかで動きが変わると考えてください。

MarkdownとHTMLプレビューの違い

✅ Markdownは、見出しや箇条書きを簡単な記法で書くための形式です。ブログの下書きやREADMEには向いていますが、ボタンの動きや細かいレイアウト確認には向きません。HTMLプレビューは、ページとしての見た目を確認する目的で使うものです。

HTMLコードをプレビューする方法を探しているなら、Markdown用のショートカットだけに頼らず、HTML用の拡張機能やLive Previewを確認するのが近道です。似ている言葉が多いので最初はややこしいですが、文章確認はMarkdown、ページ確認はHTMLと分けるとスッキリします。

仕事や副業でWeb制作を学びたい場合、この違いを早めに理解しておくと後が楽です。CursorはAIでHTMLを作れるのが強みですが、最後に判断するのはプレビューで見たあなた自身です。見た目と動作を確認しながら進めることで、AIを使ったコーディングもかなり実用的になります。

CursorのHTMLプレビュー活用術

CursorでHTMLプレビューを使う目的は、ただ画面を開くことではなく、AIで作ったHTMLを見ながら直し、実用できる形に近づけることです。AI回答はたたき台として便利ですが、表示確認を挟まないと、余白・画像・リンク・スマホ表示の違和感に気づきにくくなります。

ここでは、AI回答でHTMLを作るところから、選択範囲の修正、Live PreviewやCursor Browserの使い分け、表示されない時の確認点まで整理します。仕事や副業でWeb制作を学びたい人も、まずはこの流れを押さえると使いやすいですよ。

AI回答でHTMLを作る

Cursorの強みは、AIチャットに自然な言葉で依頼してHTMLを作れるところです。たとえば「プロフィールページのHTMLを作って」「見出し、説明文、ボタンを入れて」など、作りたい画面を文章で伝えると、HTMLのたたき台を提案してくれます。

ただし、ざっくりした依頼だけだと、AIは一般的な構成を出しやすくなります。あなたが作りたいものに近づけるには、目的・見た目・出力範囲をセットで伝えるのがコツです。特にHTMLだけほしいのか、CSSも一緒にほしいのかは最初に分けておくと後で直しやすいです。

AIに伝えると精度が上がる内容

✅ 依頼文の考え方としては、「何を作るか」だけでなく「どんな条件で作るか」まで入れるのが大事です。たとえば、HTMLコードをプレビューする方法を試したいだけなら、まずは小さなサンプルを作る方が向いています。いきなり大きなページを作ると、どこで崩れたのか分かりにくくなります。

AIが出したHTMLは、反映前に差分を見て、問題なさそうなら適用します。その後、CursorのHTMLプレビューで表示を確認し、見た目が意図と違うところだけ追加で直していく流れが現実的です。AI回答を見るだけで終わらせず、必ずプレビューで確認する。ここがかなり重要です。

選択範囲をAIで直す

すでにHTMLがある場合は、ファイル全体をAIに投げるより、直したい部分だけを選んで依頼する方が扱いやすいです。Cursorでは、選択した範囲に対してAIに修正を頼めるため、ボタン部分だけ、見出し部分だけ、カード部分だけといった細かい直しができます。

選択範囲を絞るメリットは、余計な変更が入りにくいことです。AIに広い範囲を渡すと、頼んでいない場所まで整えようとする場合があります。初心者のうちは親切に見えるかもしれませんが、あとでCSSやレイアウトがズレる原因にもなります。

✏️ 選択範囲で頼みやすい修正例

✅ 依頼する時は、「この部分をもっと良くして」よりも、「この選択範囲のボタン文言だけ変更」「HTML構造は変えずにクラス名を整理」のように、変えてよい範囲をはっきりさせると安定します。AIへの指示は、短くても具体的な方が通りやすいです。

修正後は、差分を確認してから反映します。赤や緑で変更箇所が見える場合は、どこが削られ、どこが追加されたかを見てください。よく分からないまま反映すると、後で戻すのが面倒です。迷ったら、変更を小さく分けて進めるのがいいですよ。

最後に、選択範囲の修正でもプレビュー確認は必須です。コード上ではきれいに見えても、実際の画面では余白が詰まりすぎたり、スマホ幅でボタンが折り返したりすることがあります。選ぶ、頼む、差分を見る、プレビューするの流れをセットにしておきましょう。

Live Previewを使う場合

Live Previewは、HTMLやCSSの変更を確認しながら作業したい時に便利な方法です。単体のHTMLファイルや静的なページなら、保存した内容をプレビュー側に反映しやすく、コードと画面のズレをすぐ見つけられます。

特に、HTMLとCSSを同時に直している時はLive Previewが役立ちます。文字色、背景色、余白、画像サイズなどは、コードだけ見ても感覚がつかみにくいですよね。表示を見ながら直せると、作業のテンポがかなり変わります。

Live Previewが向く場面

✅ 一方で、Next.jsなどのWebアプリを扱う場合は、Live Previewだけではなく開発サーバーを起動して確認する形になることがあります。ターミナルでプロジェクトを動かし、指定されたローカルURLをブラウザで開く流れです。ここはプロジェクトによって違うので、正確な情報は公式サイトをご確認ください。

Live Previewで表示されているからといって、すべての動作が本番と同じとは限りません。リンク、フォーム、JavaScriptの動き、外部データの読み込みなどは、別途ブラウザで確認した方が安心です。あくまで見た目を素早く確認するための手段として考えると使いやすいです。

作業の流れとしては、AIでHTMLを作る、Live Previewで見る、気になる部分を選択してAIで直す、再度プレビューする、という回し方が合っています。小さく確認しながら進めることで、初心者でも原因不明の崩れに悩みにくくなります。

Cursor Browserで確認する

Cursor Browserは、Cursor内でWebページを確認するためのブラウザ機能として使えます。通常の外部ブラウザに近い確認だけでなく、AIエージェントと組み合わせた操作確認やデバッグに使える場面があります。

WebアプリやUIの確認では、ページを見ながらクリック、入力、表示の崩れなどを確認したいことがあります。Cursor Browserを使うと、エディターから離れずに画面を確認しやすくなります。作業中にブラウザとエディターを行き来する負担を減らせるのは助かりますよね。

Cursor Browserで見たいポイント

✅ Cursor Browser周辺の機能は、Cursorのバージョンによって画面や名称が変わる可能性があります。ビジュアルエディタ系の機能が使える環境では、ブラウザ上の要素を選んで調整し、その変更をコードに反映する流れもあります。ただし、利用可否や操作方法は最新確認が必要です。

Cursor Browserを使う時も、最終確認を1つの画面だけで済ませない方が安心です。特に公開するページや仕事で使うページなら、外部ブラウザでも表示を見て、スマホ幅や別ブラウザでの見え方も確認したいところです。

AIとCursor Browserを組み合わせると、画面を見ながら修正依頼をしやすくなります。ただ、AIが提案した変更はそのまま採用せず、差分とプレビューを見て判断してください。見た目の便利さと確認の慎重さはセットです。

表示されない時の確認点

CursorでHTMLプレビューが表示されない時は、いきなり難しい原因を疑うより、基本から順に見た方が早いです。多くの場合、保存忘れ、拡張子の違い、プレビュー機能の未選択、CSSや画像パスの間違いなど、シンプルなところで止まっています。

まず確認したいのは、対象ファイルがHTMLとして保存されているかです。未保存の新規ファイルや、別の形式のファイルを開いている場合、プレビューが期待通り動かないことがあります。次に、拡張機能が有効になっているか、コマンドパレットから正しいプレビューコマンドを選べているかを見ます。

✅ 表示されない時の確認リスト

✅ CSSだけ反映されない場合は、HTML自体は表示できているけれど、CSSファイルの読み込みに失敗している可能性があります。画像が出ない場合も同じで、画像ファイルの場所や名前がズレていることが多いです。大文字と小文字の違いで動かない環境もあるので、ここも確認してください。

Webアプリの場合は、開発サーバーが起動していない、別のポートを見ている、ターミナルでエラーが出ているといった原因もあります。プレビュー画面だけを見ていても分からないので、ターミナルの表示やエラーメッセージも一緒に見ましょう。

それでも原因が分からない時は、問題を小さく分けるのがおすすめです。まずは1枚の簡単なHTMLだけ表示できるか確認し、次にCSS、画像、JavaScriptの順で足していくと切り分けやすいです。仕事で使う重要なページの場合は、最終的な判断は専門家にご相談ください。

CursorのHTMLプレビューまとめ

CursorのHTMLプレビューは、AIでコードを作る人ほど使った方がいい機能です。AIの回答は便利ですが、表示結果まで保証してくれるわけではありません。実際の画面で見て、必要なところを直すことで、使えるHTMLに近づきます。

特に大事なのは、プレビュー方法を1つに決め打ちしないことです。単体HTMLならHTML PreviewやLive Preview、Webアプリなら開発サーバーやCursor Browserというように、作っているものに合わせて選ぶとムダが減ります。

1. HTMLプレビューは表示確認の入口
   コードを書いたら、まず画面で確認する流れを作る

2. AI回答はたたき台として使う
   生成されたHTMLは差分を見てから反映し、必ずプレビューする

3. 選択範囲の修正で余計な変更を減らす
   ボタン、見出し、カードなど、直したい部分だけをAIに渡す

4. Live Previewは静的HTMLに便利
   色、余白、配置を見ながら直したい時に使いやすい

5. Cursor BrowserはUI確認に向いている
   クリックやフォームなど、操作を含めた確認に使える

6. 表示されない時は基本から見る
   保存、拡張子、拡張機能、ファイルパス、開発サーバーを順に確認する

✅ 最初は、HTML PreviewかLive Previewで小さなHTMLファイルを表示するところから始めるのがいいと思います。そこに慣れてから、AIチャット、選択範囲修正、Cursor Browserへ広げると、操作がごちゃつきにくいです。

CursorでHTMLプレビューを使いこなせると、AIに作らせるだけでなく、自分で確認して直せる状態に近づきます。Web制作やAI活用を学ぶうえでも、この「見ながら直す」流れはかなり大事です。

記事作成にあたり参考にさせて頂いたサイト

• 【Cursor入門２】画面の見方のコツ伝授！AIエディターでプログラミング入門！｜動画紹介｜Tech千一夜｜ソフトウェアの作り方チャンネル
• youtube.comの記事
• ブラウザ上で直接UIを編集！Cursorの新機能「ビジュアルエディタ」を試してみた | MESCIUS.devlog – メシウス株式会社
• x.comの記事
• 【Cursor入門１】AIと一緒にシステム開発「Cursor」始めよう！｜動画紹介｜Tech千一夜｜ソフトウェアの作り方チャンネル
• 「Cursor」で爆速コーディングを目指す4つのコツ | SkillhubAI（スキルハブエーアイ）
• 【初心者向け】AIコードエディタ「Cursor」をWeb制作で使う方法を解説 – 株式会社DOL
• youtube.comの記事
• Reddit – Please wait for verification
• Cursor 【はじめからそうやって教えてくれればいいのに！】

当サイトについて

当サイトでは、インターネット上に散らばるさまざまな情報を収集し、AIを活用しながら要約・編集を行い、独自の切り口で見解を交えながらわかりやすい形でお届けしています。 情報の整理・編集にあたっては、読者やオリジナル記事の筆者へご迷惑をおかけしないよう、細心の注意を払って運営しておりますが、万が一、掲載内容に問題がある場合や修正・削除のご要望がございましたら、どうぞお気軽にお問い合わせください。 迅速に対応をさせていただきます。 その際には、該当記事の URLやタイトルをあわせてお知らせいただけますと、より速やかに対応 することができますのでそちらもご協力いただけますと大変幸いでございます。 今後とも当サイトをよろしくお願いいたします。