HTMLエディターとリアルタイムプレビュー はブラウザだけで使える
本格的な HTML エディター＆プレビューツールです。
HTML・CSS を直接書いてウェブページを作れる、ブラウザベースのビジュアルエディターです。
コードを入力するとリアルタイムでプレビューが更新されるので、効率よくページ制作できます。
コードを入力するたびに自動でプレビューが更新。変更がすぐに確認できます。
HTMLファイルを開いて編集し、ダウンロードできます。ドラッグ＆ドロップにも対応。
コードを書かなくても、ボタンひとつで要素を挿入・ページ設定を変更できます。
PC・タブレット・スマホの3サイズでプレビューを切り替えて表示確認できます。
編集を元に戻す・やり直せます。最大200ステップの操作履歴を保持します。
キーワード検索で該当箇所にジャンプし、一括置換もできます。大小文字区別も選択可能。
各エリアにマウスを乗せると説明が表示されます。
タブをクリックして、作業に合わせたレイアウトに切り替えられます。
コードとプレビューを左右に並べて表示。中央の仕切りをドラッグして幅を調整できます。
デフォルトエディターのみを全画面表示。コードに集中したいときに使います。
コーディングプレビューのみを全画面表示。完成イメージの確認に最適です。
確認右側にパネルを表示。ボタンで要素を挿入・スタイルを設定できます。
ビジュアルはじめての方はこの手順でお試しください。
デザインタブ を開いて「テンプレート」から好みのデザインを選ぶか、 エディターに直接 HTML を入力してください。 ファイル → 開く から既存の HTML ファイルを読み込むこともできます。
コードを入力すると自動でプレビューが更新されます。 プレビューエリア上部の 🖥 PC タブ スマホ ボタンでデバイスサイズを切り替えながら確認しましょう。
ツールバーの ＋ タグ挿入 ドロップダウンで HTML タグを挿入できます。 テキストを選択してから B / I / U ボタンを押すと、太字・斜体・下線タグで囲めます。 文字色や背景色は A ▐ ボタンから設定可能です。
Ctrl + S で保存（ブラウザのローカルストレージに保存）、
⬇ DL ボタンで index.html としてダウンロードできます。
↗ 開く ボタンで別タブに表示して動作確認もできます。
よく使う操作はキーボードから素早くできます。
知っておくとさらに快適に使えるヒントです。
エディターに HTML ファイルを直接ドラッグ＆ドロップすると、そのままファイルを読み込めます。ファイルメニューから開く手間が省けます。
ツールバーの { } ボタンを押すと、インデントが崩れた HTML をきれいに整形します。コピペしたコードを整理するのに便利です。
30秒ごとにブラウザのローカルストレージに自動保存されます。ページを閉じて再度開いても、前回の内容が復元されます。
分割モードでは、エディターとプレビューの間にある仕切りをドラッグして、それぞれの表示幅を自由に変えられます。
ツールバーの A ボタンでテキストを選択した状態でクリックすると、カラースウォッチから色を選んで span タグで囲めます。
検索モーダルで文字を入力して Enter を押すと次の一致箇所に移動できます。「全て置換」で一括変換も可能です。