CodePenとは?使い方/埋め込み方法/ライセンス表記を画像付きで解説

「ブログにソースコードを埋め込みたいけど、何かよい方法はないかな?」
「CodePenって何なの? どんなことができるのか知りたい!」
「CodePenの使い方やWebサイトにソースコードを埋め込む方法が知りたい!」

プログラミングをしている人は、自分の書いたソースコードを共有したり、自分の運営するブログやWebサイトで解説記事を書いたりすることも多いでしょう。

ソースコードを共有するのにおすすめなのが、いまや多くの技術系ブロガーも愛用する『CodePen(コードペン)』です。

本記事では、CodePenについて以下3点を中心に解説します。

  • CodePenでできること
  • CodePenの使い方
  • 他人の作ったCodePenを引用する際の注意点

CodePenでできること

CodePenはWebブラウザ上でHTML/CSS/JavaScriptなど、主にフロントエンド言語のコーディングができるサービスです。

CodePenを利用する目的としてもっとも多いのが、ソースコードをブログやWebサイトなどでシェアすること。コーディングしたものがリアルタイムで反映されるため、コーディング初心者の練習用にも使えます。

CodePenでできることは以下のとおりです。

<CodePenでできること>

  • ブラウザ上でHTML/CSS/JSのコーディングができる
  • ソースコードを共有できる
  • Webサイトにコードを埋め込める

できること1. ブラウザ上でHTML/CSS/JSのコーディングができる

CodePenを使えば、Webブラウザ上でHTML/CSS/JavaScriptなどのコーディングが可能です。

これら以外にも、HTML/CSS/JavaScriptに関連する言語やライブラリであれば扱うことができます。

<CodePenで扱える言語やライブラリ例>

  • Haml
  • Markdown
  • Sass
  • TypeScript
  • Pug
  • Babel
  • jQuery
  • Vue.js

Codepen

このようにCodePenでは、上段にHTML/CSS/JavaScriptを記述するエディタが用意されています。

コーディングをするとその内容が、リアルタイムで下段スペースに反映される仕組みです。

できること2. ソースコードを共有できる

CodePenで書いたソースコードは、TwitterやFacebookなどのSNSや、他のCodePenユーザーに共有できます。

codepen

CodePen内では、他のユーザが作ったソースコードや簡単なアプリケーションを見られます。

他のユーザーがつくったユニークな作品や、複雑なアニメーションなどのソースコードも見れるため、フロントエンドを勉強している人にはぴったりです。

CodePenユーザーが作ったソースコードに対しては、「いいね」やコメントもできます。フロントエンドエンジニアのためのSNSとしても使えますね。

できること3. Webサイトにコードを埋め込める

CodePenでは、作ったソースコードをブログやWebサイトに埋め込むことも可能です。

ソースコードを埋め込むプラグインは多数存在しますが、読者に見やすくソースコードを共有するには、CodePenがとても優れています。

CodePenをWebサイトに埋め込むメリットは以下のとおり。

<CodePenをWebサイトに埋め込むメリット>

  • ユーザーが自由に編集できる
  • コードと結果を1画面で照らし合わせられる
  • 複数の言語を同時に見られる

実際にCodePenをWebサイトに埋め込むと、このように表示されます。

See the Pen Only CSS: Sakura by Yusuke Nakaya (@YusukeNakaya) on CodePen.light

▲出典:https://codepen.io/YusukeNakaya/pen/BaoNaJY

非常に見やすく、どんなソースコードを書けばこういった結果になるのかが一目で分かりますね。

コードの解説記事などにぴったりです。

CodePenの使い方

ここからは「CodePenを実際に使ってみたい!」という方向けに、Codepenの登録からコーディングするまでの方法を解説します。

CodePenの使い方の手順は以下のとおりです。

<CodePenの使い方の手順>

  1. CodePenにアクセスする
  2. 会員登録する
  3. 「Pen」をクリックする
  4. エディタの設定をする
  5. コーディングする

まずはCodePenにアクセスしましょう。

