手入力した HTML を即座にプレビュー表示する HTML の作り方

HTML Previewer in web browser

当ブログの著者は HTML を手入力する機会が多いのですが、入力した内容を確認するために

• HTML テキストエディターに入力する
• テキストファイルを保存する
• Web ブラウザーでテキストファイルを開いて結果を確認する (2回目以降はファイルをリロードする)

という手順を踏んでいました。
PC にプリインストールされているメモ帳と Web ブラウザーさえあればすぐに Web ページを作ることができるのですが、 メモ帳と Web ブラウザーの往復が面倒でした。
そこで、Web ブラウザーだけで HTML を即座にプレビュー表示する HTML を作って上記の手順を不要にしました。
文字の置換機能付きです。
必要としている方がいらっしゃったらご自由にお使いください。

環境

• Windows 10
• Firefox 70 と Internet Explorer 11 で確認済み

ソース

使い方

画面上部のテキストエリアに HTML を入力すると画面下部にプレビューされます。
Firefox や Internet Explorer の F12 キー開発ツールと併用するとデバッグがはかどります。
「保存する」ボタンで入力した内容をファイルに保存できます。
Web ブラウザーを終了したりリロードすると入力した内容が消えてしまう点は要注意です。

関連ブログ

JavaScriptをWebコンテンツを見ながらデバッグする [Intenet Explorer] [firefox]
JavaScript でグラフを作る方法 (Chart.js)
HTMLソースのミスやエラーを素早くチェックする