ブラウザ上で動作テスト!スタイリッシュな「CODEPEN」

web

HTML・CSS・Javascriptのコードが公開!使える・共有できる・ストックできるWEBサービス「CODEPEN」はすごい!

codepen

こんにちは。web事業部の青木です。

 

今回は、web制作者必見!

ブラウザ上でwebの動作の確認ができる便利なサービス「CODEPEN」についてご紹介します!

 

制作中にこんなことありませんか?

・このjsを新しく使おうかなぁって思っているけど、どんな動きするのかな?

・ちょっとした備忘録としてコードをストックしたい

・ブログやwebサイトでコードを共有したい

 

 

それぞれ新規ファイルを作って、書いて、ブラウザにアップして・・・

もう面倒ですよね。

そんな時に便利なのが「CODEPEN」

入力することでリアルタイムな動作確認から、

コードのストック・ブログなどで共有が簡単にできるんです!

 

CODEPEN登録方法

 

c01

 

CODEPEN http://codepen.io/

 

まず、一番上のリンクからcodepenのサイトへ飛んで

右上のSign Upをクリックしユーザー登録します。

 

c02

 

クリックすると月額有料プランがありますが、その下に無料プランがあるので、

この「Sign Up」をクリックします。

 

c03

 

あとは、名前など基本情報を入力したら登録完了です。

 

 

CODEPENの使い方

 

c04

 

新しくコードを書くには、トップページ右上の「New Pen」をクリック。

 

c05

 

あとは、html・CSS・JSとそれぞれのスペースがあるので、そこに記述するだけで結果がリアルタイムに反映できます!

保存については、右上に「Save」を押すことで保存も可能です。

 

 

▼実際にソースを記述したものがこちら

 

See the Pen vLoVyb by yuka aoki (@ua) on CodePen.

 

 

CODEPENの共有方法

 

c06

 

記述したものを保存すると、画面下にメニューバーが表示されますのでそこの右下、Exportをクリックします。

そうすると3つ、メニューが表示されるのでその中のEmbed Penをクリック。

 

c07

 

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

 

 

 

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

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

関連コラム