CodePenのアカウント作成方法

CodePenのアカウント作成方法

2024年12月20日 /最終更新:2025年02月14日

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

CodePenのアカウント作成方法

CodePenのアカウント作成方法

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

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

  1. CodePenを開く
  2. Sign Upボタンをクリックする
  3. Sign Up with Googleボタンをクリックする
  4. Googleアカウントにログインする
  5. Gmailに届いたメールを確認する
  6. Click to Verify Emailボタンをクリックする
  7. CodePenを開く

1. CodePenを開く

まずは以下のリンクからCodePenのWebサイトを開いてみましょう。

CodePen

2. Sign Upボタンをクリックする

上部グリーンの「Sign Up」ボタンをクリックします。

3. Sign Up with Googleボタンをクリックする

「Free Welcome to CodePen.」の画面が表示されたら、「Sign Up with Google」ボタンをクリックします。

4. Googleアカウントにログインする

ログイン画面が表示された場合

Googleアカウントのログイン画面が表示されたら、メールアドレスおよびパスワードを入力してログインを行います。

アカウントの選択画面が表示された場合

ログイン画面が表示されずGoogleアカウントの選択画面が表示されたら、
Googleアカウントを選択してログインをします。

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

CodePenへのログインで使用したGoogleアカウントにログインすると、
そのGmailアドレスに「Welcome to CodePen」という題名で、CodePenからメールが届きます
Gmailを開いて確認しましょう。

Gmail 受信トレイ

6. Click to Verify Emailボタンをクリックする

届いたメール内にある「Click to Verify Email」ボタンをクリックします。

7. 自動的にCodePenのページに遷移する

自動的にCodePenのページに遷移し、CodePenの登録が完了します。
ブロックのポップアップ(英語)がいくつか表示されるので、確認してNextをクリックします。

8.Homeにページ遷移する

左上のロゴをクリックするとHomeにページ遷移します。
一度確認してみましょう。