HTML,CSS,JavaScriptをリアルタイムでプレビューする
以前作成したものなのですが、HTMLやCSS,JavaScriptをリアルタイムでプレビューするWEBページとなっています。
左側にプレビューが表示されており、右側にはHTMLのコードが表示されています。
右側のHTMLコードを編集すると左側のプレビューがリアルタイムで更新されます。
逆にプレビュー画面を編集すると、HTMLコードが書き換わる仕組みになっています。
以下のリンクより開くことができます。
保存する機能はありませんので、リロードすると消えてしまいますが遊んでみてください。
コードのメモ
左側のプレビューは空のdivタグで、右側はただのテキストボックスです。
右側のテキストボックスが編集された場合には、innerHTMLを利用して、テキストエリアに入力されているHTMLコードをそのままプレビュー用のdivタグの中に流し込んでいます。
プレビュー用のdivタグにはcontenteditable=”true”を指定しており、divタグの中のHTMLを自由に編集ができるようになっています。ここをプレビュー画面を編集した際には、このプレビュー用のdivタグ内のHTMLを右側のコード用テキストエリアにそのまま流し込んでいます。
コメント