みなさん、コウタロウです！！
HTMLやJavaScript、CSSを書いていてわからないことがあり
Googleで調べることがあります。
なんか使えそうなコードが書いてある記事にたどり着いても
そのコードでどのような見栄えなのか？どのように動くのか？が
コードを見ただけでは正直わかりづらいです。
コードと実際に動くプレビュー機能があればいいなといつも
感じていました。
それを実現するサイトがcodepen
【目次】
codepen
まずは、ページをご紹介。
HTML、JavaScript、CSSコードを共有できます。
他の人が書いたコードを参照したり、いいねしたり、コメント書いたりできます。
自分でコードを書いて共有するにはログイン登録が必要。
最初にサインアップする時に、プランが選べます。
基本、無料プランでOKです！！
どんな感じで使えるか？
では、早速。
ログイン登録して、コードを書いてみました。
お決まりの「Hello World!」
画面上部は、コードを書く部分。
画面下部は、プレビュー表示。
HTML、JavaScript、CSSをそれぞれ書けば、画面下部に
即時反映されます。
時間にして１，２秒後くらいです。
コードを書き足してセーブしました。
画面上部にあるSAVEボタンを押下でセーブできます。
セーブするとURLが発行されるのでそれをブログに貼れば
コードとプレビューを確認できるので、そのプレビューを見れば
Google検索からこのページに辿り着いた人がコードを使えるか
使えないかの判断ができますね。
Just a moment...
codepen.io
最後に
私の記事でコードを紹介する時にGistでコードを紹介していますが
Web系のコードであればこのcodepenのほうが便利そうです。
今後、Web系のコード紹介はcodepenを使うようにします！
コメント