webサイトにhtml,css,JavaScriptのソースコードと実行結果を貼る方法。

Codepenとは？

Codepenとは、自身のwebサイトにhtmlやcss,JavaScriptのソースコードを実行結果と共に載せることが無料でできるサービスです。

また、他人が上げているソースコードを見ることもでき、web上に自身のソースコードを保存できるので、サイトにログインするだけで自分が今まで書いたソースコードを見ることができwebの勉強をしたい人にもおすすめできるかもしれません。

CodePenを快適に利用できるようにまずはユーザー登録をしましょう。

サイト上部にあるSign Upを選ぶと登録が始まります。

Sign Upを選ぶと上記のような画面になります。

CodePenはメールでのログインの他に、TwitterやGitHubの連携でログインすることもできるので、気軽にすぐ登録できます。

CodePenを利用しソースコードと実行結果を貼る方法を紹介します。

ログインができたら画面上部にあるPenを選択してください。

Penを選択するとソースコードエディタが出てきたと思います。

エディタに何か適当に書いてみましょう。

書き終えたら左上にあるUntitledからソースコードに名前をつけて、右上にあるSaveを押して保存した後、右下にあるEmbedを押して出てきたコードをコピーして自身のサイトにペーストしましょう。

See the Pen Untitled by コココット (@cococodog) on CodePen.

これでCodePenを利用したソースコードをサイトに載せる方法がわかったと思います。

CodePenの初期画面からYourWorkを選ぶと自分がさっき書いたコードが見えます。

JQueryやSassなどをCodePenでは読み込むことができます。

Penを選択するかセーブしたソースコードを開いて右上にあるSettingsを選んでください。

Add Externalと書いてあるところに自分が読み込みたいものを選択して右下ののSave&Closeをクリックすると読み込まれた状態になります。

これでCodePenの主要な操作は紹介できたと思います。

CodePenには公開されているソースコードをいいねをしたりコメントしたり、投稿主をフォローすることができます。

みていて面白いものが多くあるのでよかったら見てみてください！