Blog
CODE
CSS
HTML
JavaScript
jQuery

【超便利】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!(´∀`)