Qiitaにhtml, css, jsの実際の表示例を埋め込む方法（CodePen）

# Qiitaにhtml, css, jsの実際の表示例を埋め込む方法（CodePen）

Qiitaでよく使われている、ソースコードと実際の表示イメージを埋め込む方法。
（よく見るカッコいいやつ）

**＜こういうやつ＞**
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="yuta-38" data-slug-hash="LYVmyye" 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="test">
  <span>See the Pen <a href="https://codepen.io/yuta-38/pen/LYVmyye">
  test</a> by @@yuta (<a href="https://codepen.io/yuta-38">@yuta-38</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Resultの枠の中のボタンをクリックすると、リアルタイムでJSが実行される。



##やり方

CodePenというWEB上の別サービスのembed用コードをQiitaに埋め込んでいる。

1. CodePenの登録
2. ソースコードの記述
3. embed URLのコピー
4. Qiitaに貼り付け
5. 表示内容の確認

##1. CodePenの登録

**そもそもCodePenって何？**
html, css, javascriptのコーディングをリアルタイムでプレビューできるツール。
オンラインエディタと呼ばれるサービスの類い。

類似サービス：jsbin, jsFiddle, 

###●CodePenでユーザー登録する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7d7d1046-85f8-a1a3-306e-b701ccec0339.png)


twitter, github, facebook, メアドで登録可能


##2. コーディング

###2-1 プロジェクトの作成

Settingで「title」「Description」を入力
完了したら「Save&Close」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/e600cca2-5610-b590-36f4-138ac2405f9e.png)


###2-2　コーディング
HTML, CSS, JSのそれぞれの枠内にコーディングしていく
HTMLはbodyタグ内の記述でOK


|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/95f09ef8-6c9f-cbfc-8c90-683e25ed7706.png)|
|:--|

<details><summary>補足(プレビュー時に書きコードが自動的に追記される)</summary>
<div>

```ruby:CodePen側で自動的に追記する内容
<!DOCTYPE html>
<html lang="en" {IF CLASSES}class="classes"{/IF}>

<head>

  <meta charset="UTF-8">

  {IF PRIVATE}
  <meta name="robots" content="noindex">
  {ELSE}
  <!-- MIT License -->
  {/IF}

  <title>{TITLE}</title>

  {STUFF FOR <HEAD>}

  <link rel="stylesheet" href="{CSS RESET CHOICE}">
  {EXTERNAL CSS}
  <style>
  {EDITOR CSS}
  </style>

  {PREFIX FREE (if enabled)}
  {MODERNIZR (if enabled)}

</head>

<body>

  {EDITOR HTML}

  {JS Library (if chosen)}
  {EXTERNAL JS}

  <script>
    {EDITOR JS}
    //# sourceURL=pen.js
  </script>

</body>

</html>
```

</div></details>


##3. embed URLのコピー
###3-1 プロジェクトを保存する
コードを書き終わったら、Saveをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/29a91929-f3ae-fd9a-5b44-ae5dc1abba52.png)


##3-2 embed用のソースコードをコピーする

ページの最下部にある、「embed」をクリック
（※画面幅が狭いと省略されてるかも）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c69a89a4-0c3a-5643-5637-1c107a366407.png)


「HTML(recommended)」のタブをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/308a9095-889e-2d11-9166-9e38ff741475.png)

枠内に記載されているコードをコピー



##4. Qiitaに貼り付け
コピーしたコードをQiitaに貼り付け

>※プレビュー画面では確認できない
「See the Pen test by ユーザー名 on CodePen.」と表示されていればOK


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="yuta-38" data-slug-hash="LYVmyye" 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="test">
  <span>See the Pen <a href="https://codepen.io/yuta-38/pen/LYVmyye">
  test</a> by @@yuta (<a href="https://codepen.io/yuta-38">@yuta-38</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



```ruby:ソースコード
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="yuta-38" data-slug-hash="LYVmyye" 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="test">
  <span>See the Pen <a href="https://codepen.io/yuta-38/pen/LYVmyye">
  test</a> by @@yuta (<a href="https://codepen.io/yuta-38">@yuta-38</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
```


##5. 表示内容の確認
限定共有投稿で仮校了とし、WEBページ上で表示内容を確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/76f93aaa-28f7-57a3-f2da-f48a885d9931.png)

問題なければ、右上の設定アイコンから、全体に公開を選択

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/2de97224-121e-e99e-2a26-0327c972b0c6.png)|
|:--|



<br>
**＜メモ＞**
jsbinのembed用コードを貼り付けてみたが、埋め込みはできなかった。
テキストリンクで表示。リンク先は有料版じゃないとつかえないっぽい

<a class="jsbin-embed" href="https://jsbin.com/jexanuw/embed?html,css,output">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?4.1.7"></script>


<br>
[ページ上部に戻る](#qiitaにhtml-css-jsの実際の表示例を埋め込む方法codepen)