先日WebMakerという拡張機能を紹介しました。その機能の中にCodePenと連携できる機能がありましたので早速試してみました。
実際にサンプルコードを書いてみた
実際のサンプルコードのリンクを貼っていたんですが、403エラーが出るようになったので、削除します。
類似サービス
御覧頂いたとおり、CodePenは、ブラウザ上でHTML／CSS／JavaScriptをちょっと書いて動作確認することに適しているものです。類似のサービスとしては、CodePenの他に次のようなものがあります。
探せばまだまだ出てきますが、有名どころを並べてみました。どれも基本機能は同じです。使い込んでくると、サポートされてるライブラリやプリプロセッサー、SNSで連携機能が異なり困ることがありますが、初心者の方はどれでも良いですね。私はWebMakerと親和性の高いCodePenを使うことにします。
※使用する前に、事前に登録が必要になります。
CodePenの良いところ
CodePenを使って良かった点を書きます。
- コードがきれいに色分けされる
- 簡単にWordPressに埋め込むことができる。
- 表示されたコードとプレビューがレスポンシブ
- コードのフォークができる
- コードを共有できる
私がブログにコードを公開する際は、「Crayon Syntax Highlighter」を使用していました。「Crayon Syntax Highlighter」は、動作する画面を表示することは大変でしたが、Codepenだと動くコードを簡単に作れて、良いですね。しばらく、色々書いて遊びたいと思います。
コメント