HTML、CSS、JavaScriptを参考書でコードを写経しつつ勉強しているけど、テキストエディタで書くのめんどくさいし、エディタとウェブページの切り替えとかもめんどくさいなあ。なんかいい方法ないかなあという時にオススメなのが、codepenというサービスです。
今回は、手を動かしながらコードを勉強する時にこれは便利だなと思ったので使っているサービス・codepenについて簡単な形ですが、シェアします。
ボクは、2018年からウェブプログラミング学習をしている学習歴約１年。ここ最近はJavaScriptのコードを写経して動作を確認するのにcodepenを使っています。コード入力とコンテンツが１画面で見れて使えるので、ぶっちゃけとても便利です。
codepenとは
ウェブページ上でHTML、CSS、JavaScriptなどを書いて、すぐに動作を確認できるサービスで、コードのちょっとした動作確認とか、練習にぴったりのサービスです。
また、ユーザーがコードを公開できます。すごいコードとか気になるコードとかあれば、自由に見たり、保存できますので、プログラミング初心者から上級者まで使えます。
codepenの使い方
codepenを開いて左上の「pen」をクリックすると、HTML、CSS、JavaScriptのコードを入力するスペースが横並びに表示されます。あとは自由にコードを入力していくと、コードの下に、コードに応じたコンテンツが表示されます。
下の画像では、HTML、CSS、JavaScriptでスクロールしたらサイズが変わるコードで、動いているところがコンテンツの部分です。
書いたコードはsaveで保存もできます。会員登録しないとセーブできないなど少し不自由はありますが、登録しなくても使えたはずです。会員登録は簡単ですので、スミマセン、割愛させていただきます。
JavaScriptのconsole出力もできる、そのほかCSSでSCSSが使える、スマホでも使えたりと、割と高機能なところもいい感じですね。
とても便利なサービスなので、ウェブプログラミングを学習するときに、ぜひ試しに使ってみてください。
コメント