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で確認することが出来ます。今回は、ユーザ登録をして簡単に触ってみる流れをまとめました。
お疲れさまでした。