Tips

CodePen で書いたコードを自分のWebサイトに埋め込む方法

投稿日:2018年4月2日 更新日:

CodePen とは、Web上で HTML, CSS, JavaScript を書いてすぐに結果を表示することができるサービスです。

結果を確認しながら、コードを書いたり修正できるので、ちょっとしたWebサイトのコードを試したい場合にとても便利です。本ページでは、CodePen で書いたコードを自分のWebサイトに埋め込む方法をご紹介します。

CodePen とは?

前述した通り、CodePen は「Web上で HTML, CSS, JavaScript を書いてすぐに結果を表示することができる」サービスです。

https://codepen.io/

画面右上の「Create」ボタンを押し、さらに「New Pen」を押すと、コードを入力する画面に遷移します。

※ ここで作成する1まとまりのコードを、「Pen」と呼びます。

「Create」ボタンを押します
コードを入力する画面です

簡単な説明を表にしました。

番号 説明
HTMLを書きます。
CSSを書きます。
JavaScriptを書きます。
結果が表示されます。

修正する毎に、コードがリロードされるようになっています。

類似サービス

この手のサービスは他にも「JSFiddle」や「jsdo.it」などがあります。

コードを自分のWebサイトに埋め込む方法

書いたコードを自分のWebサイトに埋め込むには、CodePen のアカウントを作成する必要があります。まだ作成していない場合は、CodePenのトップページ にある「Sign Up」ボタンからアカウントを作成することができます。

作成したアカウントでログインした後、上の方で説明したように、画面右上の「Create」ボタン → 「New Pen」から、新規の Pen を作成します。


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


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

bbb

テーマを選択します。

埋め込んだコードを表示した時にすぐに実行させず、ボタンを押して実行させたい場合は、ここにチェックを入れます。

埋め込んだコードを編集できるようにするかどうかですが、これは有料版の機能です。

埋め込みコードの種類は、この「HTML」方式が推奨されているので、ここがを選択します(デフォルトで選択されています)。

ここに出力されている埋め込みコードをコピーします。

あとは、自分のWebサイトに埋め込みコードを貼り付けるだけです。

サンプル

例として、以下に埋め込んでみました。いろいろ触ってみてください。

See the Pen EEEXoE by fit (@fitall) on CodePen.

おわりに

レンタルサーバーを借りれば、CodePen のような外部サービスを利用しなくても、自分のWebサイトで、HTML/CSS/JavaScript を試すことができます。しかし、それでも CodePen のようなサービスはお手軽ですし、自分のWebサイトに簡単に埋め込むこともできて非常に便利です。ちょっとしたテストや、コードの紹介を行う際には活用してみてはいかがでしょうか。

-Tips

執筆者:fitallright

関連記事

Windows で、.htaccess(先頭がドットで始まり拡張子を持たないファイル名の)ファイルを作成する方法

レンタルサーバーでは、.htaccess ファイルを使ってサーバー側の設定を変更することが許されているものが多くあります。 そこで、この機能を利用しようと思い Windows のエクスプローラー上で …

no image

ロリポップ!マネージドクラウドを使ってみた感想と記録

↑この記事から分かるように、2018年10月1日から12月31日までの間【ロリポップ!マネージドクラウドのご利用料金が全額無料】となります。 ここでは、ロリポップ!マネージドクラウド を使ってみた時の …

FTP でファイルダウンロードがエラーになる

FTP でサーバー上のファイルをダウンロードした時に、エラーが発生して失敗することがあります。 いろいろな原因が考えられますが、その1つはファイル名の長さです。 Windows の場合、ファイル名が …

【エックスサーバー】サイトを編集する時は、mod_pagespeed をオフにしましょう

2019年3月27日:「mod_pagespeed設定」機能の新規設定の受付が終了しました。 「mod_pagespeed設定」機能の新規設定の受付終了について – 2019/03/27 …

CGI と PHP(モジュール版) の違い

レンタルサーバーにおける「CGI」と「PHP(モジュール版)」の違いについて書きます。 目次1. 「CGI」と「PHP(モジュール版)」の共通点2. 両者の違いと「PHP(モジュール版)」の手軽さ1. …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」