こんにちは。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をクリック。

これで下のコードをコピペしてブログに貼り付けるだけで完成です！

記述したコードがリアルタイムで表示できるツールはあっても、ブログ等に貼り付けるサービスはあまりないと思うので、

ぜひみなさんもご活用してくださいね！