CodePenとは

ウオトミズ(UOTOMIZU)の中の人

昔、CodePenってなに?ってなったので、自分なりにまとめた。

CodePenとは

以下のようなCodePenの埋め込みを見た人は多いと思う。

 

 

CodePenとは、HTML、CSS、JavaScriptのフロントエンド言語に特化したウェブサービス。

 

少しGitHubに似てるフロントエンドコーダー向けに特化したサービスっていう認識で良いと思う。

 

CodePenで出来ること

CodePenでは以下のことができる。

  • Pen:コードの共有、ウェブページへの埋め込み
  • Project:プロジェクトの作成
  • Post:記事投稿
  • CodePenのユーザーのPen、Project、Postの閲覧
  • ユーザーのフォローやいいね

 

UIに関しては、DribbleやBehanceのような感じで、イラストの代わりにコードの出力結果が一覧化されている。

 

便利な点

とにかくユーザーにとって作業しやすい環境が整っている。

 

  • Emmetが使える
  • Pugなどが使える
  • SCSS、SASSも使える
  • JSライブラリーを簡単に読み込める
  • コードの変更がリアルタイムで反映される

終わりに

かなり凝ったPenなんかも頻繁に公開されているので、眺めているだけでも楽しい。ユーザーが書いたPostも参考になるので、CodePenに滞在しているだけで結構勉強になった気になる。

 

 

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO