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
 |
|---|
補足(プレビュー時に書きコードが自動的に追記される)
<!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>
##5. 表示内容の確認
限定共有投稿で仮校了とし、WEBページ上で表示内容を確認
問題なければ、右上の設定アイコンから、全体に公開を選択
 |
|---|
**＜メモ＞** jsbinのembed用コードを貼り付けてみたが、埋め込みはできなかった。 テキストリンクで表示。リンク先は有料版じゃないとつかえないっぽい
[ページ上部に戻る](#qiitaにhtml-css-jsの実際の表示例を埋め込む方法codepen)