CodePenは、ブラウザ上を利用して、HTML,CSS,javascriptのコードを記述し、リアルタイムで表示を確認することができるサービスです。下記のようなことが出来ます。
- ソースコード(HTML,CSS,Javascript)、それを利用したときの見た目を共有できる。
- Javascirptの外部ライブラリを利用できる。
- 他のサイトに共有できる。
- 他人のソースコードを見ることができる。
- 無料で利用できることができる。
※ 登録しなくてもコードを書くことはできますが、登録することでソースコードを保存、編集ができるようになるので登録して利用するのがよいです。
CodePenに登録する
ユーザ登録をします。
https://codepen.io/にアクセスします。
![](http://dev.appswingby.com/home/wp-content/uploads/2020/07/codepen.io_-1024x648.jpg)
左上にあるSigin Upボタンをクリックします。
![](http://dev.appswingby.com/home/wp-content/uploads/2020/07/登録画面-1024x132.png)
下記の画面が表示されます。Twitter, GitHub, Facebookなどのアカウントと連携できます。メールでも登録することが可能です。
![](http://dev.appswingby.com/home/wp-content/uploads/2020/07/codepen.io_accounts_signup_user_free-1024x615.jpg)
登録は、以上になります。
CodePenを使ってみる
簡単なソースを書いてみます。
![](http://dev.appswingby.com/home/wp-content/uploads/2020/07/Penを開く.png)
下記のようにHTML、CSS、Javascriptとリアルタイムで見れる画面が表示されます。
![](http://dev.appswingby.com/home/wp-content/uploads/2020/07/codepen.io_pen_-1024x615.jpg)
ここで色々実験できます。
書いたコードを他のサイトへ埋め込む
下記のEmbedボタンをクリックします。
![](http://dev.appswingby.com/home/wp-content/uploads/2020/07/右下のEmbedをクリック-1024x159.png)
下記のような画面が表示されます。
![](http://dev.appswingby.com/home/wp-content/uploads/2020/07/codepen.io_hidekazu-kawashima_pen_rNxdjPK-1-1024x615.jpg)
copy & Paste CodeにあるHTMLをコピーします。下記は、CodePenで作成したものを貼り付けたものです。
See the Pen CodePen_sample by kawashima@asb (@hidekazu-kawashima) on CodePen.
こんな形で簡単に埋め込むことが出来ました。過去に作ったコードもDashboardで確認することが出来ます。今回は、ユーザ登録をして簡単に触ってみる流れをまとめました。
お疲れさまでした。