ウェブやITに関するリテラシーが徐々に高くなっている最近では、ウェブサイトの運用にHTMLやCSS、javascriptといったプログラミングのコードを書くケースも見られるようになってきました。ただし、専門的な知識が必要となるので、ウェブ制作の経験のない方にとってはハードルが高いかもしれません。   とはいっても、このようなスキルがあるとサイト運用においてはかなり役に立ったり、要件によっては必須になる時もあり、経験の浅い方でもある程度のプログラミングの知識や技術が求められているのかもしれません。   そこで今回はブラウザでプログラミングのテストや練習をするのにピッタリな「CodePen」というサービスについてまとめていきたいと思います。  

CodePenとは？

CodePenはいろんなソースコードのサンプルを掲載しているサイトで、ユーザーがブラウザ上で入力したプログラミングのプレビューもできるWebサービスです。有料のアカウントもありますが無料でも利用することができます。 【 CodePen - Front End Developer Playground 】 https://codepen.io/   海外のサイトなので全て英語の表記ですが、インターフェースが洗練されていて初心者の方でもわかりやすく、直感的に操作することが可能です。     ユーザーはこのサービス上で、プログラミングのプレビューやテストができるだけでなく、自分で作ったコードをCodePen上に公開して、他ユーザーと共有することもできます。  

まずは無料でアカウントを作成

利用するにはアカウントが必要となりますので、まずは無料のアカウントを作成してみましょう。CodePenのサイトにアクセス（https://codepen.io/）して「Sign Up」のボタンをクリックするとアカウント作成画面が表示されます。     フェイスブックやツイッターなどのアカウントでログインすることもできますが、これらと紐付けない場合はそのままページ下部に進み、アカウント情報を入力していきます。     アカウントが作成できたら、ログイン画面にアクセスしてログインを行います。ページ内にある「Log In」ボタンをクリックするとアクセスできます。      

ブラウザ上でプログラミングができる

ログインするとダッシュボードが表示され、他ユーザーが投稿したコードがいくつか表示されており、ここから実際のコードとプレビューのページへとアクセスできます。この画面の上にある「Create」をクリックするとサブメニューが表示されますので「New Pen」をクリックします。     そうすると画面が切り替わり、コードを記述するエディタとプレビュー画面が表示されます。エディタにはHTML、CSS、javascriptの3つが用意されていますので、それぞれ書き込んだ内容がプレビューにリアルタイムで反映されるようになっています。     実際にエディタへコードを記述すると、こんな感じでプレビューに反映され確認することができます。    

---

  いかがでしょうか、経験の浅い場合に本番サイトにいきなりコードを書くのは少し怖い方も多いかと思いますので、こういったサービスを使って一度コードをテストしてから実際のサイトに反映させると安心ですね。   そこまで複雑な動きのプログラミングを作成しなくても、文字の大きさを変えたり、背景色をつけたり、余白を入れたりという編集はよくあるかと思います。そんな時にとても役立つサービスなのではないでしょうか。   HTMLなどの知識をこれから増やしていこうというビギナーの方はもちろんのこと、バリバリのウェブ開発者でもよく利用するユーザーも多いようです。