【超便利】HTML・CSS・JSのコード共有サービス「CodePen」が素晴らしい件
![](https://newmtube07.com/wp-content/uploads/2020/06/0a6b56127fa4b1af7bce515556406bef-1024x530.png)
こんにちは!ニタマサ=NewM(@NewM07x2)です。
本記事では、ソースコードを共有できるサービス「CodePen」についてご紹介します。
では、いきましょう!
目次
CodePenとは?
CodePenは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービスとなっています。
また、ブログなどでソースコードを紹介する時にも利用することが出来て、とても便利です。
具体的には以下のような感じです!
See the Pen RwNdMPB by NewM07x2 (@newm07x2) on CodePen.
※右下の倍率を0.25に設定してください!
CodePenの利便性
![](https://newmtube07.com/wp-content/uploads/2020/06/c6e858d2618e6de33c99425c761525a2-1024x534.png)
上記でもちょろっと書いたのですが、改めてCodePenの利便性を上げていきたいと思います。
- 無料で使うことができる(内部課金あり)
- 操作が簡単
- ソースコード、その表示を他のサイトに埋め込める(シェアできる)
- 埋め込んだサイト内で動的に確認できる
- HTML,CSS,JSの外部ライブラリなども使用できる
- CODEPENのサイトにコードが公開されていきます
ですね。リアルタイムで動作確認できることはとても便利です。
CodePenの登録
![](https://newmtube07.com/wp-content/uploads/2020/06/3e95ddd7ea357166c1e3892ae719960f-1024x542.png)
CodePenは無料で使用できるといっても簡単な登録が必要になります。
有料プランに強制的に入会するといった物はないので、サクッと登録していきましょう!
まずは、HPへアクセスしていきます。
続いて、右上の「Sign Up」を押下します。
押下後、以下のような画面が表示されます。
![](https://newmtube07.com/wp-content/uploads/2020/06/eeb4b3189ee20a6259256f00002b8d2b-1024x514.png)
登録形式は下記方法を選択することが出来ます。
- GitHub
アカウントがあればどれでも簡単に登録することが出来ます。
自分にあった登録で問題なしです。
Emailを選択した場合は以下の項目を登録することになります。
- [YOUR NAME]: 名前
- [CHOOSE A USERNAME]: ユーザー名
- [EMAIL]: メールアドレス
- [CHOOSE PASSWORD]: パスワード
CodePenの使い方
登録が終わったら実際に使用していきましょう。
![](https://newmtube07.com/wp-content/uploads/2020/06/c6e1256d0d1e14096e1187d32f12866d-1024x537.png)
左上にある「Pen」を押下すると以下のような画面に飛びます。
![](https://newmtube07.com/wp-content/uploads/2020/06/a483d970b4400194b486d16131773bf7-1024x496.png)
この画面上にHTML・CSS・JSを入力していくと動的に挙動を確認することが出来ます。
![](https://newmtube07.com/wp-content/uploads/2020/06/ca314891ecb14bab043ead296885f530-1024x510.png)
画面の見た目は左上の「Change View」で変更も可能です。
外部からデータの読み込み
![](https://newmtube07.com/wp-content/uploads/2020/06/be512bbbcf324a8ea2e1a0bcdc8efa5a-1024x486.png)
外部プラグインと併せて使用したい場合はsettingボタンを押下し、カーソルを「JS」に合わせます。
検索項目が出てくるので、その部分に「jQuery」「Vue」と入力するとCDNを取り組むことができるので、使用したいライブラリを適宜使用可能です。
CSSでは「SCSS」も利用可能で、Base設定の初期化も可能です。
ブログなどの外部サイトに組み込む
![](https://newmtube07.com/wp-content/uploads/2020/06/134a3e0059bbea2885f20e579cd44a5f-1024x560.png)
コードの入力が完了したら、右下にある「Embed」を押下します。
※表示されていない方は「Save」ボタンを押して、画面をリロードさせてみてください。
すると、以下のようなポップアップが表示されます。
![](https://newmtube07.com/wp-content/uploads/2020/06/f626034eb976033937580ebc0c774c03-1024x666.png)
スクロールしていくと下の方にコードが表示されているので、こちらをコピって外部サイトに貼り付けていきます。
WordPressの場合はショートコードを用いて埋め込むことも可能です。
また、カスタムHMTLでHTMLを貼り付けても埋め込むことも可能です。
以上で、作業か完了になります。!
まとめ
いかがだったでしょうか。
今回は「CodePen」のサービスをご紹介してきました。
ブログとかにソースコードを埋め込みたい時っていろいろ面倒な時ってありますよね。「CodePen」はそんな悩みを解決してくれるのでとてもオススメです。
ぜひ、実際にやってみてください!
もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います!!!
(ついでにフォローしていただけると最高に嬉しいです笑)
では!See you again!(´∀`)