はじめに

cssなどで記述したコードの実際の見た目を表示したい時に、便利な方法はないかと探してみると、CodePenというサービスがあったので使い方を自分の復習用にまとめました。

CodePenとは

Webブラウザ上でフロントエンド言語のコーディングができるサービスです。
Webサイトにコードを埋め込むことや、コードを共有することができます。

コードと結果を1画面で表示できるので、コードの説明時に便利です。

CodePenの使い方

1. まずはCodePenのアカウントを取得します。 CodePen
2. 登録が完了したら、左のバーにあるPenというところを押します。
3. 右上のSettingから利用する言語を選びます。
4. 好きなコードを書きます。 次に、完成したコードをサイトに埋め込んでいきます。
5. Embedというボタンを押すとCopy&Paste Codeという欄があるのでそのコードをコピーします。
6. コピーしたコードをサイトに貼り付ければ、これで完成です。

以上

使い方は非常に簡単なので、サイト上でビューを見せたい場合などに使ってみてください。