フリーランス チャレンジ!!

フリーランス チャレンジ!!

週休4日制に俺はなる!

【codepen】Web画面の公開、動きも確認できる便利サイト

f:id:ksakae1216:20160731075401p:plain

みなさん、コウタロウです!!

 

HTMLやJavaScript、CSSを書いていてわからないことがあり

Googleで調べることがあります。

 

なんか使えそうなコードが書いてある記事にたどり着いても

そのコードでどのような見栄えなのか?どのように動くのか?が

コードを見ただけでは正直わかりづらいです。

 

コードと実際に動くプレビュー機能があればいいなといつも

感じていました。

 

それを実現するサイトがcodepen

 

【目次】

 

codepen

まずは、ページをご紹介。

codepen.io

 

HTML、JavaScript、CSSコードを共有できます。

 

他の人が書いたコードを参照したり、いいねしたり、コメント書いたりできます。

 

自分でコードを書いて共有するにはログイン登録が必要。

最初にサインアップする時に、プランが選べます。

基本、無料プランでOKです!!

 

どんな感じで使えるか?

では、早速。

 

ログイン登録して、コードを書いてみました。

お決まりの「Hello World!」

f:id:ksakae1216:20160731074645p:plain

 

画面上部は、コードを書く部分。

画面下部は、プレビュー表示。

 

HTML、JavaScript、CSSをそれぞれ書けば、画面下部に

即時反映されます。

時間にして1,2秒後くらいです。

 

コードを書き足してセーブしました。

画面上部にあるSAVEボタンを押下でセーブできます。

 

セーブするとURLが発行されるのでそれをブログに貼れば

コードとプレビューを確認できるので、そのプレビューを見れば

Google検索からこのページに辿り着いた人がコードを使えるか

使えないかの判断ができますね。

https://codepen.io/ksakae1216/pen/PzBZzJ

 

最後に

私の記事でコードを紹介する時にGistでコードを紹介していますが

Web系のコードであればこのcodepenのほうが便利そうです。

 

今後、Web系のコード紹介はcodepenを使うようにします!