codepen

画面右上の「Sign Up」から新規登録をします。

codepen

「Twitter」「GitHub」「Facebook」「メールアドレス」から登録可能です。

メールアドレスで登録する場合は、必要な情報を入力して「Submit」をクリックします。

codepen

登録が完了したら「Pen」をクリックしましょう。

Codepen

上の画面でコーディングできます。

codepen

右上の「Setting」をクリックすれば、細かな設定が可能です。

「Preprocessor」のドロップダウンからは、Hamlやpug、Sassなど好きな言語を選択できます。

またJavaScriptでjQueryやVue.jsを扱う場合は、CDNを検索して読み込めば使用可能です。

CodePenのプレビューをWebサイトに埋め込む方法

次にCodePenで作成したソースコードをWebサイトに埋め込む方法をご紹介します。

codepen

共有したいソースコードが完成したら、右下にある「Embed」をクリック。

codepen

プレビューが正しく表示されているか確認します。

下に表示されている埋め込み用のHTMLコードをコピーします。

codepen

WordPressのサイトに埋め込む場合は、編集画面を「テキストモード」にし、任意の場所にコピーしたHTMLコードを貼り付ければ埋め込み完了です。

他人の作ったCodePenを引用する際の注意点

「他人の作ったCodePenをWebサイトに埋め込んでもいいの?」
「他人の作ったCodePenのコードスニペットをコピーして使っていいの?」

以下ではこのような疑問に答えるために、CodePenの著作権や引用について詳しく解説します。

CodePenには「パブリック(public)」と「プライベート(private)」の2つの公開タイプがあります。CodePen上で検索・閲覧できるものはすべてパブリックです。

Codepen公式ドキュメント(英語)によると、CodePen上で自由に閲覧できるパブリック設定のものについては「MITライセンス」と呼ばれる非常に制限のゆるいライセンスが付与されており、自由にコピーして使用できると記載されています。

【MITライセンス】

このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。

(引用:Wikipedia

ただし上記にあるとおり、著作情報を重要な部分に記載する必要があります。

Codepenで公開されている作品のプレビューを、以下のようにそのまま記事内に貼り付ける場合、スクリプト内に自動で著作情報が含まれます。したがって特別な表記をくわえる必要はありません。

また、プレビュー右上の「EDIT ON CODEPEN」をクリックすることで、作者ページに飛ぶことができます。

See the Pen
Only CSS: Sakura
by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

スクリプト

▲上記プレビューのコードスニペットには著作情報が含まれている。Codepen公式は「表示される場所にかかわらずライセンスは適用される(英語)」と述べている。

なおCodepenのプレビューではなく、作品そのものを自分のサイトに組み込みたい場合、当該コードのわかりやすい位置に著作情報をくわえましょう。

See the Pen
vYNOJov
by Shinichi Hikosaka (@shinichi-hikosaka)
on CodePen.

CodePenの著作権についてまとめると、以下のとおりです。

  • CodepenのプレビューをWebページに埋め込む場合:
    著作情報が自動で埋め込まれるため、特別な対応の必要なし
  • コードスニペットそのものをWebページにコピーして利用する場合:
    当該箇所のわかりやすい位置に、コメントアウトで著作情報を記載する

まとめ

CodePenの使い方や登録方法、他人のソースコードを引用するときの注意点について解説しました。ソースコードを引用するのにとても便利なCodePen、ぜひ使い方をマスターしてください。

  • CodePenは、ブラウザでリアルタイムにコーディングできるサービス
  • CodePenをWebサイトに埋め込むと、読者にコーディング結果を見せやすい
  • Codepenを引用する場合は、重要な部分に著作表示を記載する

(執筆:HikoPro 編集:Workship MAGAZINE編集部)

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

平均時給2,900円。高単価なお仕事をしませんか?

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)が、そんな悩みを解決します!

  • 28,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 平均時給2,900円の高単価案件のみ掲載
  • お仕事成約でお祝い金1万円プレゼント

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