CodePen とは、Web上で HTML, CSS, JavaScript を書いてすぐに結果を表示することができるサービスです。
結果を確認しながら、コードを書いたり修正できるので、ちょっとしたWebサイトのコードを試したい場合にとても便利です。本ページでは、CodePen で書いたコードを自分のWebサイトに埋め込む方法をご紹介します。
CodePen とは?
前述した通り、CodePen は「Web上で HTML, CSS, JavaScript を書いてすぐに結果を表示することができる」サービスです。

画面右上の「Create」ボタンを押し、さらに「New Pen」を押すと、コードを入力する画面に遷移します。
※ ここで作成する1まとまりのコードを、「Pen」と呼びます。


簡単な説明を表にしました。
番号 | 説明 |
---|---|
![]() |
HTMLを書きます。 |
![]() |
CSSを書きます。 |
![]() |
JavaScriptを書きます。 |
![]() |
結果が表示されます。 |
修正する毎に、コードがリロードされるようになっています。
類似サービス
この手のサービスは他にも「JSFiddle」や「jsdo.it」などがあります。
コードを自分のWebサイトに埋め込む方法
書いたコードを自分のWebサイトに埋め込むには、CodePen のアカウントを作成する必要があります。まだ作成していない場合は、CodePenのトップページ にある「Sign Up」ボタンからアカウントを作成することができます。
作成したアカウントでログインした後、上の方で説明したように、画面右上の「Create」ボタン → 「New Pen」から、新規の Pen を作成します。

できあがりましたら、画面右下の「Embed」をクリックします。

すると、埋め込みコードを生成するウィンドウが表示されます。

テーマを選択します。
埋め込んだコードを表示した時にすぐに実行させず、ボタンを押して実行させたい場合は、ここにチェックを入れます。
埋め込んだコードを編集できるようにするかどうかですが、これは有料版の機能です。
埋め込みコードの種類は、この「HTML」方式が推奨されているので、ここがを選択します(デフォルトで選択されています)。
ここに出力されている埋め込みコードをコピーします。
あとは、自分のWebサイトに埋め込みコードを貼り付けるだけです。
サンプル
例として、以下に埋め込んでみました。いろいろ触ってみてください。
See the Pen EEEXoE by fit (@fitall) on CodePen.
おわりに
レンタルサーバーを借りれば、CodePen のような外部サービスを利用しなくても、自分のWebサイトで、HTML/CSS/JavaScript を試すことができます。しかし、それでも CodePen のようなサービスはお手軽ですし、自分のWebサイトに簡単に埋め込むこともできて非常に便利です。ちょっとしたテストや、コードの紹介を行う際には活用してみてはいかがでしょうか。