Home
HTML
【初心者向け】CodePenの使い方からサイト埋め込み方法

【初心者向け】CodePenの使い方からサイト埋め込み方法

公開日
2021.02.23
更新日
2021.11.20
【初心者向け】CodePenの使い方からサイト埋め込み方法

どうも!かけちまるです!
プログラミングなどの技術系ブログなどでよく見るCodePenの埋め込み、ソースコードと実装結果が同時に見れるあれです。
読ませてもらう側としては見やすくて助かりますよね。

実はあの埋め込み、めっちゃ簡単にできるんです。
また、埋め込むだけでなくWeb上でコーディングができるのでよく使うソースコードの記録ができたり、ソースコードの共有できたりと様々な使い道があります。

この記事では、

  • ・「CodePenってなにができるの?」
  • ・「CodePenの使い方がいまいち分からない」
  • ・「CodePenを使ってみたい」

という人を対象に

  • ・CodePenってなにができる?
  • ・CodePenの登録方法
  • ・CodePenの使い方
  • ・CodePenのサイト埋め込み方法

を解説していきます。

無料枠のみの解説になりますので、有料枠の解説は割愛します。

CodePenってなにができる?

CodePenとは、Webブラウザ上で「HTML、CSS、JavaScript」などのコーディングができるサービスです。
コーディングした結果がリアルタイムで反映されるのでCSS、JSアニメーションの練習に使えます。

CodePenは簡単にいうと、コーディングしたソースコードを他人へシェアできるフロントエンドエンジニア用のSNSみたいなものです。

なので、他のエンジニアが書いたソースコードの見れるのでプログラミング初心者〜上級者までとても勉強になると思います。

CodePenでできること
  • ・Web上で「HTML、CSS、JavaScript」のコーディングができる
  • ・Webサイトにソースコードを埋め込める
  • ・CodePen内でソースコードをシェアできる
  • ・Twitter、Facebookにシェアできる
  • ・ソースコードをダウンロードできる

CodePenの使い方

ここでは、初心者向けにCodePenの登録方法から使い方まで解説します。

CodePenの登録方法から使い方まで
  • ①CodePenにアクセス
  • ②会員登録
  • ③「Pen」をクリック
  • ④各言語の設定
  • ⑤コーディング
1

CodePenにアクセス

CodePenのTOPページ
2

会員登録

CodePenにアクセスしたら画面右上の「Sign Up」をクリック
アカウント登録画面が開きます。
アカウント登録は「Twitter」「GitHub」「Facebook」のアカウントで登録する事もできます。
メールアドレスで登録する場合は、「Sign Up with Email」をクリックするとフォームが開くので入力して「Submit」をクリックで登録完了です。

CodePenの登録画面
3

「Pen」をクリック

登録が完了したら、左メニューの「Pen」をクリック

CodePenの登録後画面
4

各言語の設定

画面上部の「Settings」から「HTML、CSS、JS」の外部ファイルの読み込みなどの設定ができます。

他にも、「Untitled」でPenの名前を設定「Change View」で画面レイアウトの変更ができます。

Penの画面設定

画面上部の「Settings」からの外部ファイルの読み込みなどの設定の詳細を説明します。

Penの言語設定
HTMLの詳細設定
  • ・HTML Preprocessor・・・HamlやPugなどの記法を選択できます。
  • ・Add Class(es) to ・・・htmlタグにクラスを追加します
  • ・Stuff for ・・・headタグ内の記述を設定できます。
  • ・GoogleFontなどの読み込みができます。
CSSの詳細設定
  • ・CSS Preprocessor・・・SassやSCSSなどの記法を選択できます。
  • ・CSS Base・・・reset.cssの選択ができます。
  • ・Vendor Prefixing・・・ベンダープレフィックス(「-moz-」「-webkit-」など)を自動で付与するか選択できます。
  • ・Add External Stylesheets/Pens・・・外部cssを指定できます。
JSの詳細設定
  • ・JavaScript Preprocessor・・・BabelやTyprScriptなど言語を選択できます。
  • ・Add External Scripts/Pens・・・jQueryやVue.js、プラグインなどをCDNで読み込む事ができる。
  • ・Add Packages・・・パッケージを読み込む事ができます。
5

コーディング

あとは思うがままにコーディングを楽しんでください。
ちなみにHTMLはbodyタグ内のソースコードを書けばOKです。

CodePenをWebサイトに埋め込む方法

では、CodePenでコーディングしたソースコードをWebサイトに埋め込む方法を解説していきます。

CodePenを埋め込むまで
  • ①共有したいPenを開く
  • ②「Embed」をクリック
  • ③ビジュアルの設定
  • ④埋め込みコードをサイトにコピペ
1

共有したいPenを開く

CodePenにログインした状態で「Your Work」の中から埋め込みたいPenを開きます。

CodePenのYour Work画面
2

「Embed」をクリック

画面右下にあるメニューの中から「Embed」をクリック

選択したPen
3

ビジュアルの設定

「Embed」をクリックするとモーダルが開くので、ここでWebサイトに埋め込んだときのビジュアルを設定します。

  • ・Theme・・・「Light」と「Dark」から埋め込みPenの色を選択できます。
  • ・Default State・・・チェックするとサイトの埋め込みPenはクリックするまで結果を実行しません。
  • ・Drag to resize・・・ドラッグ&ドロップで埋め込みPenの高さを設定できます。

※Default Stateでは、チェックを入れないとサイトの読み込みが遅くなるので、チェックを入れることをオススメします。

埋め込みPenの設定
4

埋め込みコードをサイトにコピペ

ビジュアルの設定が完了したら、下の方に埋め込みタグが発行されているます。
あとは、埋め込みタグを自分のサイトにコピペすれば完了です。

iframeとか色々ありますが「HTML(recommended)」が推奨みたいなのでそれを選んでおけばOKだと思います。

埋め込みPenの埋め込みコードをコピー

埋め込み完了例

  • ・ThemeをLight
  • ・Default Stateにチェック
  • ・Drag to resizeで高さを400pxに調整

上記の設定で埋め込んだ例が以下になります。

See the Pen Scroll Animation Template by kakechimru (@kakechimaru)on CodePen.

その他の機能

Webサイトにソースコードを埋め込む以外の機能も2つ紹介します。

ソースコードをSNSにシェア

SNSにシェアしたいPenを開いて右下のメニューの「Share」をクリックします。

Twiter、Facebook、SMSでシェアする事ができます。
SMSでシェアする場合は、電話番号の最初に国コードを忘れずに。
日本の場合は「+81」です。

ソースコードをダウンロード

ダウンロードしたいPenを開いて右下のメニューの「Export」をクリックします。
「Export.zip」というのをクリックするとzipファイルがダウンロードされます。

Penのその他の機能

まとめ

CodePenの使い方からWebサイトに埋め込む方法を解説しました。
他にも、コーディングの練習や他のエンジニアが作っているPenを見てデザインやアニメーション、ソースコードの見やすい書き方など学べる事がたくさんあるので使いこなせると実装の幅が広がるのではと思います。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【JavaScript】ボタンを押した時の効果音を実装する方法

【JavaScript】ボタンを押した時の効果音を実装する方法

【videoタグ】HTMLでWebサイトに動画を埋め込む

【videoタグ】HTMLでWebサイトに動画を埋め込む

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

positionで要素を中央寄せにする方法【CSS】

positionで要素を中央寄せにする方法【CSS】

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

【完全禁止は難しい】Webサイトの画像保存を禁止させる方法

【完全禁止は難しい】Webサイトの画像保存を禁止させる方法