ソースコードの共有に便利なCodePen「HTML・CSS・JSに対応」

世の中には様々なサービスがありますが、その中にソースコードの共有が簡単なCodePenというサービスがあります。

CodePenを使えばサンプルプログラムを以下のように簡単に挿入できます。

See the Pen PooQOja by Acceliv (@taka74) on CodePen.

ただただソースコードを掲載できるだけでなく、実行結果まで表示できるため、かなり使い勝手の良いサービスです。

おまけに動作も軽量でサーバーに負荷が掛からないため、HTML・CSS・JavaScriptのプログラムを共有したい場合はCodePenを使うのがいいでしょう。

目次から探す

CondePen登録方法

ただただHTML/CSS・JavaScriptを書いてテストしたいだけなら登録は必要ありません。

登録すると以下の機能が使えるようになります。

  • 作成したソースコードの保存・共有
  • 複数ファイルから成り立つプロジェクトの作成

プログラムを書くだけなら登録は不要なのですが、書いたプログラムをシェアしたい場合は登録が必要なので、未登録の方は登録を進めていきましょう。

「Twitter・Github・Facebook」いずれかのアカウントがあれば、連携するだけでアカウントを作成できるので非常に簡単です。

「Twitter・Github・Facebook」いずれも所持していない場合は[SignUp with Email]をクリックして登録手続きをしてください

登録するといっても難しいことは何もなく、必要なメールアドレスやパスワードなど項目を埋めるだけです。登録が終わるとすぐに使えるようになります。

CodePenの使い方

CodePenにログインできたら、このようなトップページが表示されます。

WordPressなどに埋め込む用のプログラムを作成したい場合は、左メニューの[Pen]を選択します。

このようなHTML・CSS・JavaScriptのエディタが3つ並んだ画面が表示されます。

試しにHTMLエディタにて何かを書き込んでみてください。下のプレビューエリアにリアルタイムで反映されるはずです。

CodePenプログラムの埋め込み方法

CodePenの埋め込みはかなり簡単です。

埋め込む前に一度ページを保存しておいてください。一回でも保存すればその後はオートセーブなので問題ありません。

準備ができたら右下の[Embed]をクリックします。

Embed This Penウィンドウが立ち上がるので、右下の[HTML(recommended)]をクリックします。

あとは表示された埋め込み用コードをコピーして貼り付けるだけです。

WordPressならプラグイン利用可能

WordPressの場合、一度テキストモード・HTMLモードに切り替えて挿入をしなければなりません。

ですが、「CodePen Embedded Pens Shortcode」というプラグインをインストールして有効化しておくことで、ショートコードによる埋め込みが可能になります。

WordPress.org 日本語
CodePen Embedded Pens Shortcode ショートコード [codepen_embed] を使用して、CodePen のソースを埋め込むことができるようになります。

ショートコードで挿入する場合は、埋め込みコードを取得する画面で「WordPress Shortcode」を選択したら表示されるコードをペーストするだけです。

こちらの方法であれば、ビジュアルエディタにそのまま挿入できるのでおすすめです。

CodePenをもっと使いこなす

CodePenのエディタはほかにも機能が用意されています。せっかくなのでそちらも見ていきましょう。

Markdownに対応させる

CodePenはHTMLだけでなく、Markdown記法も使えます。ただしそのままでは使えず、少し設定を変更する必要があります。

画面右上の[Settings]をクリックしてください。

設定タブを[HTML]に切り替えます。

「HTML Preprocessor」という項目をクリックして[Markdown]を選択します。

これでMarkdown記法が使えるようになり、以下のような表現ができるようになります。

See the Pen YzzYwrm by Acceliv (@taka74) on CodePen.

CSSプリプロセッサーを使う

SCSSやSass・LessといったCSSプリプロセッサも使用可能です

画面右上の[settings]をクリックしてください。

設定タブを[CSS]に切り替えます。

「CSS Preprocessor」という項目があるので、この項目をいじることでCSSをSCSSなどのCSSプリプロセッサに切り替えられます。

最後に[Save & Close]をクリックしたら変更内容が反映されます。

CSSプリプロセッサ適用中は、どのCSSプリプロセッサを適用しているのか表示されるようになっています。

CSSプリプロセッサを使用したい場合は、この手順で変更するようにしましょう。

プログラムを共有したいならCodePenを使おう!

CodePenは、Web関係のプログラムを共有するのに非常に便利です。

HTML・CSS・JavaScriptといった基本的なことだけでなく、SCSSなどより実用的なコードも共有できるので、プログラムの共有方法を探していた場合は一度使ってみてください。

目次から探す