owned mediaウェブ制作に役立つコンテンツを発信中!

ウェブプログラミングのテストや練習にCodePenを活用する

最終更新日: Update!!
ウェブやITに関するリテラシーが徐々に高くなっている最近では、ウェブサイトの運用にHTMLやCSS、javascriptといったプログラミングのコードを書くケースも見られるようになってきました。ただし、専門的な知識が必要となるので、ウェブ制作の経験のない方にとってはハードルが高いかもしれません。   とはいっても、このようなスキルがあるとサイト運用においてはかなり役に立ったり、要件によっては必須になる時もあり、経験の浅い方でもある程度のプログラミングの知識や技術が求められているのかもしれません。   そこで今回はブラウザでプログラミングのテストや練習をするのにピッタリな「CodePen」というサービスについてまとめていきたいと思います。  
CodePenとは?
CodePenはいろんなソースコードのサンプルを掲載しているサイトで、ユーザーがブラウザ上で入力したプログラミングのプレビューもできるWebサービスです。有料のアカウントもありますが無料でも利用することができます。 【 CodePen - Front End Developer Playground 】 https://codepen.io/   海外のサイトなので全て英語の表記ですが、インターフェースが洗練されていて初心者の方でもわかりやすく、直感的に操作することが可能です。   ウェブプログラミングのテストや練習にCodePenを活用する   ユーザーはこのサービス上で、プログラミングのプレビューやテストができるだけでなく、自分で作ったコードをCodePen上に公開して、他ユーザーと共有することもできます。  
まずは無料でアカウントを作成
利用するにはアカウントが必要となりますので、まずは無料のアカウントを作成してみましょう。CodePenのサイトにアクセス(https://codepen.io/)して「Sign Up」のボタンをクリックするとアカウント作成画面が表示されます。   ウェブプログラミングのテストや練習にCodePenを活用する   フェイスブックやツイッターなどのアカウントでログインすることもできますが、これらと紐付けない場合はそのままページ下部に進み、アカウント情報を入力していきます。   ウェブプログラミングのテストや練習にCodePenを活用する   アカウントが作成できたら、ログイン画面にアクセスしてログインを行います。ページ内にある「Log In」ボタンをクリックするとアクセスできます。   ウェブプログラミングのテストや練習にCodePenを活用する    
ブラウザ上でプログラミングができる
ログインするとダッシュボードが表示され、他ユーザーが投稿したコードがいくつか表示されており、ここから実際のコードとプレビューのページへとアクセスできます。この画面の上にある「Create」をクリックするとサブメニューが表示されますので「New Pen」をクリックします。   ウェブプログラミングのテストや練習にCodePenを活用する   そうすると画面が切り替わり、コードを記述するエディタとプレビュー画面が表示されます。エディタにはHTML、CSS、javascriptの3つが用意されていますので、それぞれ書き込んだ内容がプレビューにリアルタイムで反映されるようになっています。   ウェブプログラミングのテストや練習にCodePenを活用する   実際にエディタへコードを記述すると、こんな感じでプレビューに反映され確認することができます。   ウェブプログラミングのテストや練習にCodePenを活用する  
  いかがでしょうか、経験の浅い場合に本番サイトにいきなりコードを書くのは少し怖い方も多いかと思いますので、こういったサービスを使って一度コードをテストしてから実際のサイトに反映させると安心ですね。   そこまで複雑な動きのプログラミングを作成しなくても、文字の大きさを変えたり、背景色をつけたり、余白を入れたりという編集はよくあるかと思います。そんな時にとても役立つサービスなのではないでしょうか。   HTMLなどの知識をこれから増やしていこうというビギナーの方はもちろんのこと、バリバリのウェブ開発者でもよく利用するユーザーも多いようです。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram