No.162

どこでも手軽にHTML画面をテストしたい！

　移動中とか会議中にちょっとJavascriptの挙動やCSSを確認したくなることがある。

　以前、コードをオンラインでテストできる環境についてはメモしたけど、HTML、Javascript、CSS別に記述ができて確認できるサイトを探したのでメモ。

　使いやすいJSFiddle、出力が便利なCodePenの2つを紹介。

JSFiddle

• HTML、Javascript、CSSを分けて記述できる。
• 「Run」ボタンを押さないと実行されないので、コードの実行タイミングをこちらで決めることができる。
• ソース及び実行結果が見やすい。
• console.logが使えない。

CodePen

　右上の「+ New Pen」を押して実行。

• console.logが使える。
• HTML、Javascript、CSSを分けて記述できる。
• 入力を中断すると勝手に実行されるので入力途中のソースも実行されてしまう。