普段webサイトを制作する際、デザインなどをコーディングでどう実現するかを検討することがあります。
デザインやアニメーションなどをコーディングでどう実装するかを検討する部分が出てくることがあります。検討せずにそのままコーディングの工程に進んだ場合、予想以上に時間がかかってくるなどの可能性もあります。
そんな時、コーディングの工程を始める前にwebブラウザ上でコーディングをして、その実行結果をリアルタイムで確認することのできる「CodePen」というサイトを紹介します。
「CodePen」を使うことで、事前にコーディングでどれだけの工数がかかるのかを予想しやすくなり、場合によってはデザイン部分の変更を検討することも対応しやすくなります。

CodePenとは何か？

「CodePen」とは、上記にも記載した通りWebブラウザ上でHTML、CSS、JavaScriptのコードを書いてその実行結果をリアルタイムで見ることのできるWebサービスです。

CodePenの使い方

①「CodePen」のサイトを開いたら、「Start Coding」をクリックしてください。

②するとコードを実行できる画面になるので、ここにコードを書いていくと、下の白い背景エリアにコードの実行結果がリアルタイムで表示されます。

無料で会員登録をしなくても使用できますが、会員登録をすると記載したコードを保存もできるので、是非使ってみてください。