Web制作ラボ

CodePenアカウントの作成方法【HTML、CSS、JS】

Web制作ラボ

前回はCodePenの使い方についてご紹介しました。

【CodePenの使い方を解説】簡単に使えて学習効率アップ!
HTMLやCSS、JavaScriptを勉強している皆さんならば、以下の様な埋め込みを目にされた経験...

上の記事でお伝えした通り、CodePenを最大限に活用するにはアカウント作成(無料)が必須になります。大して難しい作業ではありませんが、念のため画像付きでアカウント作成の手順をお伝えします。

では、サクッと行ってみましょう!

CodePenのアカウント(無料)作成手順

1.CodePenのサイトにアクセス

まずは下記のリンクからCodePenのサイトへGO。

CodePen

こんな感じのサイトです。

英語だらけで少し後ずさりしてしまいますが、怪しいサイトでは無いのでビビらずに進みましょう。

2.真ん中左にあるSign Up(登録申し込み)ボタンを押す

真ん中左にある緑色のボタンをクリックします。(右上のボタンでもOK)

3.SNSアカウントかメールアドレスで登録

Sign Upボタンを押すと登録画面に飛びます。

SNSアカウント(Twitter、GitHub、Facebook)またはメールアドレスを入力して登録します。

メールアドレスで登録したい場合は「Sign Up with Email」のボタンをクリックすると、入力フォームが出現するようになっています。

4.登録完了画面

登録が完了するとこちらの画面に飛びます。

ここの画面でプロフィールの入力を求められますが、スルーしても構いません
※CodePenはSNSとしての側面も持つためプロフィールの入力が求められるのです。

5.CodePenからメールが届く

CodePenからこの様なメールが届きます。

真ん中上あたりにある「Click to Verify Email」をクリックすればメール認証が完了します。

6.登録完了

以上で登録完了です。お疲れ様でした。

これで自分が書いたコードをブログに埋め込んだり、他人が公開しているコードを自分でいじって勉強したりできます。

「popular」ページがおもしろい

トップメニューの「Popular」をクリックすると、世界中で投稿されたペン(コード)の中から人気のコードが見られます。

かっこいいコードからユニークなコードまで色々。眺めているだけでも楽しめます。

おわりに

今回はCodePenのアカウント作成についてご紹介しました。

無料で登録できてHTML、CSS、JavaScriptの勉強が捗るcodePen、おすすめです!

トップページへ戻る