【Webサービス】CSSやJSのサンプルを埋め込み!jsdo.itからCODEPENにしました

こんにちは。
最近しれっと埋め込み用のコード投稿サービスを変更しました。

CODEPEN

CodePen

こちらも元々有名なサービスなんですが、貼り付けた感じがよりシンプルだったので乗り換えてみました。
このような画面でHTML, CSS, JSを編集し、

Screen Shot 2014-12-11 at 13.41.13

ブログなどにライブビューを埋め込むことができます。

See the Pen Mouse Orbit by Isaac Suttell (@isuttell) on CodePen.0

※ こちらは、Isaac Suttellさんの投稿しているコードです

HowTo

書き方

これまで数回埋め込んでいるのでソースを見た方はお気づきかと思いますが、ソースをみてもライブラリのJSやjQueryのコンテンツがJSタブに書かれていなかったと思います。

  • CSSをSass/Compassの仕組みでかける
  • JSもCoffeeScriptなど使える
  • CSSもJSも外部ファイルを読み込める
  • JSは既に用意されているライブラリから選択できる
    • jQuery
    • Angularなど

といった特徴があり、ライブラリ以外の部分のみ実際にコードを記述して投稿しています。

埋め込み

ここにも少し特徴があり、このように埋め込みタグが用意されているだけでなく、

<p data-height="268" data-theme-id="0" data-slug-hash="bNpdrX" data-default-tab="result" data-user="nt-uni" class='codepen'>See the Pen <a href='http://codepen.io/nt-uni/pen/bNpdrX/'>bNpdrX</a> by Tsukasa Nagata (<a href='http://codepen.io/nt-uni'>@nt-uni</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

WordPress用のショートコードも用意されています。
あんまり長さ変わらないですが…。

※ショートコードを利用される場合、CODEPENのプラグインを入れておく必要があります

まとめ

とにかく埋め込んだ時にシンプルな外見が気に入って使用しています。
また、HTML/CSS/JacaScriptが記述できますが、記述がないと埋め込みの時にもタブが省略されるためその点も嬉しいですね。

是非お試しください。

参考:CodePen

フォローして続編をチェック

@universionsをフォロー