はじめてのCodePen

CodePenは、HTML、CSS、JSのコードを投稿したり、共有したり出来るサイトです。
無料版でもかなり充実した機能が使えます。

コードを書くとすぐにプレビューへ反映されるので、さくっと書いて試してみたい、という場合にオススメです。

CodePenの使い方

1.CodePenのサイトにアクセス

 

2.右上の「Create」をクリック

 

3.「NewPen」をクリック

 

4.準備完了!

 

試しにコードをかいてみる

さくさくプレビューに反映されます。

「Save」ボタンを押して保存すると、右下に「Export」ボタンがでてきます。ここからzip形式でダウンロードができます。

おわりに

headってなに?CSSが反映されないけどなんで?など、初めてHTMLとCSSを触ってみようと思ったときに準備段階でつまずきやすいポイントを、CodePenを使うことでショートカットできちゃいます!

KROWLでは「CodePen」のワークショップをはじめ、様々なイベントを開催していますのでご興味のある方はチェックしてみてください!

https://krowl.jp/seminar/

関連記事