【超便利】HTML・CSS・JSのコード共有サービス「CodePen」が素晴らしい件

こんにちは！ニタマサ＝NewM(@NewM07x2)です。

本記事では、ソースコードを共有できるサービス「CodePen」についてご紹介します。

では、いきましょう！

CodePenとは？

CodePenは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービスとなっています。

また、ブログなどでソースコードを紹介する時にも利用することが出来て、とても便利です。

具体的には以下のような感じです！

See the Pen RwNdMPB by NewM07x2 (@newm07x2) on CodePen.

※右下の倍率を0.25に設定してください！

CodePenの利便性

上記でもちょろっと書いたのですが、改めてCodePenの利便性を上げていきたいと思います。

• 無料で使うことができる(内部課金あり)
• 操作が簡単
• ソースコード、その表示を他のサイトに埋め込める(シェアできる)
• 埋め込んだサイト内で動的に確認できる
• HTML,CSS,JSの外部ライブラリなども使用できる
• CODEPENのサイトにコードが公開されていきます

ですね。リアルタイムで動作確認できることはとても便利です。

CodePenの登録

CodePenは無料で使用できるといっても簡単な登録が必要になります。

有料プランに強制的に入会するといった物はないので、サクッと登録していきましょう！

まずは、HPへアクセスしていきます。

続いて、右上の「Sign Up」を押下します。

押下後、以下のような画面が表示されます。

登録形式は下記方法を選択することが出来ます。

• Twitter
• GitHub
• Facebook
• Email

アカウントがあればどれでも簡単に登録することが出来ます。
自分にあった登録で問題なしです。

Emailを選択した場合は以下の項目を登録することになります。

• [YOUR NAME]: 名前
• [CHOOSE A USERNAME]: ユーザー名
• [EMAIL]: メールアドレス
• [CHOOSE PASSWORD]: パスワード

CodePenの使い方

登録が終わったら実際に使用していきましょう。

左上にある「Pen」を押下すると以下のような画面に飛びます。

この画面上にHTML・CSS・JSを入力していくと動的に挙動を確認することが出来ます。

画面の見た目は左上の「Change View」で変更も可能です。

外部からデータの読み込み

外部プラグインと併せて使用したい場合はsettingボタンを押下し、カーソルを「JS」に合わせます。

検索項目が出てくるので、その部分に「jQuery」「Vue」と入力するとCDNを取り組むことができるので、使用したいライブラリを適宜使用可能です。

CSSでは「SCSS」も利用可能で、Base設定の初期化も可能です。

ブログなどの外部サイトに組み込む

コードの入力が完了したら、右下にある「Embed」を押下します。
※表示されていない方は「Save」ボタンを押して、画面をリロードさせてみてください。

すると、以下のようなポップアップが表示されます。

スクロールしていくと下の方にコードが表示されているので、こちらをコピって外部サイトに貼り付けていきます。

WordPressの場合はショートコードを用いて埋め込むことも可能です。
また、カスタムHMTLでHTMLを貼り付けても埋め込むことも可能です。

以上で、作業か完了になります。！

まとめ

いかがだったでしょうか。

今回は「CodePen」のサービスをご紹介してきました。

ブログとかにソースコードを埋め込みたい時っていろいろ面倒な時ってありますよね。「CodePen」はそんな悩みを解決してくれるのでとてもオススメです。

ぜひ、実際にやってみてください！

もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います！！！
（ついでにフォローしていただけると最高に嬉しいです笑）

では！See you again!(´∀｀)