HTML、CSS、JavaScriptのちょっとした学習に最適なcodepen

HTML、CSS、JavaScriptのちょっとした学習に最適なcodepen

HTML、CSS、JavaScriptを参考書でコードを写経しつつ勉強しているけど、テキストエディタで書くのめんどくさいし、エディタとウェブページの切り替えとかもめんどくさいなあ。なんかいい方法ないかなあという時にオススメなのが、codepenというサービスです。

今回は、手を動かしながらコードを勉強する時にこれは便利だなと思ったので使っているサービス・codepenについて簡単な形ですが、シェアします。

ボクは、2018年からウェブプログラミング学習をしている学習歴約1年。ここ最近はJavaScriptのコードを写経して動作を確認するのにcodepenを使っています。コード入力とコンテンツが1画面で見れて使えるので、ぶっちゃけとても便利です。

codepenとは

ウェブページ上でHTML、CSS、JavaScriptなどを書いて、すぐに動作を確認できるサービスで、コードのちょっとした動作確認とか、練習にぴったりのサービスです。

また、ユーザーがコードを公開できます。すごいコードとか気になるコードとかあれば、自由に見たり、保存できますので、プログラミング初心者から上級者まで使えます。

Just a moment...
codepenとは

codepenの使い方

codepenを開いて左上の「pen」をクリックすると、HTML、CSS、JavaScriptのコードを入力するスペースが横並びに表示されます。あとは自由にコードを入力していくと、コードの下に、コードに応じたコンテンツが表示されます。

下の画像では、HTML、CSS、JavaScriptでスクロールしたらサイズが変わるコードで、動いているところがコンテンツの部分です。

codepenの使い方

書いたコードはsaveで保存もできます。会員登録しないとセーブできないなど少し不自由はありますが、登録しなくても使えたはずです。会員登録は簡単ですので、スミマセン、割愛させていただきます。

JavaScriptのconsole出力もできる、そのほかCSSでSCSSが使える、スマホでも使えたりと、割と高機能なところもいい感じですね。

とても便利なサービスなので、ウェブプログラミングを学習するときに、ぜひ試しに使ってみてください。

コメント

タイトルとURLをコピーしました