直接テキスト編集
見出し、本文、セル内テキストをプレビュー側で編集し、HTMLコード側へ反映します。
Preview page / before publish
HTML Visual Editor
HTMLコードとプレビューを並べて、文字・画像・リンク・テーブルをその場で調整できる小さなWeb編集ツール。公開前のページ修正を、もっと見た目で進められるようにします。
What it does
HTMLを見ながら、プレビュー側で直す
コードだけでは分かりにくい細かな崩れや文言変更を、画面上の要素選択からすばやく反映するための編集画面です。
画像とリンクの調整
選択中の画像src、alt、widthやリンクURLを、専用フィールドで整理できます。
テーブル編集
行や列の追加・削除、セル編集を、対象を見ながら扱えるようにします。
要素操作
段落、DIV、画像などを選択し、複製、削除、URL変更などの操作をまとめます。
幅プレビュー
SP、TB、PCの表示幅を切り替えて、公開前に見え方を確認できます。
保存とコピー
編集後のHTMLを保存・コピーし、既存ページへ反映しやすい形で取り出します。
Working screen
左にコード、右に実際のページ。
編集対象のHTMLを開くと、コードとプレビューを同時に確認できます。選択要素の情報も右側に出るので、画像やテーブルの修正箇所が見つけやすくなります。
- サンプルHTMLを読み込んで、編集の動きをすぐ確認
- 選択中のタグや行番号を表示
- Undo / Redoで試しながら修正
Download
zipを展開して、index.htmlを開くだけ。
HTML Visual Editor はインストール不要の1ファイルWebツールです。ダウンロードしたzipを展開し、ブラウザで index.html を開けば、誰でも自分のPC上でHTML編集を試せます。
Use flow
公開前チェックの流れに合わせる
新規制作ページにも、既存サイトのちょっとした修正にも使えるよう、確認から反映までを短くします。
HTMLを開く
対象ページのHTMLを読み込み、コードと見た目を同時に表示します。
画面で選ぶ
見出し、画像、リンク、表など、直したい要素をプレビュー上で選択します。
内容を直す
文言、属性、テーブル構造を編集し、画面の変化を確認します。
反映用に保存
確認後のHTMLを保存して、公開作業に渡せる状態にします。
想定する使いどころ
サービスページの文言差し替え、画像altの修正、テーブルの追加、スマホ幅の見え方確認など、公開直前の細かな調整に向いています。
<section class="hero"> <h1>プレビューで直接編集</h1> <p>変更内容をHTMLへ反映</p> <img src="sample.png" alt="サンプル画像"> </section>
このまま配布ページとして使えます。
zipダウンロード、ブラウザ試用、使い方説明まで入れました。内容と見た目を確認してOKなら、既存のホームページ関係フォルダへ組み込めます。