Web制作ラボ

【CodePenの使い方を解説】簡単に使えて学習効率アップ!

Web制作ラボ

HTMLやCSS、JavaScriptを勉強している皆さんならば、以下の様な埋め込みを目にされた経験が一度はあるはず。

See the Pen
rNByKBB
by DoGgy (@DoGgy12)
on CodePen.

これはCodePen(コードペン)というサービスです。

コードが書かれているのはわかるけど、なんとな~く見てお終いという方、結構いるのでは無いでしょうか?でもそれは少し損しているかも。。。

今回はCodePenが埋め込まれているブログ記事見たとき、どの様に活用すればいいのかを解説していきます。

CodePenの触り方

CodePenはブラウザ上で実行結果を見ながら、HTML、CSS、JavaScriptのコーディングを行うことが出来るサービスです。

CodePenのサイトで会員登録(無料)を行えば、自分がCodePen上で書いたコードの埋め込み用HTMLを取得することが出来ます。ブログの投稿者は、このサービスを利用してCodePenを記事に埋め込んでいる訳ですね。

それでは読者である我々はどの様に利用すれば良いのか、説明していきます。

基本編 ~ソースコードを見る~

CodePenのウィンドウの左半分にはソースコードが、右半分にはコーディングの結果(Result)が表示されます。

上にある「HTML」「CSS」「JS(JavaScript)」ボタンを押すことでソースコードを切り替えらえれます。(例の場合、JavaScriptは未入力のため非表示)

「Result」ボタンを押すことで結果の表示・非表示が切り替えられます。

この様に、CodePenを埋め込むことで各言語の内容確認実際のコーディング結果をスマートに見ることが出来るのです。

応用編 ~ソースコードをいじってみる~

こちらの機能はCodePenサイトでアカウントを作成(無料)することで利用できます。

CodePenアカウントの作成方法【HTML、CSS、JS】
CodePenを最大限に活用するにはアカウント作成(無料)が必須になります。大して難しい作業ではありませんが、念のため画像付きでアカウント作成の手順をお伝えします。

この機能が使えると他人が書いたコードへの理解が大幅に深まりますので、是非とも登録する事をお勧めします。

以下、既にCodePenのアカウントを所持していることを前提として説明します、

ブログで公開しているコードが気になったら、右上の「EDIT ON CODEPEN」のロゴをクリックします。

すると記事に埋め込まれていたコードが画面いっぱいに表示されます。

そしてこれらのコードは以下の様に自由に編集することが出来ます。
(グラデーションの角度や、変化ポイントをいじっています。)

プログラミングって、その時はわかった気になっていても、あとで実際に自分で入力しようとすると「あれ?ここってどうなってるんだっけ!!!」と焦る場面がありますよね。

ブログの記事などで気に入ったコードを見つけた際には、「見てお終い」ではなく、その場で実際にいじって動かしてみることで、より一層理解が深められることでしょう。

番外編 ~CodePenはオンラインコミュニティ~

CodePenには上記以外にも、以下の様なサービスがあります。

  • 世界中の人が公開しているコードを見ることが出来る
  • コードにコメントが出来る
  • お気に入りのコードをコレクションし、いつでも見ることが出来る

自分が考えたコードを公開しコメントを集める。なんだかソーシャルサイトの様ですね。
それもそのはず、実際にCodePenをwikipediaで調べると下記の様な記載が有ります。

(原文)
CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.
(google翻訳)
CodePenは、ユーザーが作成したHTML、CSS、およびJavaScriptコードスニペットをテストおよび展示するためのオンラインコミュニティです。

ペン(CodePenで作成したコードをそう呼ぶ)の人気ランキングもある様ですので、暇な時間などに覗いてみると、思わぬ発見があるかもしれませんよ。

おわりに

プログラミングって結局は自分で触ってみないと気づかない事が多いと思います。

これまで「あ~CodePenだ。ふ~ん・・・。」とスルーしていた方にも、今回ご紹介した機能を活用し、これからのお勉強に役立てていただければと思います。
(一番勉強しなければいけないのは私自身なのですが、偉そうに言ってすみません。。。)

それでは、一緒にがんばっていきましょう!

トップページへ戻る