【2019年版】CodePenとは?使い方や登録方法、WordPressサイトへの埋め込み方法まで解説

Web

こんにちは。Webデザイナーのけんです。

CodePen」を知っていますか?Webの技術ブログを見ているならよく目にすると思います。Webデザイナーにとってとても便利なツールなので、知っておくと得です。

この記事ではCodePenの使い方、登録方法、WordPressサイトへの埋め込み方法まで解説します。

長い記事なので、知りたいところが決まっている人はもくじで飛んでください。

CodePenとは

CodePenとは、Webブラウザ上でHTML/CSS/Javascriptのコーディングができるサービスです。

変更を加えるとすぐにプレビューが更新されて反映されるので、リアルタイムでデザインを確認しながらコーディングできます。

主な機能は以下の通り。

  • コードをリアルタイムでプレビュー
  • コードを公開・共有できる
  • 他人のコードも編集できる
  • プレビュー画面をWebサイトに埋め込める
  • いいね機能などSNSとしても楽しめる

これは代表的な機能やサービスで、他にもたくさん便利な機能があります。

なんといってもCodePenのいいところは、Webページに埋め込むことで、コードのプレビュー表示を公開することができます。

なので、Webデザイナーがコードをブログ上で紹介するにはもってこいのWebサービスです。

ちなみに、「コードペン」と読むらしいです。僕はずっと「コデペン」って読んでいて、正しい読み方を知った今でも間違えてしまいます笑

Webページに埋め込まれたCodePenの見方をさらっと解説

まずは、Webページに埋め込まれたCodePenのプレビュー画面の見方をかんたんに解説します。

See the Pen
color-list before ver.
by ken (@ken_shindo)
on CodePen.

上のバーに「HTML」とか「CSS」、「Result」というボタンがありますね。それぞれをクリックして選択中にすると、プレビュー画面に選択中の言語が表示されます。

「Result」はHTML/CSS/Javascriptのコーディングによる実行結果が反映されます。

右上のCodePenロゴ「Edit on CodePen」をクリックすると、CodePenのサイトが開かれ、他人のコードでもサイト上で自由に編集し、実行結果を見ることができます。

CodePenの登録方法

CodePenを実際に活用する側になるためには、登録が必要です。まず、CodePenの公式サイトにアクセスしましょう。

■CodePen公式サイト
https://codepen.io/

CodePenトップページにアクセスしたら、左下の[Sign Up]をクリックします。

するとフリープラン登録画面が表示されます。

TwitterやFacebookなど、SNSアカウントでの登録も可能です。

ここではEmail登録で解説を進めていきます。[Sign Up with Email]をクリックすると下にフォームが表示されます。

[YOUR NAME]には、CodePen内で使用する自分のネームを自由に入力します。

[CHOOSE A USERNAME]は、一意のユーザーネームです。いわゆるアカウントIDになります。

メールアドレスを入力し、パスワードをここで決めて入力します。すべて入力し終わったら[Submit]をクリックしましょう。

もう少しプロフィール埋めて充実させようぜっていう画面が表示されますが、後でも設定できるので[Save&Continue]をクリックします。

さあ、これで登録完了しました!チュートリアルが始まりますが、必要でなければ飛ばすこともできます。

CodePenの基本的な機能、「Pen」の使い方

さて、登録が完了したので使い方を解説します。

CodePenにはたくさんのサービスが提供されていますが、ここでは最も代表的なツールである「Pen」の使い方について解説していきます。

「Pen」とは、HTML/CSS/Javascriptでコーディングしたデモ、作品のことです。

まずトップページに戻ります。ページ左上のCodePenのロゴをクリックすればトップページに戻ることができます。

ここがログイン時のトップページになります。[Create]をクリックしましょう。

ドロップダウンメニューが表示されるので[Pen]を選択します。

さあ、いよいよコーディング開始です。自分の好きなようにコーディングし、Penを公開しましょう。

WordPressサイトへの埋め込み方

さて、コーディングデモを自分のサイトで紹介したい時の埋め込み方法を解説します。

とても小さいですが、Pen編集画面の右下にというボタンがあるのでクリックします。

※もしボタンがない場合は、一度、右上にある[Save]をクリックしてみてください。保存されていないと表示されない場合があります。

ウインドウ画面が表示され、下部に埋め込みのためのコードが用意されています。

4つの埋め込みコードが用意されていますが、僕は「HTML(Recommended)」を使用しています。

コードをコピーしたら、Wordpressサイトの埋め込みたいページの編集画面へアクセスします。

テキストエディターを選択してエディター内に貼り付けましょう。

保存して正しく埋め込まれているか確認しましょう。

See the Pen
color-list before ver.
by ken (@ken_shindo)
on CodePen.

無事に埋め込まれれば、上記のようにWebページに表示されます。

まとめ

有料会員になると、他のサービスが解放されたり、プレビュー画面のカスタマイズ、編集可能なプレビュー画面の埋め込みなど、いろいろ便利になるみたいです。

Penを使ってコーディングデモを保存したり公開する分には無料会員でも十分です。

有料会員にならなければ、ほとんどの機能は利用できないのではないかと勝手に思っていたんですが、無料でここまでの機能が使えると知って、感動しつつ最近使い始めました。(もっと早く使いたかった…)

英語なのでとっつきにくいかもしれませんが、Google翻訳しながらなんとかなります。

Webデザイナーにとってコードの引き出しの多さは仕事の効率化につながりますので、CodePenにガンガン保存していきましょう。

※サイトがマイナーチェンジすることで登録方法の手順が異なる場合があります。これは2019年現在の登録手順です。