CodePenは、ブラウザ上を利用して、HTML,CSS,javascriptのコードを記述し、リアルタイムで表示を確認することができるサービスです。下記のようなことが出来ます。

  • ソースコード(HTML,CSS,Javascript)、それを利用したときの見た目を共有できる。
  • Javascirptの外部ライブラリを利用できる。
  • 他のサイトに共有できる。
  • 他人のソースコードを見ることができる。
  • 無料で利用できることができる。

※ 登録しなくてもコードを書くことはできますが、登録することでソースコードを保存、編集ができるようになるので登録して利用するのがよいです。

CodePenに登録する

ユーザ登録をします。
https://codepen.io/にアクセスします。

　左上にあるSigin Upボタンをクリックします。

下記の画面が表示されます。Twitter, GitHub, Facebookなどのアカウントと連携できます。メールでも登録することが可能です。

登録は、以上になります。

CodePenを使ってみる

簡単なソースを書いてみます。

下記のようにHTML、CSS、Javascriptとリアルタイムで見れる画面が表示されます。

ここで色々実験できます。

書いたコードを他のサイトへ埋め込む

下記のEmbedボタンをクリックします。

下記のような画面が表示されます。

copy & Paste CodeにあるHTMLをコピーします。下記は、CodePenで作成したものを貼り付けたものです。

See the Pen CodePen_sample by kawashima@asb (@hidekazu-kawashima) on CodePen.

こんな形で簡単に埋め込むことが出来ました。過去に作ったコードもDashboardで確認することが出来ます。今回は、ユーザ登録をして簡単に触ってみる流れをまとめました。

お疲れさまでした。