CodePenのアカウント作成方法

CodePenのアカウント作成方法

2024年12月20日 /最終更新:2025年09月16日
読了目安:約3分

CodePenのアカウントの作成方法を紹介します。

CodePenのアカウント作成方法

CodePenのアカウント作成方法

今回はブラウザ上でCodePenのアカウントの作成方法を紹介します。
なお、すでにGoogleアカウントの作成が完了している前提で解説します。

以下の手順で登録を進めましょう。

キャプチャ付き解説:CodePenアカウント作成方法

  1. CodePenを開きSing Upボタンをクリックする。
  2. Sign Up with Googleボタンをクリックし、いずれかの方法でGoogleアカウントにログインする。
  3. Gmailに届いたメールを確認し、Click to Verify Emailボタンをクリックして、
    CodePenのページに遷移し「You’ve verified your account!」と表示されたら登録完了。

01. CodePenを開きSing Upボタンをクリックする。

まずは以下のリンクからCodePenのWebサイトを開き、上部右上グリーンの「Sign Up」ボタンをクリックします。

CodePen

02. Sign Up with Googleボタンをクリックし、いずれかの方法でGoogleアカウントにログインする。

Free Welcome to CodePen.」の画面が表示されたら、「Sign Up with Google」ボタンをクリックします。
Googleアカウントのログイン画面が表示されたら、メールアドレスおよびパスワードを入力してログインを行います。
またログイン画面が表示されずGoogleアカウントの選択画面が表示されたらGoogleアカウントを選択してログインします。
プライバシーポリシーと利用規約を確認し、問題なければ「次へ」ボタンをクリックしましょう。
いきなり編集画面に遷移すると思いますが、一旦タブを閉じます。

03. Gmailに届いたメールを確認する

選択したGoogleアカウントにログインすると、「Welcome to CodePen」という題名でメールが届いているはずです
Gmailを開いて確認し、届いたメール内にある「Click to Verify Email」ボタンをクリックします。
CodePenのページに遷移し「You’ve verified your account!」と表示されたら登録完了です。

Gmail 受信トレイ