![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/08/codepen-logo-320x198.png)
【CodePenの使い方を解説】簡単に使えて学習効率アップ!
HTMLやCSS、JavaScriptを勉強している皆さんならば、以下の様な埋め込みを目にされた経験が一度はあるはず。 See t...
Contents
CodePenのアカウント(無料)作成手順
1.CodePenのサイトにアクセス
まずは下記のリンクからCodePenのサイトへGO。 CodePen こんな感じのサイトです。![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/08/CodePen-top-800x395.png)
2.真ん中左にあるSign Up(登録申し込み)ボタンを押す
真ん中左にある緑色のボタンをクリックします。(右上のボタンでもOK)![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/08/CodePen-top-sign-up-800x395.png)
3.SNSアカウントかメールアドレスで登録
Sign Upボタンを押すと登録画面に飛びます。![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/08/codepen-sign-up-800x390.png)
![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/08/codepen-sign-up-gif-500x468.gif)
4.登録完了画面
登録が完了するとこちらの画面に飛びます。![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/08/codepen-sign-up-finish-800x390.png)
5.CodePenからメールが届く
CodePenからこの様なメールが届きます。![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/08/codepen-mail-800x407.png)
6.登録完了
以上で登録完了です。お疲れ様でした。 これで自分が書いたコードをブログに埋め込んだり、他人が公開しているコードを自分でいじって勉強したりできます。「popular」ページがおもしろい
トップメニューの「Popular」をクリックすると、世界中で投稿されたペン(コード)の中から人気のコードが見られます。![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/08/codepen-popular-800x469.gif)