Codepenの始め方と使い方-記事内にコード埋め込み【無料便利機能】

「自分で書いたコードを共有したい」「記事内にコードを埋め込みたい」「コードのプレビューを表示したい」この悩みを解決してくれる便利な機能が揃ったサイトを紹介します。

無料会員で自由にコードが書ける「Codepen」

CodePenは、Web開発者がコードを書き、デモを作成し、共有することができるオンラインのコミュニティプラットフォームです。

HTML、CSS、JavaScriptのコードを書いて、リアルタイムに実行結果を見ることができます。また、他の人の作品を見たり、コードをフォークして自分なりのアレンジを加えることもできます。CodePenは、個人開発者から大手企業まで、さまざまな開発者に利用されています。また、無料版と有料版があり、有料版ではより多くの機能やプロジェクトの管理機能などが利用できます。

WEB制作などでデザインやコンテンツが似ている場合は作業効率アップの為に、コードの使い回しや微修正などでコードを保存しておくことにも使えますね。

クラウドブラウザのため、PCを変えてもどこでもインターネットがあればいちでも利用可能なところもいい。

Codepenの使用例

コードとプレビューの表示

デモページ【コード付き】

Codepenのユーザー登録

登録することでコードの保存が出来るようになるので、ユーザー登録をします。

「Sign Up」をクリック。

「Twitter」「GitHub」「Fecebook」「メールアドレス」のどれか一つ選択

入力箇所を埋めて「Submit」をクリックすると登録が完了します。

Codepenでコードを書く

ユーザー登録が完了した後は、コードを自由に書くことが出来るようになります。
penをクリックすると、HTML・CSS・JSのコーディング画面とプレビュー画面が表示されます。

上がコーディング画面で下がプレビュー画面です。右上のアイコンから3つ目の窓マークをクリックすることで、レイアウトを右か左にも変更可能。

CodepenではHTML宣言文は不要で、body内に記述する内容から入力することができます。

HTMLを入力すると自動でプレビュー画面に反映されます。

HTMLとCSSを入力して左上のペンマークをクリックして名前を付けて、右上の「Save」をクリックすると保存が出来ます。

外部リンクを読み込む

jQuery・slick・Font Awesomeなども読み込むことが出来ます。

Codepenのデフォルトは外部リンクは読み込まれていないので、読み込む設定が必要になります。外部リンク設定はCSSの歯車をクリック。

Add External Scripts/Pensの部分で検索するか、直接URLを入力してリンクさせます。

直接URLを入力

CSS

CSSリンクURL

<!-- slick-theme.css -->
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css

<!-- slick.css -->
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

<!-- fontawesome -->
https://use.fontawesome.com/releases/v5.15.1/css/all.css

JS

JSリンクURL

<!-- jquery.min.js -->
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

<!-- slick.min.js -->
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js