CodePenのはじめかたとコーディング作成手順

CodePenとは「HTML/CSS/JavaScriptのフロントエンドコーディングをWebブラウザ上で行い、共有出来るサービス」です。

誰でも無料で簡単に始めることができます。

CodePenを使うことで

• ブラウザ上でWebページを制作
• 自分が作成したWebページの共有
• WordPressなどの外部ページでソースの共有

が簡単に行うことができます。

今回の記事ではCodePenの始めかたとプロジェクトの作成方法を紹介します。

CodePenへ登録

まずはCodePenへの登録方法を紹介します。

CodePenではFacebookやGithubなどで登録もすることができます。

今回はメールアドレスで登録したいと思います。

まずは「https://codepen.io/」にアクセスして、「Sign Up for Free」をクリックします。

次に「Sign Up with Email」を選択します。

次に各種情報を入力して「Submit」します。

以下の画面が表示されたら「Save & Continue」を選択します。

以下の画面が表示されれば登録は完了です。

「The Pen EditorでCodePen」で初回チュートリアルが始まります。

必要ない人は飛ばしても構いません。

最後にCodePenからメールが届いているのでチェックをしておきましょう。

届いたメールで「Click to Verify Email」と選択します。

CodePenでプロジェクト（Pen）の作成

登録したアカウントでプロジェクトを作成します。

CodePenではプロジェクトのことを「Pen」と呼びます。

トップページの「Create」⇒「Pen」を選択します。

以下の赤字のように「タイトル」を入力し、「HTML」、「CSS」、「JavaScript」を書くことができます。

最後に作成し終わったら「Save」を忘れないようにしましょう。