2019年11月30日土曜日

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

HTML Previewer in web browser

当ブログの著者は HTML を手入力する機会が多いのですが、入力した内容を確認するために
  • HTML テキストエディターに入力する
  • テキストファイルを保存する
  • Web ブラウザーでテキストファイルを開いて結果を確認する (2回目以降はファイルをリロードする)
という手順を踏んでいました。
PC にプリインストールされているメモ帳と Web ブラウザーさえあればすぐに Web ページを作ることができるのですが、 メモ帳と Web ブラウザーの往復が面倒でした。
そこで、Web ブラウザーだけで HTML を即座にプレビュー表示する HTML を作って上記の手順を不要にしました。
文字の置換機能付きです。
必要としている方がいらっしゃったらご自由にお使いください。
blog.fujiu.jp 手入力した HTML を即座にプレビュー表示する HTML


環境

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


ソース



使い方

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


関連ブログ

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


0 件のコメント:

コメントを投稿