CodePenの使い方(知らない人向け)

## CodePenとは
[CodePen](https://codepen.io/)は、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービスです。

## CodePenの良いところ
- ソースコード、その表示を他のサイトに埋め込める(シェアできる)
- HTML,CSS,JSの外部ライブラリなども使用できる
- 他人のソースコードを見ることができる
- 基本**無料**で使うことができる

CSSやJSの挙動をシェア先で確認できるのがいいですね。


## CodePenの登録
CodePenを使用するには、ユーザー登録をする必要があります。
[https://codepen.io/](https://codepen.io/)にアクセスしましょう。
![スクリーンショット 2020-03-01 13.53.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/36e7cbd8-cb8d-8981-3186-1514bbe7e529.png)
画面右上の**SignUp**をクリックして登録します。

![スクリーンショット 2020-03-01 15.30.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/d82f04d3-a480-f8f1-07b1-da9ca00515ee.png)
登録せずとも画面左の**Start Cording**でコーディングきますが、登録をすることによって自分のソースコードを保存し、いつでも編集することができるようになります。

## CodePenの使い方
![スクリーンショット 2020-03-01 21.06.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/05466bc8-c0ca-b286-4c3e-5d35bb77f5cb.png)
登録が完了したら、画面左メニュー内のCREATE欄から**Pen**をクリック。
![スクリーンショット 2020-03-01 21.10.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/22b0e3f1-05db-a83f-9af9-f4a7d8fa1b8c.png)

真っさらなページが表示されます。
ここに直接HTML,CSS,JavaScriptを書き込んでいくと、画面下半分のエリアにリアルタイムでコードの内容が表示されていくことになります。

HTMLはお決まりの**DOCTYPEから記述する必要はなく**、bodyタグの中に書くイメージで大丈夫ですし、CSSを読み込む必要もありません。


**Save**ボタンを押すと保存され、**DashBoard**に格納されます。

### ライブラリの読み込み
CodePenのいいところは、リアルタイムで動くものを作れる他に、何と言ってもライブラリ等を読み込むことが可能なところです。
例えば、CSSでは**SCSS**、JS関連の**jQuery**や**Vue**なんかも使うことができます。

使い方は簡単で**Settings**ボタン、または言語名横の歯車ボタンを押すと設定画面が開かれます。
![スクリーンショット 2020-03-01 21.21.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/23653d5b-14c6-d97a-ac01-6d355c1400cc.png)

CSS関連であれば、左のメニューからCSSを選択し、CSS PreProcessorからプルダウンで使用したいものを選択するだけ。
![スクリーンショット 2020-03-01 21.22.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/5ecd4ab9-cd52-28a8-7f0b-76e6feadb67c.png)

また、jQueryであれば
![スクリーンショット 2020-03-01 21.34.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/ccea8f06-0ff6-3413-5f29-d0bd76c853ec.png)
JSを選択し、下の検索窓に「jQuery」と入れると候補が出てくるので、それをクリックするだけです。簡単ですね。



##Qiitaへの埋め込み方
ソースコードの記述が完了し、シェアしたい場合は
![スクリーンショット 2020-03-01 21.37.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/14f145bf-b3be-d299-0f9d-ded7dbe8dc57.png)
右下のメニューから**Embed**をクリック。
![スクリーンショット 2020-03-01 21.39.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265815/e01db08f-f15e-19b4-a7d0-d35a64699c66.png)

**Embed This Pen**という画面が表示されます。
この下部にある**Copy & Paste Code**内のタグをコピーし、貼り付けるだけです。(見切れててごめんなさい)
デフォルトで形式がHTMLになっているので、大概はこのままコピーすればすぐにできるはずです。
他のブログサービスなんかにもそのまま使えると思います。

##実際に埋め込んでみました

###SCSS
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="fumu238" data-slug-hash="RwPodXg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwPodXg">
  <span>See the Pen <a href="https://codepen.io/fumu238/pen/RwPodXg">
  RwPodXg</a> by fumu (<a href="https://codepen.io/fumu238">@fumu238</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

CSSにコンパイルする必要がないのでとても楽です。
しかし、SCSS欄の下に**View Compiled**と出るのでそれをクリックするとあら不思議、CSSにコンパイルされたコードも見ることができます。

###jQuery
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="fumu238" data-slug-hash="MWwoJqo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="MWwoJqo">
  <span>See the Pen <a href="https://codepen.io/fumu238/pen/MWwoJqo">
  MWwoJqo</a> by fumu (<a href="https://codepen.io/fumu238">@fumu238</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

簡単なものですが、こんな感じです。