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

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

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

※追記(2019/07/10):UIや登録方法が少し変更されていたため、登録方法と画像や一部内容を新しいものに差し替えました。

CODEPEN

トップ

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

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

CODEPENには無料プランと有料プランが存在します。ですが、ソースを共有するだけならばあまり関係ありません。
登録はこちらから
「Sign Up with Email」をクリックすると項目が表示されます。
新規登録画面
[YOUR NAME]: 名前を入力します。
[CHOOSE A USERNAME]: ユーザー名を入力します。
[EMAIL]: メールアドレスを入力します。
[CHOOSE PASSWORD]: パスワードを入力します。
上記項目を入れれば登録完了になります!

その他にも、TwitterやGoogleでもログインが可能です。

これで登録完了です。

実際に使ってみよう

登録後の使い方は簡単です。
新規コード作成法
メインメニュー左上の「Pen」 をクリックすると、編集画面に移行します。

編集画面の説明

コード入力画面
1.タイトル名です。タイトル名はsettingから設定できます。
2.作成したソースコードを保存します。
3.細かい設定をします。詳しくは後述します。
4.htmlのソースを入力します。
5.CSSのソースを入力します。
6.javaScriptのソースを入力します。
7.ソースのプレビューを確認できます。

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

外部プラグインと併せて使う場合はsettingボタンをクリックします。
外部リソース読み込み
1.上部タブより「CSS」もしくは「JavaScript」を選択
2.下部URL入力欄より読み込みたいデータのURLを入力
3.上部ボタン「Save&Close」を押下

ブログに埋め込みたい

埋め込み画面は画面右下の「Embed」ボタンをクリックします(「Embed」ボタンが無い場合、一度セーブをしてください)。
埋め込み画面
1.上部「Theme」より埋め込むデータの見た目を変更
2.下部「Copy&PasteCode」より埋め込みデータをコピー

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


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

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


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

CONTACT US

株式会社プロフェッサはシステム開発・Webサイト制作会社です。
お仕事のご依頼やお困りな事がございましたらお気軽にご連絡ください。


Previous Post

Next Post