pexels-photo-207700

HTML・CSS・JSのソースを共有できるサービス「CODEPEN」がすごく便利!

こんにちは、フロントエンジニアのTAKAです。

さて今回は、もう既に記事で何回か使いましたが、ソースコードを共有できるサービス「CODEPEN」についてご紹介致します。

CODEPEN

codepenimg

サイトを見ると既に誰かのソースコードがプレビューされています。
登録すれば自分の制作したソースを周りに共有出来ます。

すごく便利なCODEPEN、登録の仕方は…?

CODEPENには無料プランと有料プランが存在します。
ですが、ソースを共有するだけならばあまり関係ありません。
img_codepen
1.NAME: 名前を入力します。
2.CHOOSE A USERNAME: ユーザー名を入力します。
3.EMAIL: メールアドレスを入力します。
4.CHOOSE PASSWORD: パスワードを入力します。
5.PASSWORD AGAIN: もう一度パスワードを入れます。

これで登録完了です。

実際に使ってみよう

登録後の使い方は簡単です。
img_newpen
+New Pen をクリックすると、編集画面に移行します。

編集画面の説明

img_menu01
1.タイトル名です。タイトル名はsettingから設定出来ます。
2.作成したソースコードを保存します。
3.細かい設定をします。詳しくは後述します。
4.htmlのソースを入力します。
5.CSSのソースを入力します。
6.javaScriptのソースを入力します。
7.作成したコードを埋め込んだりします。詳しくは後述。
そのほか、白い部分にはプレビューが表示されます。

外部からデータを読み込みたいんだけど…

外部プラグインと併せて使う場合はsettingボタンをクリックします。
img_set01
img_set02
1.タイトルを入力します。
2.コードの説明文を入力します。
3.外部CSSを追加出来ます。javaScriptも同じ形です。
またjQueryといった定番のscriptはこのsettingからタブで設定することが出来ます。

ブログに埋め込みたい

埋め込み画面は画面右下の「Embed」ボタンをクリックします。
img_set03
1.埋め込み表示時の表示内容を変えられます(プレビューだけ表示したい、CSSやHTMLだけ表示したい等)
2.このコードをコピー&ペーストして埋め込みます。

See the Pen oYrJPX by Professa (@Professa) on CodePen.


このように表示されます。
img_set04
img_set05
また埋め込みだけではなく、ダウンロードやシェア等も可能です。

今までよりも分かりやすく、簡単にソースが共有できる

pexels-photo
いかがでしたでしょうか?ブログにソースコードを埋め込むユーザーには非常にありがたいサービスですね。
またCODEPENのサイト自体もハイクオリティーなコードが公開されていきますので、勉強にもなるかと思います。

CONTACT US

株式会社プロフェッサはWEB制作会社です。
ウェブサイト制作やシステム開発など、ウェブに関するご相談は下記よりお気軽にどうぞ


Previous Post

Next Post