CodePenの使い方と記事への埋め込み方法、ライブラリの入れ方
![CodePenの使い方と記事への埋め込み方法、ライブラリの入れ方](https://creatopia.jp/storage/images/eyecatch_88365.png)
CodePenは、無料でHTML、CSS、JavaScriptなどのコードサンプルを作成・共有できるサービスです。
記事でCodePenによるソースコードサンプルが埋め込まれているのを見たことがある方も多いと思います。
アカウント登録してすぐにコードエディターを利用でき、クリック操作で埋め込みや共有もできる簡単なツールです。
CodePenの利用方法をわかりやすく解説します。
CodePenの使い方
まずはCodePenのページへ行きましょう。以下のリンクから開けます。
登録する
▼ [Sign Up for Free]をクリック。
![CodePenトップページ](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/ebb4fc41814a48438d88309c453c30dc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2017.42.50.png)
▼ お好きな方法でサインアップしてください。
![CodePenサインアップ](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/5b30992b1a0c44b79d57308669e4ebeb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2017.43.27.png)
(お好みで)ツアーする
▼ 登録すると早速エディターページが開き、ツアーの案内が出ます。
![CodePen エディターツアー](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/95a11e4be44b437d81a60706daf29ef3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2017.46.46.png)
英語ですが、使い方を体験するには[Let's go!]をクリックしてください。
サンプルコードを入力する
エディターにコードを書いていきましょう。CodePenの魅力として、以下のような点が挙げられます。
- <!DOCTYPE ~>や<haed>などを書かなくて良い
- HTMLは、<body>の中身だけ書けば良い
- CSSやJSは別タブで書ける
- <link rel="stylesheet" type="text/css" href="styles.css">などは不要
- リロードや「⌘S」保存などをしなくても、自動でプレビュー反映される
▼ とりあえず、HTMLとCSSでホームページサンプルコードを作ってみました。
![CodePen HTMLとCSS](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/52b1c5f20ef141808d6725e8134fe317/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2017.59.21.png)
コードを保存する
▼ コードができたら、上の[Save]をクリックして保存します。
![CodePen Save](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/da30af4b7b8a4326ab70dbba885653a3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2018.00.49.png)
埋め込みコードをコピーする
記事などにCodePenを埋め込みたいときは、埋め込み用コードをコピーする必要があります。
▼ 右下に[Embed]というボタンがあるので、クリック。
![CodePen Embed](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/112be6d355144591a2feba45c844329a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2018.03.33.png)
▼ [Copy Code]をクリックして、埋め込み用のHTMLをコピーしてください。
![CodePen Copy Code](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/656d1fb00a404cfda6c43005c21e4a61/Photokako-mosaic-ZpHou6zzgm8oRi1y.png)
記事のカスタムHTMLなどにペースト
WordPressなら、「カスタムHTML」ブロックなどにペーストします。
▼「カスタムHTML」ブロックを挿入
![WordPress カスタムHTMLを挿入](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/011a6b83d15944f6a6dd6193d2db29b0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2018.13.36.png)
▼ コピーした埋め込みコードをペースト。
![コピーした埋め込みコードをペースト](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/e28787c23037402698f03db1959329d7/Photokako-mosaic-wwinRMl16dZIxRpy.png)
▼ プレビューで確認すれば、記事に埋め込みされているはずです!
![WordPressプレビュー画面](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/7b78ab944837404097ff645e81605747/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2018.14.28.png)
▼ 実際に、当記事でも埋め込んでみました(CMSはWordPressではありませんが、同様にHTMLを入れることで埋め込みできます)。
See the Pen Untitled by hikaru (@alduemfc-the-bold) on CodePen.
CSSでSCSSなどを使う方法
CodePenでSCSSなどが使われているのを見たことがある方も多いと思いますが、簡単にSCSSなどを使えるようにできます。
▼ スタイルシート言語を変えるには、まずCSSエディター右上の[歯車マーク]をクリックします。
![CodePen CSSエディター](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/6017f99ebaf842a49b2f707a155a5074/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.32.31.png)
▼「CSS Preprocessor」のセレクトボックスをクリックし、任意のスタイルシート言語を選んでください。
![CodePen CSS Preprocessorを選択](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/3bc91130d9134fb8bed3476fcab2bda6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.36.06.png)
▼ 選択したら、[Save & Close]をクリックしてください。
![CodePen Save & Close](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/4dcc6939ab94403f884905e31dfb7f88/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.56.58.png)
JavaScriptでTypeScriptやjQueryなどを使う方法
もちろんJavaScriptも、BabelやTypeScriptが使えたり、jQueryやVue.jsといったライブラリが使えたりします。
▼ JSエディター右上の[歯車マーク]をクリックします。
![CodePen JSエディター](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/70043b7699e142d89707a576836c4793/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.39.58.png)
▼「JavaScript Preprocessor」のセレクトボックスでBabelやTypeScriptなど選択できます。
![CodePen JavaScript Preprocessorを選択](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/c03463d568e34e058d48763eb3cf5e3b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.40.41.png)
▼ jQueryやVue.jsなどライブラリを入れるには、「Add External Scripts/Pens」の検索ボックスで検索します。
![CodePen JSライブラリを入れる](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/484c357fa97d4363b65419056ad99c59/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.42.22.png)
設定を変えたら、忘れず[Save & Close]をクリックしてください。
その他のCodePenの使い方
新しいプロジェクトの作り方
新しいプロジェクト(Pen)を作るには、ログイン時のダッシュボードのサイドメニューから[Pen]をクリックします。
![CodePen Penを作成](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/659f336e90fa44e28eab53f211c02ad9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.23.51.png)
自分が作成したPenの一覧をみる
サイドバーから[Your Work]をクリックすると、自分が作成したPen一覧がみられます。
![](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/7bea203c1a43472493a19b260abadc1d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.25.16.png)
CodePenユーザーが公開している人気コード(トレンド)をみる
CodePenでは、ユーザーが公開していて人気となっているコードもみられます。
▼ サイドバーから[Trending]をクリック
![CodePen Trending](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/8954600c56fc4a638c207953cd38b9d6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-06-18%2020.25.53.png)