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

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

＜こういうやつ＞

See the Pen
test by @@yuta (@yuta-38)
on CodePen.

Resultの枠の中のボタンをクリックすると、リアルタイムでJSが実行される。

やり方

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

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

1. CodePenの登録

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

類似サービス：jsbin, jsFiddle,

●CodePenでユーザー登録する

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

2. コーディング

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

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

2-2　コーディング

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

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

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>

3. embed URLのコピー

3-1 プロジェクトを保存する

コードを書き終わったら、Saveをクリック

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

ページの最下部にある、「embed」をクリック
（※画面幅が狭いと省略されてるかも）

「HTML(recommended)」のタブをクリック

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

4. Qiitaに貼り付け

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

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

See the Pen test by @@yuta (@yuta-38) on CodePen.

ソースコード

<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>