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


ブラウザ上でプログラミングができる
ログインするとダッシュボードが表示され、他ユーザーが投稿したコードがいくつか表示されており、ここから実際のコードとプレビューのページへとアクセスできます。この画面の上にある「Create」をクリックするとサブメニューが表示されますので「New Pen」をクリックします。


いかがでしょうか、経験の浅い場合に本番サイトにいきなりコードを書くのは少し怖い方も多いかと思いますので、こういったサービスを使って一度コードをテストしてから実際のサイトに反映させると安心ですね。 そこまで複雑な動きのプログラミングを作成しなくても、文字の大きさを変えたり、背景色をつけたり、余白を入れたりという編集はよくあるかと思います。そんな時にとても役立つサービスなのではないでしょうか。 HTMLなどの知識をこれから増やしていこうというビギナーの方はもちろんのこと、バリバリのウェブ開発者でもよく利用するユーザーも多いようです。
sponserd
keyword search
recent posts
- 【レビュー】腰痛対策に機能性の高いエルゴノミクスチェアを導入してみました
【レビュー】腰痛対策に機能性の高いエルゴノミクスチェアを導入してみました
- ウェブ・デザイン制作と事業運営の2022年振り返り
ウェブ・デザイン制作と事業運営の2022年振り返り
- アクセシビリティインサイトのチェック項目に対応する
アクセシビリティインサイトのチェック項目に対応する
- Lighthouseのスコア改善に向けた対策例まとめ
Lighthouseのスコア改善に向けた対策例まとめ
- 【フリーランスの仕事場】制作環境を整えたのでレビューしてみました
【フリーランスの仕事場】制作環境を整えたのでレビューしてみました
- ウェブ・デザイン制作と事業運営の2021年振り返り
ウェブ・デザイン制作と事業運営の2021年振り返り
- 【800記事達成】これまでのメディアサイト運用について振り返ってみる
【800記事達成】これまでのメディアサイト運用について振り返ってみる
- 【法人1年目】会社設立までの流れと設立後の状況を振り返ってみる
【法人1年目】会社設立までの流れと設立後の状況を振り返ってみる
categories