CursorでHTMLを書く完全ガイド【2026年最新】：プレビュー・コーディング・Design Modeの使い方を徹底解説
室谷今回はCursorでHTMLを扱う話をしましょう。「cursor html」で検索してくる人が増えていて、.AI（ドットエーアイ）コミュニティでも「CursorでフロントエンドのHTMLってどう書くの？」って声をよく聞くんですよね。
テキトー教師ですよね。講座で受講生さんに「Cursorって何に使えますか？」って聞かれたとき、「HTMLも全然いけます」って答えると驚かれることが多いんですよ。
Pythonとかバックエンドのイメージが強いのかもしれないですが、実はフロントエンドのコーディングの方が体験がわかりやすいくらいです。
Pythonとかバックエンドのイメージが強いのかもしれないですが、実はフロントエンドのコーディングの方が体験がわかりやすいくらいです。
室谷そうなんですよ。MYUUUでもランディングページの初期ドラフトをCursorで作ることがあって、HTMLとCSSを一気に出してもらって、プレビューで確認しながら修正していく流れが結構スムーズなんです。
テキトー教師コミュニティのメンバーさんからよく聞くのが、「HTMLのプレビューってどうやって見るんですか？」という質問ですね。エディタ内でリアルタイムにプレビューを見ながら書きたいというニーズがあって、それができるかどうかが最初の壁になっています。
室谷これ、Cursor 3.0から組み込みブラウザが入ったので、状況が変わりましたよね。以前はLive Serverの拡張機能を使うのが定番でしたが、今はCursor自体にブラウザが統合されていて・・・
テキトー教師整理すると、CursorでHTMLをプレビューする方法は大きく3つあります。
- 組み込みブラウザ（Cursor 3.0の新機能）: Cursor 3の Integrated Browserでローカルのサーバーを開く
- Live Server拡張機能: VS Code互換の拡張機能で、HTMLファイルをブラウザで自動更新
- Simple Browser: VS Code標準機能としてエディタ内にWebビューを表示
室谷使い方は人によって好みが分かれますが、まずそれぞれどう使うかを押さえましょうか。
HTMLプレビューの3つの方法
テキトー教師一番シンプルなのは、まずLive Serverから始めることですね。CursorはVS Codeをベースにしているので、VS Codeの拡張機能がそのまま使えます。
Live ServerはVS Code拡張機能マーケットプレイスから「Live Server」と検索してインストールするだけです。
Live ServerはVS Code拡張機能マーケットプレイスから「Live Server」と検索してインストールするだけです。
室谷インストールしたら、HTMLファイルを右クリックして「Open with Live Server」を選べばブラウザが開きます。その後はHTMLやCSSを編集するたびにブラウザが自動更新されます。
これ、体験的にはかなり快適ですよね。
これ、体験的にはかなり快適ですよね。
テキトー教師ファイルを保存するたびにリロードしてくれるのが便利です。Cursorで編集しながら、別ウィンドウかモニターにブラウザを出しておくと、変更がリアルタイムに反映されるのを確認しながら作業できます。
室谷Cursor 3.0の組み込みブラウザは、それをエディタ内でできるようにしたイメージですね。ローカルのサーバーを立てておいて、Cursor内のブラウザタブで開く形です。
エージェントがコードを変えたら、その変更をブラウザで確認して・・・というループが全部Cursor内で完結するのがいいんですよ。
エージェントがコードを変えたら、その変更をブラウザで確認して・・・というループが全部Cursor内で完結するのがいいんですよ。
テキトー教師特にエージェントモードで作業するときに便利ですよね。エージェントにHTMLを生成してもらって、そのまま組み込みブラウザで確認して、「ここのボタンの色がおかしい」とフィードバックして修正してもらう。
このサイクルがエディタから出ずにできます。
このサイクルがエディタから出ずにできます。
室谷ただ、組み込みブラウザはCursor 3のAgents Windowの機能なので、まずCursorを最新バージョンにアップデートする必要があります。Cmd+Shift+PでAgents Windowを開いて、そこから使う形ですね。
HTMLコーディングの実際の流れ
テキトー教師では、実際にCursorでHTMLを書く流れを見ていきましょう。コミュニティのメンバーさんに教えるときに使っているシンプルなパターンがあって・・・
室谷聞かせてください。
テキトー教師まず最初に、チャットで「ランディングページのHTMLを作って」というざっくりしたプロンプトで始めるよりも、「このサイトのHTMLとCSSを1ファイルで作って。ヘッダー、ヒーロー、3カラムのフィーチャーセクション、フッターを含めて」という構造的なプロンプトの方が、Cursorの応答精度が上がります。
室谷構造を先に言語化するんですね。これ、MYUUUのエンジニアもやっていて、「ざっくり作って」より「こういうセクション構成で」と指定した方が一発で使えるコードが出てくることが多いです。
テキトー教師HTMLとCSSの関係でいうと、Cursorには2つのスタイルがあります。1つは
チャットで「HTMLとCSSを別ファイルで」と指定するだけで対応してくれます。
index.htmlに全部書くインライン形式で、もう1つはstyles.cssを分けるファイル分割形式です。チャットで「HTMLとCSSを別ファイルで」と指定するだけで対応してくれます。
室谷コード生成後のプレビュー確認が大事で、そこで「ここのmarginを調整して」「このフォントをもっと大きく」みたいなフィードバックをチャットに入れると、ピンポイントで修正してくれるんですよね。
テキトー教師CursorのTabキーによる補完もHTML/CSSで強くて、HTMLタグを書き始めると次に来る属性や構造を予測して補完してくれます。この機能はコーディングのスピードを体感的に3〜5倍くらい上げてくれますよね。
室谷Tab補完はCursorが最初に有名になった機能ですよね。HTMLのclass名とか、繰り返しのパターンとかを察知して補完してくれる。
一度慣れると他のエディタに戻れなくなります・・・
一度慣れると他のエディタに戻れなくなります・・・
Cursor Visual EditorとDesign Mode
テキトー教師Cursor 3.0の新機能で特に注目なのが、Design Modeですね。ブラウザに表示されたUIを直接クリックして「このボタンを直して」「この部分の色を変えて」みたいな指示が出せます。
室谷これ、HTMLのどの要素かわからなくてもいいのがすごくて。ビジュアル的に「ここ」と指定できる。
海外のプロダクトで以前からあったアイデアですが、Cursorに組み込まれたのは大きいですね。
海外のプロダクトで以前からあったアイデアですが、Cursorに組み込まれたのは大きいですね。
テキトー教師使い方は、Agents WindowでCmd+Shift+DでDesign Modeに入って、Shift+ドラッグで選択範囲を指定、Cmd+LでチャットにUI要素を追加するという流れです。コードを読まずに「見た目」で指示できるのは、特にHTMLが得意じゃない人にとって大きいです。
室谷「cursor visual editor」で検索してくる人は、Figmaのようなビジュアル操作でCSSを直接編集したいというニーズを持っていることが多いです。現時点ではDesign Modeがその入り口になっていますが、コードとビジュアルを繋ぐ体験はまだ発展途上ですね。
テキトー教師整理すると、2026年4月時点のCursorのビジュアル編集機能はこうなっています。
| 機能 | 説明 | 使えるプラン |
|---|---|---|
| Design Mode | ブラウザ上のUI要素を直接指定してAIに修正指示 | Pro以上 |
| Integrated Browser | エディタ内蔵ブラウザでローカルサイトを確認 | Cursor 3.0以上 |
| Tab補完（HTMLモード） | HTMLタグ・属性・CSSプロパティの予測補完 | 全プラン（制限あり） |
| エージェントモード | HTMLコード全体を自律的に作成・修正 | Pro以上 |
室谷Hobbyプラン（無料）でもTab補完は使えるので、まずHTMLコーディングの体験として試すのはアリですね。本格的にエージェントを使うならProから、という感じです。
CursorでHTMLをプレビューする：具体的な設定手順
テキトー教師具体的な設定を順番に説明しましょう。まず、Live Server拡張機能を使う方法から。
室谷これが一番手軽ですよね。Cursorの拡張機能パネルを開いて「Live Server」で検索してインストール、それだけです。
テキトー教師インストール後はHTMLファイルを開いた状態で、右下のステータスバーに「Go Live」というボタンが出てきます。それをクリックするか、右クリックメニューから「Open with Live Server」を選ぶと、ブラウザが自動的に開きます。
室谷デフォルトはポート5500で立ち上がるので、ブラウザでは
http://localhost:5500でアクセスできます。プロジェクトのルートにHTMLがある場合はそのまま見えますが、サブフォルダにある場合はパスを指定します。テキトー教師もう1つの方法、Simple Browserはインストール不要でCursorにもともと入っています。コマンドパレット（Cmd+Shift+P）で「Simple Browser」と入力すると「Simple Browser: Show」が出てきます。
URLを入力するとエディタ内タブでWebページが開きます。
URLを入力するとエディタ内タブでWebページが開きます。
室谷Simple BrowserはHTTPサーバーが必要なので、単体のHTMLファイルをそのまま開くのには向かないですが、Live Serverと組み合わせて「localhost:5500をSimple Browserで開く」という使い方ができます。
テキトー教師整理すると、HTMLプレビューの手順はこうです。
- Live Serverをインストール
- HTMLファイルを開いて「Go Live」をクリック
- ブラウザまたはSimple Browserで
localhost:5500を開く - HTMLを編集・保存するたびにリアルタイムで更新される
室谷Cursor 3.0の組み込みブラウザを使う場合は、Agents Windowを開いてからエージェントにタスクを投げると、エージェントが自分でブラウザを操作しながら確認してくれます。完全にハンズオフで進めたいときに向いています。
cursor for html：フロントエンド開発でのCursor活用
テキトー教師「cursor for html」という検索キーワードで来る人は、「Cursorってフロントエンド開発でも使えるの？」という疑問を持っていることが多いです。結論から言うと、全然使えますし、バックエンドよりも体験が直感的だと感じる人も多いです。
室谷HTMLとCSSって、コードを書いた結果がビジュアルとして見えるじゃないですか。「こんなコードを書いたらこう見える」というフィードバックが視覚的に即座にわかる。
これが初心者にとってすごくやりやすいんですよね。
これが初心者にとってすごくやりやすいんですよね。
テキトー教師講座で「最初に何を作ればいいですか？」と聞かれたら、「自己紹介ページをHTMLで作ってみて」とよく言います。CursorのチャットにURLかスクショを見せて「こういうレイアウトで自己紹介ページを作って」と指示するだけで、ファーストドラフトは5分かからないですから。
室谷HTMLのコーディングはAIとの相性がいいんですよ。繰り返しパターンが多い（カード、リスト、ナビゲーション等）し、変更の影響範囲がわかりやすい。
バックエンドだと動作確認に時間がかかりますが、HTMLは変えたらすぐ見えますから・・・
バックエンドだと動作確認に時間がかかりますが、HTMLは変えたらすぐ見えますから・・・
テキトー教師それと、CursorはJavaScriptとの組み合わせも強くて、HTMLにインタラクション（クリックしたらモーダルが開く等）を追加するときも、チャットで「このボタンをクリックしたら〜というモーダルを出して。バニラJSで」みたいに指示すると、HTMLとJSをセットで書いてくれます。
室谷フレームワークなしのバニラHTMLで作業するのも、CSSフレームワーク（Tailwindとか）を使うのも、ReactのJSXも全部対応できますね。「Tailwindで書いて」「React + TypeScriptで」という指定ができます。
テキトー教師HTML、CSSの学習目的でCursorを使う人も増えていて、Cursorが「なぜこういうCSSを書いたか」を説明しながらコードを出してくれるので、解説付きの参考書みたいに使えるんですよね。
cursor html プレビュー：よくある質問とトラブル対処
室谷ここからよくある質問に答えていきましょう。「HTMLのプレビューができない」「Live Serverが動かない」みたいな質問がよく来るので・・・
テキトー教師Q1は「Live Serverをインストールしたのに「Go Live」が出てこない」ですね。これは大抵、HTMLファイルを開いていないことが原因です。
Live ServerはHTMLファイルを開いたときだけステータスバーに「Go Live」が表示されます。
Live ServerはHTMLファイルを開いたときだけステータスバーに「Go Live」が表示されます。
室谷あとは、CursorをVS Codeと別のウィンドウで開いている場合に、VS Code側でLive Serverが動いていてCursorで二重にポートを使おうとして失敗するケースもありますね。ポート5500が既に使われているとエラーになります。
テキトー教師Q2は「HTMLを保存したのにブラウザが更新されない」。Live Serverの自動保存との相性が原因のことが多いです。
Cursorの「自動保存（Auto Save）」がOnになっていると、編集中に都度保存されてLive Serverが頻繁にリロードされることがあります。手動保存（Cmd+S）に戻してみると安定することがあります。
Cursorの「自動保存（Auto Save）」がOnになっていると、編集中に都度保存されてLive Serverが頻繁にリロードされることがあります。手動保存（Cmd+S）に戻してみると安定することがあります。
室谷Q3は「cursor html code（HTMLコード全体の生成）は何文字くらい出せますか？」という質問で、これはCursorが使うモデルのコンテキストウィンドウに依存します。Cursorで使えるClaude系やOpenAI系のフロンティアモデルを選んでいれば数千行のHTMLでも一気に生成できますが、あまり大きなファイルは「セクションを分けて」生成する方が品質が上がります。
テキトー教師Q4はHTMLのコーディングで「cursor html hand」のような検索をする人が気になるポイントで、これはCSSのカーソルプロパティ（
cursor: hand または cursor: pointer）の話ですね。CursorというAIエディタのCursorと、CSSのcursorプロパティが混同されることがよくあります。室谷CSSの
cursorプロパティをCursorで書く、みたいな話ですね。「ボタンにホバーしたときにポインターカーソルを表示したい」という場合は、チャットで「このボタンにポインターカーソルを設定して」と言えばcursor: pointerを追加してくれます（笑）テキトー教師Q5は「cursor html tumblr」という検索で来る人についてで、おそらくTumblrのテーマカスタマイズをCursorでやりたいというニーズだと思います。TumblrのHTMLテーマのカスタマイズも、Cursorのチャットでファイルを開いて「このテーマのフォントを変えて」とか「サイドバーを削除して」という指示でできます。
cursor html editor：Cursorはビジュアルエディタとして使える？
室谷「cursor html editor」という検索は、DreamweaverやAdobe XDみたいなビジュアルHTMLエディタとしてCursorを使えるか、というニーズが含まれていると思うんですよね。
テキトー教師正直に言うと、2026年4月時点では、Cursorはテキストベースのコードエディタがメインで、DreamweaverやFigmaのようなビジュアルドラッグ&ドロップの編集はできません。ただ、Design Modeが入ってきたことで「ビジュアル的に指示してコードを生成する」という体験は近づいています。
室谷方向性としては、「コードを書かなくてもHTMLを作れる」より「コードとビジュアルを行き来しながら高速に作れる」を目指している感じですね。海外のプロダクト事例を見ていると、AIコーディングツールはビジュアルエディタに完全に移行するんじゃなくて、コードとUIを繋ぐインターフェースになっていく感じがします・・・
テキトー教師まさにそこが本質で、「コードを書く」から「AIと会話してコードを育てる」に変わってきている。HTMLのビジュアルエディタへのニーズって、実は「コードを書かずに結果を見たい」ということじゃないですか。
CursorはAIとの会話でそれを実現しようとしています。
CursorはAIとの会話でそれを実現しようとしています。
室谷MYUUUでも「デザインのモックをFigmaで作って、それをCursorに渡してHTMLに変換する」というフローをよく使っていて。Figmaのスクリーンショットを貼って「これをHTMLで実装して」と言うだけで、かなり近いコードが出てきます。
テキトー教師FigmaからのHTML変換は受講生さんにもよくやってもらうワークで、初めて試した人の反応が大体「こんなに近いのが出るんですか？！」ですね。デザインカンプの再現度が思ったより高い（笑）
cursor html css：スタイリングとCSSファイルの管理
室谷HTMLとCSSをCursorで管理するときのベストプラクティスについても触れておきましょうか。
テキトー教師プロジェクトの構成として、小規模なプロジェクトなら1ファイル（index.html + inlineスタイル）でも問題ないですが、ある程度の規模になったら
index.htmlとstyles.cssを分けてもらう方が、Cursorのエージェントが変更を管理しやすくなります。室谷CursorにはCURSOR.mdというプロジェクト設定ファイル（CLAUDE.mdと同様の概念）があって、そこに「このプロジェクトはHTMLとCSSを分けて管理する。クラス名はBEM記法を使う」みたいなルールを書いておくと、エージェントがそのルールに従って書いてくれます。
テキトー教師CSSフレームワークを使う場合も、Cursorのチャットで「このプロジェクトはTailwind CSSを使っています」と一言書くだけで、以後Tailwindのクラスで書いてくれます。明示的に指定しないとVanilla CSSで書くことが多いので、最初に宣言しておくのが大事です。
室谷CSSデバッグもCursorが得意で、「このdivが中央揃えにならない」「このflexboxのレイアウトがおかしい」みたいな問題は、コードをチャットに貼って聞くと大抵1回で解決しますよね。
テキトー教師CSSはエラーメッセージが出ないので（見た目がおかしくなるだけで）、人間がデバッグするのが難しいんですよ。Cursorに「このレイアウトでHeaderが左に寄ってしまうのを直して」と見た目を言葉で説明するだけで直してくれる。
CSSのデバッグ補助としての価値が高いです。
CSSのデバッグ補助としての価値が高いです。
まとめ：CursorでHTMLを使い倒す
室谷まとめましょう。CursorでHTMLを扱う基本的なフローは、チャットでHTML構造を指示して生成してもらい、Live Serverかintegrated browserでプレビューしながら、チャットでフィードバックして修正する、というサイクルです。
テキトー教師2026年4月時点のCursorのHTMLコーディングのポイントをまとめるとこうなります。
- プレビュー: Live Server拡張機能が最も手軽。Cursor 3.0以降はIntegrated Browserも使える
- コード生成: チャットで構造を具体的に指定するとクオリティが上がる
- Design Mode: Cursor 3.0の新機能。ブラウザ上のUI要素を直接クリックして修正指示できる
- Tab補完: HTMLタグ・属性・CSSプロパティをリアルタイム補完。コーディング速度が大幅に向上
- CSS管理: Tailwind等のフレームワーク指定はチャットの冒頭に宣言する
室谷「cursor for html（CursorでHTML作業をする）」という観点では、単なるコード生成だけじゃなくて、プレビュー確認→フィードバック→修正というイテレーションの速度がカギですね。そのサイクルをCursorがどれだけ速くできるか、というところが競合エディタとの差になってきています。
テキトー教師HTMLというシンプルなフォーマットから始めるのは、Cursorを初めて使う人にも、エージェントモードを試したい人にも、おすすめの入り口です。Visual Studioや他のエディタからの移行もスムーズですから、まず試してみてください。
室谷前回はCursorのGemini統合の話でしたが、今回のHTML・CSS・プレビューの話と組み合わせると、デザインの指示からコードの生成・確認まで全部Cursor内で完結できる絵が見えてくると思います。ぜひ試してみてください。
FAQ
Q: CursorのHTMLプレビューは無料プランでも使えますか？
A: Live Server拡張機能を使ったプレビューは、Cursorの無料プラン（Hobby）でも使えます。Live ServerはCursorとは独立した拡張機能で、Cursorのプランとは関係なくインストール・利用できます。Cursor 3.0のIntegrated Browserは機能の一部ですが、基本的にはCursorをインストールしていれば使えます。
Q: HTMLファイルをダブルクリックするだけでCursorのプレビューが見られますか？
A: Cursorのエディタ内でHTMLファイルを開くだけではプレビューは見られません。プレビューを見るには、Live ServerやSimple BrowserなどでHTTPサーバーを経由する必要があります。ローカルのHTMLファイルをそのままエディタプレビューで見る機能はありません（一部のMarkdownプレビューとは異なります）。
Q: cursor html viewerのようなツールを別に使うべきですか？
A: 特別なHTMLビューアーを別途使う必要はありません。Live ServerとCursorの組み合わせで十分なプレビュー環境が作れます。または、Cursor 3.0のIntegrated BrowserをHTMLビューアーとして使うこともできます。外部ツールを減らして開発環境をシンプルに保つ方が長期的に管理しやすいです。
Q: CursorのDesign Modeでモバイル表示のプレビューもできますか？
A: Cursor 3.0のIntegrated BrowserではブラウザのDevToolsと同様にビューポートサイズを変更できます。モバイル表示（スマートフォンサイズ）でのプレビューも確認可能です。
Q: cursor render html（HTMLのレンダリング確認）をエージェントに自動でやらせることはできますか？
A: Cursor 3.0のエージェントモードでは、エージェントがIntegrated Browserを操作してHTMLのスクリーンショットを撮り、修正するというループを自律的に行えます。「このHTMLをブラウザで確認しながら、デザインが整うまで修正して」という指示を出すと、エージェントが確認→修正のサイクルを自動で行います。
