My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

CodePenを使ってみました

f:id:sntkk3:20170903152651p:plain

CodePenを使ってみました

以前から話題になっていたCodePenを使ってみました

ちょっと戸惑うところもありましたので、以下より、その使い方(ユーザー登録から本ブログにコードを貼り付けるまでの手順)をご紹介いたします。

1. ユーザー登録

 まず、以下のサイトでユーザー登録を行います。
 codepen.io

 1.1. トップページ画面右上の「Sign Up」をクリックします。

 1.2. 「Choose a Plan」画面で「JoinCodePlanFree」ボタンをクリックします。

 f:id:sntkk3:20170903153404p:plain

 
 1.3. 必要項目(名前、ユーザーネーム、メールアドレス、パスワード)を入力し、送信します。
 f:id:sntkk3:20170903153957p:plain

 
 ユーザー登録は以上で完了です。
 (登録したメールアドレス宛に登録完了メールが送信されていますので、ご確認ください。)

2. コード作成

2.1. 「New Pen」をクリックします
 f:id:sntkk3:20170903150937p:plain

2.2. 「HTML」「CSS」「JS」の各エディタにコードを入力します。
 f:id:sntkk3:20170903114520p:plain

3. 作成したコードをブログなどのWEBページに埋め込み、共有する

3.1. 前述のエディタ画面にて、画面右下の「Embed」ボタンをクリックします。
 ⇒ 以下「Embed This Pen」ダイアログが表示されます。

 ここでは、「Default State」にチェックを入れて進めます。
 f:id:sntkk3:20170903152006p:plain

3.2. 下欄に生成された「Copy & Paste Code」をコピーし、埋め込みたいページに貼り付けます。 
 f:id:sntkk3:20170903151831p:plain


以上が、CodePenユーザー登録からブログへのコード埋め込みまでの手順となります。


また、上記手順にて埋め込んだコードが以下になります。
「Run Pen」をクリックしてご確認ください。

See the Pen WEmbZa by Tokiko (@tkksn) on CodePen.


いかがでしょうか。
はてなブログでもSyntaxHighliterのようなコード埋め込みと同時プレビューが簡単に実現できてしまう CodePen、凄いです!