ブラウザ上で動作テスト!スタイリッシュな「CODEPEN」
web
HTML・CSS・Javascriptのコードが公開!使える・共有できる・ストックできるWEBサービス「CODEPEN」はすごい!

こんにちは。web事業部の青木です。
今回は、web制作者必見!
ブラウザ上でwebの動作の確認ができる便利なサービス「CODEPEN」についてご紹介します!
制作中にこんなことありませんか?
・このjsを新しく使おうかなぁって思っているけど、どんな動きするのかな?
・ちょっとした備忘録としてコードをストックしたい
・ブログやwebサイトでコードを共有したい
それぞれ新規ファイルを作って、書いて、ブラウザにアップして・・・
もう面倒ですよね。
そんな時に便利なのが「CODEPEN」
入力することでリアルタイムな動作確認から、
コードのストック・ブログなどで共有が簡単にできるんです!
CODEPEN登録方法
CODEPEN http://codepen.io/
まず、一番上のリンクからcodepenのサイトへ飛んで
右上のSign Upをクリックしユーザー登録します。
クリックすると月額有料プランがありますが、その下に無料プランがあるので、
この「Sign Up」をクリックします。
あとは、名前など基本情報を入力したら登録完了です。
CODEPENの使い方
新しくコードを書くには、トップページ右上の「New Pen」をクリック。
あとは、html・CSS・JSとそれぞれのスペースがあるので、そこに記述するだけで結果がリアルタイムに反映できます!
保存については、右上に「Save」を押すことで保存も可能です。
▼実際にソースを記述したものがこちら
See the Pen vLoVyb by yuka aoki (@ua) on CodePen.
CODEPENの共有方法
記述したものを保存すると、画面下にメニューバーが表示されますのでそこの右下、Exportをクリックします。
そうすると3つ、メニューが表示されるのでその中のEmbed Penをクリック。
これで下のコードをコピペしてブログに貼り付けるだけで完成です!
記述したコードがリアルタイムで表示できるツールはあっても、ブログ等に貼り付けるサービスはあまりないと思うので、
ぜひみなさんもご活用してくださいね!