Web開発に関する多くのイライラすることの1つは、プロジェクトを他の人と簡単に共有する方法がないことです。 多くの場合、プロジェクトをWebサーバーでホストするか、対応するすべてのファイルを、作成したものを確認したい人に送信する必要があります。 しかし、CodePenと呼ばれるきちんとしたオンラインツールのおかげで、そのことを心配する必要はもうありません。
CodePen.io
CodePenは無料のツールです。これにより、費用を一切支払うことなくオンラインでプロジェクトをホストできます。 開始するには、CodePen.ioにアクセスして無料のアカウントを作成してください。
それが完了したら、画面の右上隅にある「新しいペン」ボタンをクリックして「ペン」を作成できます。
その後、HTML、CSS、およびJavaScriptを対応するボックスに追加できます。 コードの追加を開始すると、作成しているもののライブプレビューが表示されます。 左上隅で最初のペンにタイトルを付けることができます。 最初の[保存]をクリックすると、ページのURLを友人、家族、同僚と簡単に共有して、作業内容を見ることができます。
これは、いくつかのコードを含むペンの外観です（トリビュートページと呼ばれる無料のコードキャンププロジェクトのおかげです）。
独自のペンを作成する場合、開始する前に設定を確認することをお勧めします。 [新しいペン]ボタンをクリックすると、コードの入力を開始する準備ができたペンテンプレートが表示されます。 右上隅には「設定」ボタンがあります。 それをクリックします（以下の画面が表示されます）。
ここでは、HTML、CSS、およびJavaScriptタブを使用して特定の情報を追加できます。 [HTML]タブでは、メタ情報を追加できます。
タブなど。 CSSでは、LESSやSassなどのCSSプリプロセッサを追加できます。 それだけでなく、BootstrapやFoundationなどの外部CSSを追加できます。 [JavaScript]タブで、BabelやCoffeeScriptなどのJavaScriptプリプロセッサを追加できます。 さらに、Angular、React、Lodash、D3などの外部JavaScriptフレームワークを追加できます。
最後に、CodePenを使用すると、表示している「ビュー」を変更できます。 デフォルトのビューはエディタービューで、コードを入力して、下のコンソールで小さなプレビューを取得できます。 しかし、他のオプションもあります。特に便利なのは「フルページ」ビューで、プロジェクトをWebサイトで公開されているかのように見ることができます。 切り替えることができる他のビューがいくつかありますので、遊んでみる価値があります！
CodePenは本当にすてきなツールであり、その有用性の表面に触れただけです。 CodePen.ioに進み、それを使用していくつかのプロジェクトで作業し、それが気になったら、友人や同僚と共有する価値があります。
CodePenについてどう思いますか？ 同様のツールを使用しましたか？ 下のコメントセクションでお知らせください！
