WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

CODEPENを使ってコードを掲載させる

f:id:yachin29:20180125230655p:plain




codepen.io


CODEPENとは?
「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブログやWEBサイトに埋め込むことも簡単にできます。
有料・無料アカウントがあり、無料アカウントは一部の機能が使えません。
ソースコードを保存・公開・共有できるサービスの為、画像は自身のサーバー等にアップロードする必要があります。(有料プランの場合、画像をアップロード出来るスペースが与えられます)
なので、WebGLCSSアニメーションなど、比較的リッチな動きを見せるものの掲載が多いです。
webのポートフォリオなどに使ってみるのも良いと思います。


使用例

See the Pen svg-anime1 by yachin29 (@yachin29) on CodePen.