【実務で使えるツール紹介】CodePen
スニペットの検証ツールとして重宝するのが、CodePenというツールです。CodePenを使えば、DOMOページにも使えますし、とっても便利なので、今回はCodePenの登録から簡単な使い方をご紹介します。
1)「CodePen」にアクセスし、右上の「Log In」をクリックします。
![codepen](../assets/img/tools/codepen/1.png)
2)新規登録をします。Twitter、Github、Facebookのアカウントでも登録できます。
![codepen](../assets/img/tools/codepen/2.png)
3)登録しログインすると、次のような画面に移ります。いろいろな人が作ったスニペット、作品をみることができて面白いです。自分で作成したいときは、右上の「Create」をクリックします。
![codepen](../assets/img/tools/codepen/3.png)
4) するとメニューが出てくるので、「New Pen」をクリックします。
![codepen](../assets/img/tools/codepen/4.png)
5) HTML/CSS/JSと区切られた入力画面が現れます。これらを自由に使って、スニペットなどを試すことができるのです。「Change View」でHTML/CSS/JSの配置を変えられたり、タイトルも自由に変えられたりします。
![codepen](../assets/img/tools/codepen/5.png)
ほかにもいろいろな機能がそろっているツールなので、今後も紹介していければと思います。