WebMaker+CodePenで遊んでみた

HTML/JS/CSS

先日WebMakerという拡張機能を紹介しました。その機能の中にCodePenと連携できる機能がありましたので早速試してみました。

スポンサーリンク

実際にサンプルコードを書いてみた

See the Pen HelloWorld by chappi128 (@chappi128) on CodePen.

如何でしょうか。CodePenを使うと格好良い埋め込みコードを簡単に作ることができます。手始めに、JavaScriptの基本的なイベント「onfocus/onblur/onclick」を書いてみました。

類似サービス

御覧頂いたとおり、CodePenは、ブラウザ上でHTML/CSS/JavaScriptをちょっと書いて動作確認することに適しているものです。類似のサービスとしては、CodePenの他に次のようなものがあります。

探せばまだまだ出てきますが、有名どころを並べてみました。どれも基本機能は同じです。使い込んでくると、サポートされてるライブラリやプリプロセッサー、SNSで連携機能が異なり困ることがありますが、初心者の方はどれでも良いですね。私はWebMakerと親和性の高いCodePenを使うことにします。
※使用する前に、事前に登録が必要になります。

CodePenの良いところ

CodePenを使って良かった点を書きます。

  • コードがきれいに色分けされる
  • 簡単にWordPressに埋め込むことができる。
  • 表示されたコードとプレビューがレスポンシブ
  • コードのフォークができる
  • コードを共有できる

私がブログにコードを公開する際は、「Crayon Syntax Highlighter」を使用していました。「Crayon Syntax Highlighter」は、動作する画面を表示することは大変でしたが、Codepenだと動くコードを簡単に作れて、良いですね。しばらく、色々書いて遊びたいと思います。

 

コメント