CODEPENでコードをWebサイトに埋め込む方法!

HTMLやCSS、JavaScripなどのコードをWebサイトに表示したいときには、「CODEPEN」というサービスがとっても便利です。

本記事では、コードをWebサイトに埋め込んで表示する方法をご紹介します。

CODEPENとは

CODEPENとは、ブラウザ上でサクッとコードが書けて、更に確認もパッとできる優れたサービスです。利用できる対象コードは、HTML・CSS・JSの3種類です。

こんな感じです↓↓↓

See the Pen
ErjjEY
by ふくねこ (@fukuneko7777)
on CodePen.

アカウントを取得する

CODEPENを利用してコードの確認するのはすぐ出来ますが、Webサイトに埋め込んで表示するには、まずアカウントを取得する必要となります。

アカウントの取得手順は、次の通りです。

手順①

・まずは、CODEPENにアクセスしてください。
・次に「Sign Up」ボタンをクリックしてください。

手順②

・メールもしくは、Twitter、GitHub、Facebookのアカウントも利用することもできますので、お好みの方法で登録してください。

手順③

・次のようなメールがCODEPENから届きます。
・ボタン(もしくはURL)をクリックしてCODEPENのサイトにアクセスしましょう。

コードをWebサイトに表示する

今回は、細かな設定などは置いておいて、Webサイトにコードを埋め込むための基本的な手順を紹介します。

Penの作成と保存

手順①

・「Create」プルダウンボタンから「Pen」を選択する。

MEMO
CODEPENでは、1つのプロジェクトをPenと呼んでいます。
 

手順②

・表示したいコードを記述してください。
・記述できたら、「Save」ボタンをクリックして保存してください。

埋め込みコードの生成

手順①

・Penを保存すると、画面右下に「Embed」ボタンが表示されますので、クリックしてください。

手順②

・次の様なウィンドウが表示されますので、任意に設定してください。
・最後に、画面下部の“Copy&Paste Code”欄に表示されているコードをコピーしてください。これがWebサイトで埋め込むコードになります。

①Theme
⇒ここは表示プレビューのテーマ(色)を設定する場所です。テーマは、3種類あります。

 

— Default —

 

— Light —

 
— Dark —

②Default State
⇒Webサイトにコードを埋め込んで表示した際、すぐに実行させないで、ボタンの押下で実行させる場合は、ここにチェックを入れます。


③Editable State
⇒埋め込んだコードを編集可能にする設定です。※有料版機能

手順③

・コピーしたコードは、表示したいWebサイトのhtmlにペースト(貼り付け)を行って、完了です。
 
 
試しに埋め込んだコードがこれです。

See the Pen
ErjjEY
by ふくねこ (@fukuneko7777)
on CodePen.

まとめ

何かサクッとテストしたいときに使えますし、コードを保存できるのでとても使い勝手がいいサービスだと思います。私自身まだまだ勉強することが多いので、これから積極的に使っていこうと思います!