【CodePenとは?】無料のWebコードエディタで使い方、ブログへの埋め込み方法。

codepen

CodePenとは?HTML/CSS/JavaScriptの無料のブラウザコードエディタの使い方と、ブログやWebサイトへの埋め込み方法をご紹介してきます。

CodePenとは?

https://codepen.io/

  • CodePenは、作成したHTML、CSS、JavaScriptをテストおよび展示するためのオンラインコミュニティ。
  • 開発者が「ペン」と呼ばれるコードスニペットを作成してテストできる、オンラインコードエディターおよびオープンソースの学習環境。

Code Penの3つの特徴

① HTML・CSS・JavaScriptのコーディングとリアルタイム表示
② WEBサイトにコードを埋め込むことができる
③ コードを共有することができる

わざわざ開発環境構築せずとも、ブラウザ上でコード書いて表示/動作確認、共有できる便利なツールです。

CodePenの登録

https://codepen.io/ にアクセスし Sign Up ボタンを押します。すでにアカウントがある方はログインします。

メールアドレスで登録するか

GitHub, Twitter, Facebookのアカウントを利用することも可能です。

CodePenの使い方

CodePenの基本ビュー画面はこのようになります。

NewPen をクリックすると、新規作成できます。

  1. プロジェクト名を変更します(後で変更できます)
  2. コードエディタ(HTML/CSS/JavaScript)でコード書きます。
  3. プレビュー画面で表示・動作確認します。
  4. 保存します。
  5. ブログなどに埋め込みたいときは[Embed]を押します。

コードは、<body> 以下のタグや、<style> 以下のスタイルの中身を直接書く感じになります。

CodePenのブログなどへの埋め込み方法

前出の図の下部バーの Embed を押した後
HTML を選択するとソースコードが表示されるのでコピペします。

自分のサイトやブログの埋め込みたいところに、ペーストすると表示されます。

例として、このブログに埋め込んでみたものは、下記のようになります。

See the Pen testCodePen by uxbear (@uxbear) on CodePen.

Code Penのソースコード対応

各ソースコードは、下記のように対応しています。

言語対応
HTMLHaml, Markdown, Slim, Pug
CSSLess, SCSS, Sass, Stylus, PostCSS
JavaScriptCoffeeScript, LiveScript, TypeScript, Babel

CodePenでのHTML/CSS/JavaScriptの勉強方法

ブラウザエディタですぐ試せて、自分でソース書いて確認できる、プログラミング学習に最適な【CodePen】ですが

オープンコミュニティでもあるので、世界中のエンジニア・デザイナーが公開しているソースを参考にするのも、とても勉強になります。

下記リンクから、トレンドのソースや、気に入った作者をフォローすることができます。

https://codepen.io/trending

まとめ

CodePenとは?HTML/CSS/JavaScriptの、無料のブラウザコードエディタの使い方と、ブログやWebサイトへの埋め込み方法をご紹介でした。

あわせて読みたい記事

あわせて読みたい書籍

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA