お仕事ハック

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

投稿日:

こんにちは!シミダイ(@shimidai2100)です。

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

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

CodePenを使うことで

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

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

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


CodePenへ登録

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

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

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

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

CodePenのトップ画面からSign Upする

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

Sign Up with EmailでメールからCodePenのアカウント登録

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

アカウント名、公開ユーザー名、メールアドレス、パスワードを入力してSubmit

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

自分のProfileを入力。今回は何も入力せずに保存する。

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

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

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

The Pen EditorでCodePenの使い方を確認

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

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

CodePenのメールアドレス確認

CodePenでプロジェクト(Pen)の作成

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

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

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

CodePenでPenを新規作成する

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

作成したPenの記入方法

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

スポンサードリンク

関連記事

-お仕事ハック

Translate »

Copyright© shimidai2100 , 2019 All Rights Reserved.