自分のブログなどで、サンプルコードとその結果を表示して解説することがありますが、ツールとして便利な「CodePen（コードペン）」を使用してみたのでご紹介します。
実際に「CodePen」を利用してみて HTML、CSS、JavaScript などを利用したコードと、その結果を一目で確認できる仕様がとても便利でしたので、その感想含めて解説していきたいと思います。
CodePenのメリット
サイト上で何かをしたいと思っている人は、検索からヒットして自身のWebサイトやブログを閲覧してくれています。何かを解決したいという人に対して、その解決策となる「How to」を記述して説明をしますが、実際の「記述とプレビューが別々のページになってしまっている」ことが良くあります。
mororeco も簡単なプレビューであれば、画像を掲載して「こうなりますよ～」って感じで解説していますが、実際のところ「コードとプレビュー」が別物であるというちょっとした距離が現実味を薄めてしまっているなぁと感じます。mororeco では今のところ、デモはページで見れるようにしていますが、このCodePenを利用することにより、コードとプレビューを一画面でお見せできるので、内容にもよりますが解説が可能なものについてはCodePenで表示してみようと思います。
前置きが長くなりましたが、それではCodePenについて見ていくことにしましょう。
CodePenとは
CodePenは、HTML・CSS・JavaScriptをプレビュー表示しながら作業ができるWebサービスのひとつです。また、記述したコードをWEBサイトに埋め込んだり、WordPressで貼り付けたりすることも可能です。さらには、自分書いたコードだけでなく、他の人が打ち込んだコードも表示ができる優れもの。
CodePenでできること
主に以下のようなプレビュー機能や埋め込み公開などが、簡単に出来るのが特徴です。
- ブラウザ上でHTML、CSS、JavaScriptをプレビュー表示しながら編集
- コードをWEBサイトに埋め込む
- コードの作成と公開
登録方法
まずはじめに、CodePenを利用するには会員登録が必要となっています。（※無料で利用可）
CodePenにアクセスし、中央にある緑色の「Sign Up」をクリックしてください。
Choose a Plan から一番左の「free」の枠の「Sign Up」をクリックします。
Free -Welcome to CodePen.-のフォームに以下の４項目を記入してください。
- YOUR NAME（名前を記入）
- CHOOSE A USERNAME（ユーザーネームを記入）※任意で名前をつける
- EMAIL（メールアドレスを記入）
- CHOOSE PASSWORD（パスワードを記入）
すべての項目を入力したら「Submit」ボタンをクリックします。
その後、Thanks for signing up, ・・・の画面が表示されますが、フォームには何も記入せずに「Save & Continue」ボタンをクリックします。
これで、登録は完了です！
登録が完了したら実際にログインして利用していきます。
トップ画面の左下「Log In」をクリックしてログイン画面を表示します。
USERNAME OR EMAILに、先ほど登録した「ユーザーネームまたはメールアドレス」を入力、PASSWORDに「パスワード」を入力し「Log In」します。
CodePenの使い方
会員登録が完了したら、トップ画面の左カラムにある「Creat」ボタンをクリックし「Pen」をクリック。※CodePenでは、ひとつのプロジェクトを「Pen」と呼んでいます。
すると下画像のような画面が開かれます。左側が「HTML」、中央が「CSS」、右側が「JavaScript」の入力画面です。
そして、画面下にはコードのプレビュー表示がされ、プレビュー表示を見ながらコードを書ける仕様になっています。
新たに作成したPenに名前を付けましょう。デフォルトでは「Untitled」になっていますので、”ペンのマーク”をクリックし「名前」を付けます。
ここまで確認できたらひとまず「Save（保存）」しておきましょう。画面上部の雲のマーク「Save」が保存ボタン。
画面表示の切り替え
右上にある「Change View」というボタンで、画面の配置を変えることができます。横に並べたり、縦に並べたりはお好みで切り替えてご利用ください。
コードをWebサイトに埋め込む方法
コードをWordPressに貼り付ける方法（プラグインなし）
コードをWordPressに張り付ける方法（プラグインを利用）
