CodePenとは｜使い方・料金・埋め込みと2.0の変更点を実例で解説

CodePen では、書いたコードを Blocks（Sass や TypeScript などの変換の仕組み）が変換し、プレビューの iframe の中で動かします。保存すると URL ができ、そのまま共有・埋め込みができます。

flowchart TD
    A[HTML・CSS・JS を書く<br>Sass・TypeScript も可] --> B[Blocks が変換<br>scss は css に・ts は js に]
    B --> C[プレビューに表示<br>iframe の中で実行]
    C --> D[保存して URL で共有]
    D --> E[埋め込み・Collection<br>デプロイは PRO]

急いでいる人向けに、よく調べられることを先にまとめます。

知りたいこと	答え	詳しい節
何をするものか	HTML・CSS・JS を書いて即表示・共有	CodePenとは
無料で使えるか	使える。公開 Pen は無制限・1 Pen 3ファイル	料金
有料プラン	年払いで月8・12・26ドルの3段階	料金
Pen と Project の違い	Project は2.0で Pen に統合済み	Pen・Collection・Project
ライブラリの読み込み	import 文か CDN の URL を書く	外部ライブラリ
ブログに載せたい	Share → Embed のコードを貼る	埋め込み
ブラウザが固まった	URL に ?turn_off_js=true を付ける	無限ループの保護
外部 API が呼べない	相手の API が CORS を許可していない	CORS
JSFiddle 等との違い	主な用途と動く場所が違う	違い表

確認環境：Ubuntu 24.04・Chromium 141.0.7390.37（Playwright 1.56.0 で操作）・Node.js 22.22.2・Dart Sass 1.106.1・TypeScript 7.0.2・acorn 8.19.0・Python 3.11.15。Pen と同じ HTML・SCSS・TypeScript を手元で変換して Chromium で動かし、CodePen の公式ブログが説明している無限ループ保護（ループに脱出チェックを差し込む方式）を acorn で再現して、保護あり・なしの動きを比べました。CORS・import map・iframe の Console の実行コンテキスト・Prefill API が送るフォームの中身も、ローカルのサーバーと Chromium で確かめています。CodePen の画面・機能・料金・制限は blog.codepen.io の公式ドキュメント（2.0 の Docs と Classic Docs）と codepen.io の料金ページで、JSFiddle・StackBlitz・CodeSandbox は各公式ページで確かめました（確認日 2026年10月22日）。

CodePenとは（何ができる・誰が使う）

この節では、CodePen がどんなサービスで、何に使われているかが分かります。

CodePen（コードペン）は、ブラウザだけで HTML・CSS・JavaScript を書き、結果をその場で見て、URL で共有できるオンラインのコードエディター兼コミュニティです。 2012年に Alex Vazquez・Tim Sabat・Chris Coyier が始めました。公式ドキュメントは、Pen を「ファイルと Blocks の集まりで、ビルドされて CodePen 上でホストされるウェブサイト」と説明しています。使い捨ての試し書きから、チームのデモ、本番のウェブサイトまで使われる、とも書かれています。

公式サイトとドキュメントは英語です。画面の言葉（Save・Fork・Share・Embed など）はこの記事でも英語のまま書きます。

Pen・Collection・Projectの違い

この節では、CodePen に出てくる3つの言葉の違いと、今はどれを使うかが分かります。

作るものは「Pen」、Pen をまとめるのが「Collection」、複数ファイルを扱っていた「Project」は2.0で Pen に統合されました。 公式ドキュメントの「Why Did Everything Change?」には、すべての Project が2.0の Pen に変換されたこと、「Project にできて Pen にできないことは無い」ことが書かれています。

言葉	何か	2026年10月22日時点
Pen	1つの作品。ファイル（HTML・CSS・JS など）と Blocks の集まり	中心の単位。Classic と2.0の2種類がある
Collection	Pen（や他の Collection）を自分で選んで並べた集まり	数の上限なし。公開・非公開を選べる
Project	以前の、フォルダとファイルを扱える複数ファイル用のエディター	すべて2.0の Pen に変換済み
Classic Pen	HTML・CSS・JS の3つの枠で書く、以前からの Pen	codepen.io/pen で今も作れる
2.0 Pen	ファイルとフォルダを自由に持てる新しい Pen	2026年7月23日に正式公開

Project から変換された Pen では、Autoprefixer が PostCSS Block に、「Bundle with Babel & JSX」が Babel Block に置き換わり、エントリーポイントのファイルは要らなくなりました。圧縮（minify）は使えなくなり、Less は 4 系、Markdown は marked から markdown-it に変わった、と公式ドキュメントにあります。

CodePen 2.0で変わったこと（Classicとの違い）

この節では、2026年に公開された2.0エディターで何が変わったかと、Classic との対応が分かります。

2.0エディターは作り直された新しいエディターで、2026年7月23日に正式公開されました。 公式ブログは、Classic の Pen エディターと Project エディターにできたことはすべてでき、さらに多くのことができると説明しています。Classic エディターは codepen.io/pen で今も使えますが、表示は目立たなくなり、「いつか、予告したうえで」すべての Pen を2.0に変換する可能性があると書かれています（日付は示されていません）。

公式ドキュメントにある、Classic の機能と2.0での置き場所の対応です。

Classic の機能	2.0 での置き場所
HTML・CSS・JS の3つの枠	Files（ファイルとフォルダ）
プリプロセッサの設定	Blocks（拡張子で自動追加）
External Resources・Stuff for head	Packages の検索・index.html・Classic Block の設定ファイル
Format on Save	Prettier Block
Full Page View	View メニューの「Preview Only」か URL の show=preview
Details View	URL の ?panel=details
Live View・Debug View	Preview。PRO は「Open Live Preview」
Collab Mode	Privacy & Collaboration パネルの共同編集
Presentation Mode	Omnibar か URL の ?presentation=true
Professor Mode	今は提供されていない

2.0で新しく加わったものは、ファイルシステム・版の履歴（Versions）・共同編集の招待・*.codepen.app へのデプロイ・Blocks の積み重ね・エディターのスクリーンリーダー対応です。Classic にあった Haml・Slim・CoffeeScript・LiveScript は、利用が少ないため非推奨になり、変換された Pen では元のソースがファイルとして残ります。

CodePenの使い方（始め方の手順）

この節では、アカウントを作ってから、最初の Pen を保存・共有するまでの順番が分かります。

Pen は既定で「公開」です。 誰でも見られ、プロフィール・フィード・検索結果に出ます。公開 Pen には MIT ライセンスが自動で付きます。社外に出せないコードや API キーは、公開 Pen に書かないようにします（非公開にできるのは PRO だけです）。

CodePenの画面の見方

この節では、2.0エディターと Classic エディターの画面のどこに何があるかが分かります。

2.0エディターは「サイドバー（パネル）・コードの編集エリア・プレビュー・下部のフッター」で構成され、上部中央の Omnibar から何でも呼び出せます。 公式ドキュメントにある主な部分です。

場所	できること
Omnibar（上部中央の検索欄）	ファイル・Blocks・設定・ショートカットを検索して実行
サイドバーの Files パネル	ファイル・フォルダの作成・名前の変更・整理
Blocks パネル	使っている Block とビルドの結果、設定・削除
Privacy & Collaboration パネル	公開範囲・パスワード・共同編集者の招待
Deploy パネル（PRO）	*.codepen.app へのデプロイ
Preview	ビルド結果の表示。エラー時は Diagnostics が重なる
Console	JS のログの表示と、プレビューでのコマンド実行
Details パネル	Markdown の説明・タグ・コメント
Pen Settings	テーマ・フォント・インデント・自動更新など

ショートカット	Mac	Windows
保存	Command＋S	Ctrl＋S
Omnibar を開く	Command＋K	Ctrl＋K
ファイルを開く（Omnibar）	Command＋O	Ctrl＋O
Omnibar（VS Code と同じ）	Command＋P	Ctrl＋P

Omnibar で「minim」と入力すると「Toggle Minimal UI」が出て、サイドバーとフッターを隠した Classic に近い見た目に切り替えられます。Classic エディターは、HTML・CSS・JS の3つの枠とプレビューで、「Change View」で配置を変えられます。

Pen と同じファイルを手元で動かす（Classic Block の仕組み）

この節では、CodePen がコードをどう組み立ててプレビューに出しているかを、同じ処理を手元で再現して確かめられます。

Classic の HTML の枠（2.0では index.pen.html）には body の中身だけを書き、CodePen が head・CSS・JS を足して完全な HTML にします。 公式ドキュメントでは、Classic Block は .pen.html のファイルだけを処理し、CSS と JavaScript を自動でつないだ完全な文書を作る、と説明されています。同じ形を手元で作って Chromium で動かしました。

Pen に書く3つのファイルです。CSS は Sass（SCSS）、JS は TypeScript で書きました。

<h1 class="title">カウンター</h1>
<p>クリック回数：<output id="count">0</output></p>
<button id="up" type="button">+1</button>

$main: #2563eb;
body { font-family: sans-serif; padding: 16px; }
.title {
  color: $main;
  &:hover { opacity: 0.8; }
}
button {
  background: $main; color: #fff; border: 0; padding: 8px 16px; border-radius: 6px;
}

const out = document.querySelector<HTMLOutputElement>("#count")!;
const btn = document.querySelector<HTMLButtonElement>("#up")!;
let count: number = 0;
btn.addEventListener("click", () => {
  count += 1;
  out.value = String(count);
  console.log("count =", count);
});
console.log("script loaded:", typeof count);

Sass Block・TypeScript Block がしていることを、Dart Sass 1.106.1 と TypeScript 7.0.2 で行いました。

sass --no-source-map style.scss style.css
tsc --target es2022 --lib es2022,dom --strict script.ts

body {
  font-family: sans-serif;
  padding: 16px;
}

.title {
  color: #2563eb;
}
.title:hover {
  opacity: 0.8;
}

button {
  background: #2563eb;
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: 6px;
}

"use strict";
const out = document.querySelector("#count");
const btn = document.querySelector("#up");
let count = 0;
btn.addEventListener("click", () => {
    count += 1;
    out.value = String(count);
    console.log("count =", count);
});
console.log("script loaded:", typeof count);

Sass の変数とネスト（&:hover）は普通の CSS に、TypeScript の型（: number や <HTMLOutputElement>）は消えて普通の JS になりました。 ブラウザが受け取るのは変換後の CSS と JS です。

body の中身に head・CSS・JS を足して、Classic と同じ形の文書にしました。JS は body の最後に入るので、DOM の準備を待つ処理（DOMContentLoaded など）を書かなくても要素を取れます（Classic Docs の説明と同じです）。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Pen</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 class="title">カウンター</h1>
<p>クリック回数：<output id="count">0</output></p>
<button id="up" type="button">+1</button>
<script src="./script.js"></script>
</body>
</html>

Chromium 141 で開き、ボタンを3回押したときのコンソールと画面の状態です。

[console.log] script loaded: number
[console.log] count = 1
[console.log] count = 2
[console.log] count = 3
output = 3
h1 color = rgb(37, 99, 235)
button bg = rgb(37, 99, 235)

CodePen のプレビューに出るのも、この「変換して組み立てた文書」です。2.0の Pen を Export すると、zip の src に書いたファイル、dist に最後に成功したビルドの結果が入ります（公式ドキュメント）。

TypeScript の型エラーがあっても JS は出る

TypeScript のコンパイラーは、型エラーがあっても既定で JS を出力します。let count: number = 0; count = "1"; を変換した結果です。

bad.ts(2,1): error TS2322: Type 'string' is not assignable to type 'number'.

"use strict";
let count = 0;
count = "1";

終了コードは2（エラー）でしたが、JS のファイルはできています。 プレビューが動いていても、型が正しいとは限りません。CodePen の公式ドキュメントでは、ビルドを止める誤りは「Diagnostics」として、エディターの波線・ファイルのアイコン・プレビューの上の表示で示されます。止まるほどでない問題は「Warnings」です。

Sass の書き間違いはビルドが止まる

Sass は誤りがあると CSS を作りません。よく起きる2つの誤りを Dart Sass で変換したときのメッセージです。

Error: Undefined variable.
  ╷
2 │   color: $main
  │          ^^^^^
  ╵
  bad.scss 2:10  root stylesheet

Error: expected ";".
  ╷
4 │   &:hover { opacity: .8; }
  │    ^
  ╵
  bad2.scss 4:4  root stylesheet

1つ目は変数を定義する前に使った誤り、2つ目は前の行の ; を忘れた誤りです。CodePen ではビルドが失敗すると、プレビューは最後に成功したビルドのまま表示され、その上に Diagnostics が出ます。

Dart Sass 1.106.1 では、darken($main, 10%) のような色の関数を使うと「DEPRECATION WARNING [color-functions]: darken() is deprecated.」という警告が出ました。変換は止まりません。警告には color.adjust($color, $lightness: -10%) などへの書き換え方が示されます。Sass と CSS のネストの違いは、関連記事「CSSネストの書き方｜&の使い方とSassとの違い・対応ブラウザ」で扱っています。

プリプロセッサ（Sass・TypeScript等）の使い方

この節では、CodePen で使える変換の仕組み（Blocks）と、Classic でのプリプロセッサの選び方が分かります。

2.0では、ファイルの拡張子を付けるだけで対応する Block が追加されます。 .scss のファイルを作れば Sass Block、prettier.config.json を置けば Prettier Block が自動で入ります。CodePen が Block を自動で外すことはありません。外すときは Blocks パネルの Settings から「Remove Block」を選びます（設定ファイルは残ります）。

公式ドキュメント「All Blocks」に載っている Block です（2026年10月22日時点、30種）。

分類	Block
CSS	Sass・Less・Stylus・PostCSS・Lightning CSS・Tailwind
JavaScript・TypeScript	TypeScript 5・6・7、Babel
フレームワーク	React 19（Vite）・Vue 3（Vite）・Svelte
HTML・テンプレート	Pug・Nunjucks・Markdown・MJML（メール）・Classic
図	Mermaid
リンター	Stylelint・HTMLHint・JSHint・ESLint
整形	Prettier・JS Beautify
テスト	Jest
自動で入るもの	Packages・Link・Fingerprint・Validate

Block には役割の種類があります。公式ドキュメントでは、Format（Prettier のようにソースを書き換える）、Lint（警告だけでビルドは止めない）、Process（.scss を .css にするなど新しいファイルを作る）、Base（Next.js・Eleventy のようなサイト作成の土台。1つの Pen に1つだけ）の4つです。

設定は、業界標準のファイルがあればそれを使い（Babel は Pen の直下の babel.config.json）、無ければ .codepen フォルダの中の CodePen 独自のファイルを使います（Sass は .codepen/sass.config.json）。Classic Block の設定は .codepen/classic.config.json で、head・htmlClasses・scripts・styles のキーが Classic の「Stuff for head」「External Resources」の代わりになります。

Classic エディターで選ぶ場合

Classic の Pen では、CSS や JS の枠の上にある歯車アイコンから、プリプロセッサをドロップダウンで選んで「Save & Close」を押します。変換後のコードは、枠の上の「View Compiled」ボタンで見られます。Prefill API の仕様に並んでいる選択肢は次のとおりです。

枠	選べるもの（Prefill API の値）
HTML	none・pug・markdown
CSS	none・less・scss・sass・stylus
CSS の土台	normalize・reset
ベンダープレフィックス	autoprefixer・prefixfree
JS	coffeescript・babel・typescript・vue（JSX は babel）

外部ライブラリ（jQuery・CDN・npm）の読み込み方

この節では、jQuery や npm のパッケージを Pen で使う方法と、import が動かないときの理由が分かります。

2.0では、JS に import { v4 } from 'uuid'; のようにパッケージ名で import を書くと、CodePen が package.json を作り、import map を HTML に入れて読み込めるようにします。 公式ドキュメントの説明です。CDN の URL を直接書く方法も使えます。

方法	書き方の例	向いている場面
パッケージ名で import（2.0）	import { v4 } from 'uuid';	ES モジュールのパッケージ
CDN の URL で import	import uuid from "https://esm.sh/uuid@11.1.0";	版を URL で固定したい
script タグで読み込む	jsDelivr・UNPKG・cdnjs の URL を <script src> に	jQuery など、グローバル変数を作るもの
CSS を読み込む	@import か <link> で CDN の URL	リセット CSS・UI ライブラリ
Packages の検索（2.0）	Omnibar の「Open Package Search」	URL や import 文をコピーしたい
External Resources（Classic）	歯車アイコンの設定に URL を入れる・名前で検索	Classic の Pen

Packages の検索は jsDelivr の API で npm を探し、<script> の URL、ES モジュールなら import 文、CSS があれば <link> か @import を、コピーできる形で出します。版を変えたいときは package.json の版の番号を書き換え、package.json を消すと最新の版で作り直されます。

Classic の External Resources では、JS は「選んだライブラリ → 追加した URL（上から順）→ 自分の JS」の順に、CSS は自分の CSS より前に読み込まれるので、自分の CSS で上書きできます。jQuery を使うときは、jQuery の URL を追加すれば $ が使えます。

import map が無いと「Failed to resolve module specifier」になる

パッケージ名だけの import（ベア import）は、ブラウザだけでは解決できません。CodePen が自動で入れている import map の役割を、手元の Chromium で確かめました。まず import map なしです。

<script type="module">
import { greet } from "greet";
console.log(greet("CodePen"));
</script>

[pageerror] Failed to resolve module specifier "greet". Relative references must start with either "/", "./", or "../".

import map で「greet」を実際のファイルに対応づけると動きます。

<script type="importmap">
{ "imports": { "greet": "/vendor/greet.js" } }
</script>
<script type="module">
import { greet } from "greet";
console.log(greet("CodePen"));
</script>

[console.log] こんにちは、CodePenさん

CodePen の2.0は、この import map を自動で作って HTML に入れています。 自分で import map を書いた場合は、CodePen の import map と合わせられ、自分の指定が優先されます（公式ドキュメント）。手元に持ち出したコードで同じエラーが出たら、import map を書くか、CDN の URL で import します。ES モジュールの基本は関連記事「JavaScript import/export入門｜ESMとCommonJSの違い」で扱っています。

画像や自分のファイルを使うには

Free プランでは、Pen にメディアファイル（画像など）を置けません（公式ドキュメントの制限表）。画像は、外部に置いた画像の URL（https:// から始まる完全な URL）で読み込みます。PRO は Pen のファイルとして画像を置けるほか、アセットホスティング（Asset Hosting）に画像・CSS・JS を置き、複数の Pen から完全な URL で使えます。Classic の Pen にはファイルシステムが無いので、/images/image.png のような相対パスは動きません。

Consoleの使い方（DevToolsとの違い）

この節では、CodePen の Console と、ブラウザの開発者ツールのどちらを使うか、なぜ値がずれることがあるかが分かります。

CodePen の Console は、プレビューの中で JS を実行し、console.log の出力を表示する機能です。 公式ドキュメントは、ブラウザの開発者ツール（DevTools）ほど高機能ではないので、多くの作業は DevTools を勧めています。一方で、レイアウトを狭めずに使えること、Console を開いたまま共有できること、常に正しい場所（プレビュー）で実行されることが利点だと説明しています。

DevTools で CodePen を開くと、既定では codepen.io のページ（エディターの画面）でコマンドが実行されます。 Pen のプレビューは iframe の中なので、DevTools のコンソールの左上の実行コンテキストを、プレビューの iframe に切り替える必要があります。手元で「親ページ（エディター役）＋別のオリジンの iframe（プレビュー役）」を作って確かめました。

[console.log] iframe の中で実行: http://127.0.0.1:33322
top    document.title = エディターの画面
iframe document.title = プレビュー（Pen の中身）
top から iframe の中を読む: TypeError: Cannot read properties of null (reading 'title')

同じ document.title でも、どこで実行するかで答えが変わりました。 プレビューは別のオリジン（2.0は codepen.dev・codepenusercontent.com、Classic は cdpn.io）で動くため、親ページからは iframe の中の document を読めません（contentDocument が null）。DevTools の使い方は関連記事「Chrome DevToolsの使い方｜デバッグ手順と便利機能一覧」で、iframe の扱いは関連記事「HTML iframeの使い方｜レスポンシブ・sandbox・表示されない原因」で扱っています。

公式ドキュメント（Pen の制限）では、安全と使い勝手のために次の処理を外したり止めたりすると書かれています。

外される・止められるもの	理由・場面
<meta http-equiv="refresh">	ページの再読み込みの繰り返しを防ぐ
location.reload()	再読み込みの無限の繰り返しを防ぐ
autofocus	エディターからフォーカスを奪わないため
<a> の download 属性	2.0 で外される
中身の無い <iframe>	音が漏れるのを防ぐ
alert()・confirm()・prompt()	一覧（Grid View）やスクリーンショットでは出ない

無限ループの保護とは（同じ考え方を手元で再現）

この節では、CodePen がブラウザを固まらせないために何をしているかと、固まったときの戻し方が分かります。

CodePen は、実行前の JS のすべてのループに「脱出チェック」を差し込み、ループに入ってから 2,200ms（2.2秒）抜けなければ、そのループを break で止めます。 CodePen の公式ブログ（2014〜2016年）と開発者の解説記事では、ループごとに番号を付け、ループの先頭に if (window.CP.shouldStopExecution(1)) { break; }、ループの後に window.CP.exitedLoop(1); を入れる方式が説明されています。最初は75ms、次に最初の2秒のフレームレートで判定する方法を試し、誤判定が多かったため、「2,200ms を超えて抜けない」で判定する方法に落ち着いた、とあります。

flowchart TD
    A[書いた JS] --> B[ループの先頭に<br>脱出チェックを差し込む]
    B --> C{ループに入ってから<br>2200ms を超えた?}
    C -->|いいえ| D[そのまま続ける]
    C -->|はい| E[break で抜けて<br>次の行へ進む]

差し込み処理を acorn で書く

同じ考え方を、JS の構文解析ライブラリ acorn 8.19.0 で書きました。for・while・do-while・for-in・for-of のループを見つけて、チェックを差し込みます。

// CodePen の無限ループ保護と同じ考え方で、ループに「脱出チェック」を差し込む
import { readFileSync } from "node:fs";
import * as acorn from "acorn";
import * as walk from "acorn-walk";

const src = readFileSync(process.argv[2], "utf8");
const ast = acorn.parse(src, { ecmaVersion: "latest", sourceType: "script" });
const edits = []; // [位置, 差し込む文字列]
let id = 0;
const LOOPS = ["ForStatement", "WhileStatement", "DoWhileStatement", "ForInStatement", "ForOfStatement"];
walk.full(ast, (node) => {
  if (!LOOPS.includes(node.type)) return;
  const n = ++id;
  const check = `if (window.CP.shouldStopExecution(${n})) { break; }`;
  if (node.body.type === "BlockStatement") {
    edits.push([node.body.start + 1, check]);
  } else {
    edits.push([node.body.start, `{${check}`], [node.body.end, "}"]);
  }
  edits.push([node.end, `\nwindow.CP.exitedLoop(${n});\n`]);
});
let out = src;
const order = edits.map((e, k) => [...e, k]).sort((a, b) => b[0] - a[0] || b[2] - a[2]);
for (const [pos, text] of order) {
  out = out.slice(0, pos) + text + out.slice(pos);
}
process.stdout.write(out);

チェックの中身（実行時に読み込む部分）です。ループごとに入った時刻を覚え、上限を超えたら true を返します。上限の名前は、公式ブログにある調整用の変数 window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT に合わせました。

// ループごとに開始時刻を覚え、上限を超えて抜けなければ break させる
window.CP = {
  PenTimer: { MAX_TIME_IN_LOOP_WO_EXIT: 2200 },
  started: {},
  shouldStopExecution(id) {
    const now = Date.now();
    if (!(id in this.started)) this.started[id] = now;
    const max = this.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT;
    if (now - this.started[id] > max) {
      console.warn(`ループ ${id} が ${max}ms を超えたので止めました`);
      return true;
    }
    return false;
  },
  exitedLoop(id) { delete this.started[id]; },
};

i を増やし忘れた無限ループを用意しました。

const t0 = Date.now();
let i = 0, n = 0;
while (i < 10) {
  n++;            // i を増やし忘れた無限ループ
}
console.log(`while を抜けた：${Date.now() - t0}ms、${n} 回まわった`);
for (let j = 0; j < 3; j++) n++;
console.log("最後の行まで実行できた");

差し込み処理を通した結果です。波かっこの無い for 文の本体は、波かっこで包んでからチェックを入れています。

const t0 = Date.now();
let i = 0, n = 0;
while (i < 10) {if (window.CP.shouldStopExecution(1)) { break; }
  n++;            // i を増やし忘れた無限ループ
}
window.CP.exitedLoop(1);

console.log(`while を抜けた：${Date.now() - t0}ms、${n} 回まわった`);
for (let j = 0; j < 3; j++) {if (window.CP.shouldStopExecution(2)) { break; }n++;}
window.CP.exitedLoop(2);

console.log("最後の行まで実行できた");

保護あり・なしを Chromium で比べた結果

3つのページを Chromium 141 で開きました。ページの読み込みは8秒、その後の 1+1 の評価は3秒で打ち切っています。

===== 保護あり（上限 2200ms）
[console.warning] ループ 1 が 2200ms を超えたので止めました
[console.log] while を抜けた：2201ms、38661768 回まわった
[console.log] 最後の行まで実行できた
load finished in 2.2s
evaluate 1+1 -> 2
===== 保護あり（先頭で MAX_TIME_IN_LOOP_WO_EXIT = 500）
[console.warning] ループ 1 が 500ms を超えたので止めました
[console.log] while を抜けた：501ms、7084672 回まわった
[console.log] 最後の行まで実行できた
load finished in 0.5s
evaluate 1+1 -> 2
===== 保護なし
goto: Page.goto: Timeout 8000ms exceeded. after 8.0s
evaluate 1+1 -> no answer in 3s (main thread busy)

保護なしでは、ループがメインスレッドを使い続け、ページはクリックにも評価にも応答しなくなりました。 保護ありでは、2.2秒でループを抜け、続きの行（最後の行まで実行できた）まで実行されています。保護は「抜けないループ」を止めるだけなので、ループの後の結果（ここでは n の値）は、正しい処理の結果ではない点に注意が要ります。

保護で困るとき・固まったときの対処

状況	対処
正しい重い計算が途中で止められる	JS の先頭に window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000; のように上限を延ばす（公式ブログ）
Pen を開くとブラウザが固まる	URL の最後に ?turn_off_js=true を付けて開き、JS を止めた状態で直すか削除する
直した後	?turn_off_js=true を外して再読み込みする
保護で止まらないループ	保護はループだけが対象。再帰呼び出しや setInterval の連続は別に見直す
手元のブラウザで固まった	タブを閉じる。Chrome ならタスクマネージャーでそのタブを終了する

?turn_off_js=true は、Pen の一覧（グリッド）のページとエディターで使え、エディター自体の JS は動き続けるので、直して保存できると公式ドキュメントにあります。

CORSエラーで外部APIが呼べないとき

この節では、Pen から外部の API を fetch したときに出る CORS エラーの意味と、直し方が分かります。

Pen のプレビューは codepen.dev などの CodePen のオリジンで動くので、外部の API が「そのオリジンからの読み取り」を許可していないと、ブラウザが応答を読ませません。 これは CodePen の制限ではなく、ブラウザの同一オリジンポリシーによるものです。プレビュー役のページ（ポート33320）から、API 役のサーバー（ポート33321）の2つの URL を呼びました。/no-cors は Access-Control-Allow-Origin ヘッダーを返さず、/cors は * を返します。

async function call(path) {
  try {
    const res = await fetch("http://127.0.0.1:33321" + path);
    console.log(path, "->", res.status, JSON.stringify(await res.json()));
  } catch (e) {
    console.log(path, "-> catch:", e.name + ": " + e.message);
  }
}
(async () => { await call("/no-cors"); await call("/cors"); })();

[console.error] Access to fetch at 'http://127.0.0.1:33321/no-cors' from origin 'http://127.0.0.1:33320' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
[console.error] Failed to load resource: net::ERR_FAILED
[console.log] /no-cors -> catch: TypeError: Failed to fetch
[console.log] /cors -> 200 {"ok":true,"path":"/cors"}

JS で受け取れるのは「TypeError: Failed to fetch」だけで、理由（CORS）はコンソールにしか出ません。 CodePen の Console だけを見ていて原因が分からないときは、ブラウザの DevTools のコンソールも見ます。

原因	直し方
API が CORS を許可していない	自分の API なら Access-Control-Allow-Origin を返す。他社の API なら CORS に対応した API・エンドポイントを使う
http:// の API を呼んでいる	CodePen は https:// で動くので、https:// の API を使う
API キーが要る	公開 Pen にキーを書かない。キーの要らない公開 API で試す

CORS エラーの種類ごとの直し方は、関連記事「CORSエラーの原因と解決方法｜エラーメッセージ別に解説」で扱っています。

埋め込み（Embed）の方法とdata属性

この節では、Pen をブログや Notion に載せる手順と、埋め込みコードの属性の意味が分かります。

Pen の Share メニューから「Embed」を選び、表示するタブ・テーマ・高さ・クリックで読み込むかを選んで、「Copy & Paste Code」の欄のコードを貼ります。 公式ドキュメントが勧めるのは、codepen クラスと data-* 属性を持つ HTML 要素と、非同期で読み込むスクリプトの組み合わせです。スクリプトがこの要素を iframe に置き換えます。要素の中には Pen へのリンクがあり、RSS などスクリプトが動かない場所ではリンクとして残ります。Classic Docs の例をもとに、形だけを示します（実際には Embed ダイアログが出すコードをそのまま使います）。

<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="html,result"
   data-slug-hash="（PenのID）" data-user="（ユーザー名）">
  <span>See the Pen <a href="https://codepen.io/（ユーザー名）/pen/（PenのID）">…</a></span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

JavaScript が使えず iframe なら使える場所では、Pen の URL の /pen/ を /embed/ に変えた URL を iframe で読み込みます。Embed ダイアログには iframe 版のコードもあります。

2.0の Docs にある主な data 属性です（2026年10月22日時点）。

属性	意味	既定値
data-slug-hash	Pen の ID。無いと 404	必須
data-user	Pen の持ち主	―
data-token	非公開の Pen を埋め込むとき	―
data-height	高さ（px）	300
data-theme-id	0＝OS に合わせる、-1＝明るい、-3＝暗い	0
data-file	最初に見せるファイル。false でコードを閉じる	―
data-preview	true でクリックして再生、false でプレビューなし	―
data-zoom	プレビューの倍率 1・0.5・0.25	―
data-editable	true で埋め込みの中で編集できる	false
data-class	iframe の外側に付けるクラス	―

data-default-tab は2.0の Docs では非推奨とされ、代わりに data-file と data-preview を使います。パスワード保護と Collaborators Only の Pen は埋め込むと 404 になります。

載せる場所	方法
WordPress（ブロックエディター）	プラグイン「CodePen Embed Block」
WordPress（クラシックエディター）	プラグイン「CodePen Embedded Pens Shortcode」
Notion・Medium・WordPress（oEmbed 対応）	Pen の URL を1行で貼る
HTML を書けるブログ	Embed のコードを貼る
スクリプトが使えない場所	/embed/ の URL を iframe で

ページを開いたときに重くならないよう、Embed ダイアログの「use click-to-load」をオンにすると、静止画と「Run Pen」ボタンだけを先に出し、押されたときに Pen を読み込みます。高さは data-height と、同じ値のインラインの style の両方で決まります（読み込み時のレイアウトのずれを防ぐため）。

Fork・テンプレート・エクスポート・ライセンス

この節では、他の人の Pen を使うときの決まりと、自分の Pen を持ち出す方法が分かります。

Fork は Pen の完全なコピーを作る操作で、元の Pen は Details に「Fork 元」として記録されます。 公開 Pen は誰でも Pen Actions メニューから Fork でき、Fork した Pen は自分のものになります。非公開の Pen は、持ち主だけが Fork できます。

操作	内容（公式ドキュメント）
Fork	同じ名前・新しい URL のコピー。Fork は検索結果に既定で出ない
Fork の Fork	いちばん元の Pen の子として記録される
Template	自分の Pen を Template にすると、そこから新しい Pen を作れる（Fork ではない）
Default Template	新しい Pen を作ったときに開く Template を指定できる
Versions	保存のたびに版が残り、前の版に戻せる。自分の作品の控えに Fork は要らない
Export	Pen Actions の「Export」で zip。src にソース、dist に最後のビルド結果、LICENSE
削除	持ち主だけができる。3日間は Deleted Pens から戻せる

Export した zip には、CodePen のビルドの仕組み（Compiler）は入っていません。手元で編集を続けるには、Sass や TypeScript の変換を自分で用意します（前の節の sass・tsc のコマンドが使えます）。公式ドキュメントには、Compiler をオープンソースにして書き出しに含める予定が書かれています。

Collectionの使い方

この節では、Pen をまとめる Collection の作り方と使い道が分かります。

Collection は、自分の Pen も他の人の Pen も自由に入れて並べられる「まとめ」です。 作る数にも、入れる Pen の数にも上限はありません（公式ドキュメント）。

• 作り方：ログイン後のホームの「Your Work」、ユーザーメニュー、または Pen を Collection に入れる操作の途中で作る。
• Pen を入れる：Pen の「Add to Collection」（2.0エディターでは Share メニューの中）で、Collection の横の（＋）を押す。入っている Collection には（✓）が付き、押すと外れる。
• 削除：Collection のページのメニューから「Delete Collection」。元に戻せない。中の Pen は消えない。
• 公開範囲：Collection ごとに公開・非公開を選べる。非公開の Pen を公開の Collection に入れた場合などは、見え方が変わる。
• TV View：Collection の中の公開 Pen のアニメーションを、全画面で順に流す。

学習のテーマ別（「CSS アニメーション」「フォームの UI」など）や、チームのデモ集、記事で使った Pen の置き場に使えます。チームが持つ Collection は、メンバー全員が Pen の追加・削除やタイトルの編集をできます。

公開範囲・共同編集・デプロイ

この節では、Pen を誰に見せるかの設定と、2.0で加わった共同編集・デプロイが分かります。

公開範囲	誰が見られるか	プラン
Public	誰でも。プロフィール・フィード・検索に出る	Free から
Private	URL を知っている人。検索や一覧には出ない	PRO
Password Protected	パスワードを入れた人。3回間違えると30分ロック	PRO
Collaborators Only	持ち主と招待した人だけ	PRO

パスワード保護は、エディターの画面を守るもので、プレビューの URL とデプロイしたサイトは守られません（公式ドキュメント）。

共同編集者は、Privacy & Collaboration パネルから @ユーザー名かメールアドレスで招待します。 役割は Viewer（見るだけ）と Editor（削除以外ほぼすべて）です。1つの Pen に Editor・Viewer を各100人まで入れられ、同時に開いていればリアルタイムで一緒に編集できます。招待できる人数はプランで決まります（料金の節）。

デプロイ（PRO）は、Deploy パネルで「Deploy」を押すと、Pen が ランダムな名前.codepen.app の公開サイトになる機能です。 保存しただけでは公開サイトは変わらず、「Save & Deploy」を押すか、メニューで「Deploy on Save」をオンにします。独自ドメインは、サブドメインなら CNAME、ドメインそのもの（apex）なら公式ドキュメントに載っている2つの A レコードを、ドメインを買った会社の DNS に設定します。帯域は Pen ごとに月1TB、アカウントで月5TB が上限です。静的なサイトを Git から公開する別の方法は、関連記事「Netlifyとは｜使い方・料金・デプロイ方法とエラー対処を実例で」で扱っています。

• 1API キー・パスワード・社内の URL を書いていないか公開 Pen は誰でも見られ、Fork できる
• 2他の人のコードや画像を使った場合、ライセンスを確かめたか公開 Pen は MIT。MIT と両立しないコードは置かない
• 3重いループや連続する処理に終わりがあるか一覧のサムネイルでも JS は動く
• 4タイトルと説明（Details）を書いたか埋め込みや検索で、何の Pen か伝わる

CodePenの料金（Free・PRO、2026年10月22日時点）

この節では、無料でどこまで使えるかと、有料プラン（PRO）の価格と違いが分かります。

CodePen は無料（Free）で公開 Pen を無制限に作れます。有料の PRO は Starter・Developer・Super の3つで、年払いの場合の月額は8ドル・12ドル・26ドルです。 料金ページの内容です（2026年10月22日時点、米ドル）。

項目	Free	Starter	Developer	Super
価格（年払いの月額）	0ドル	8ドル（年96ドル）	12ドル（年144ドル）	26ドル（年312ドル）
1つの Pen のファイル数	3	50	150	300
非公開の Pen・Collection	なし	あり	あり	あり
共同編集者の招待	―	5人	10人	15人
デプロイ・独自ドメイン	―	無制限・5個	無制限・10個	無制限・25個
アセットホスティング	―	2GB	25GB	50GB
メディアの1ファイル	―	5MB	20MB	30MB
CodePen AI	―	あり	2倍	4倍
API（1時間あたり）	100回	3,000回	3,000回	3,000回
広告	あり	なし	なし	なし

料金ページには「Monthly」と「Annual」の切り替えがあり、年払いは月払いより Starter で年48ドル、Developer で年84ドル、Super で年156ドル安いと表示されています。チーム向けの Team は、PRO の席数で請求されます（席あたりの価格は料金ページに表示されていません）。メディアの1ファイルの上限は、ドキュメントの「Files」「Limitations」のページでは Developer 10MB・Super 15MB と書かれており、料金ページと値が違います。

CodePen AI は PRO の機能です。 エディターに組み込まれたコーディング用のアシスタントで、指示からコードを作る・既存のコードを直す・説明する・デバッグを手伝うことができます。Pen の中に置いた「skills」（指示のファイル）に沿って出力を変えられます。公式ドキュメントのページには、使っているモデルや、入力したデータの扱いは書かれていません。

PRO をやめた場合、デプロイしたサイトはすべて公開が止まり、再び PRO にすると再デプロイできます。

使い方	合うプラン（目安）
学習・CSS や JS の試し書き・質問用の再現	Free
公開できないコードを置く・取引先に見せる	Starter（非公開・パスワード）
画像を Pen に置く・小さなサイトを公開	Starter 以上（メディア・デプロイ）
ファイル数の多いサイト・大きな素材	Developer・Super
チームでデモを共有・管理	Team

Prefill API（フォームから新しいPenを作る）

この節では、自分のページのボタンから、コードを入れた状態の Pen を開く方法と、送られる中身が分かります。

Prefill API は、data という名前のフォームの値に JSON を入れて POST すると、その内容が入った新しい Pen がエディターで開く仕組みです。 公式ドキュメントでは、Classic と2.0のエディターが並んでいる間の送り先は https://codepen.io/cpe/pen/define/ で、2.0だけになった後は https://codepen.io/pen/define になる予定とされています。記事やドキュメントに「CodePen で開く」ボタンを付けるときに使います。

次のフォームの action だけをローカルの擬似サーバーの URL に変えて、Chromium でボタンを押したときに届いた中身です（CodePen には送っていません）。

<form action="https://codepen.io/cpe/pen/define/" method="POST" target="_blank">
  <input type="hidden" name="data" value='{"title":"RJC demo","html":"<h1>Hello</h1>","css":"h1 { color: #2563eb; }","css_pre_processor":"scss","js":"console.log(1)","js_external":"https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js"}'>
  <input type="submit" value="Create New Pen with Prefilled Data">
</form>

POST /cpe/pen/define/
Content-Type: application/x-www-form-urlencoded
raw body: data=%7B%22title%22%3A%22RJC+demo%22%2C%22html%22%3A%22%3Ch1%3EHello%3C%2Fh1%3E%22%2C%22css%22%3A%22h1+%7B+color%3A+%232...
data = {
  "title": "RJC demo",
  "html": "<h1>Hello</h1>",
  "css": "h1 { color: #2563eb; }",
  "css_pre_processor": "scss",
  "js": "console.log(1)",
  "js_external": "https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js"
}

JSON はフォームの1つの値として URL エンコードされて送られます。 値の中に ' を含めると HTML の属性が途中で切れるので、JSON を属性に入れるときは引用符の種類に注意します。使えるキーは title・description・private・layout（left・top・right）・html・css・js・各 *_pre_processor・css_starter・css_prefix・html_classes・head・css_external・js_external（セミコロン区切り）です。

JSFiddle・StackBlitz・CodeSandboxとの違い

この節では、よく比べられるサービスとの違いを、各公式ページの事実で比べられます。

項目	CodePen	JSFiddle	StackBlitz	CodeSandbox
主な用途（公式の説明）	フロントのデモ・共有・小さなサイトの公開	React・Tailwind・JS・CSS・HTML を試すプレイグラウンド	ブラウザ内で Node.js を動かす開発環境	ブラウザの IDE とサンドボックス
コードが動く場所	ブラウザ（変換は CodePen の Compiler）	ブラウザ	ブラウザ内の WebContainers	ブラウザとサーバーのサンドボックス
非公開の作品	PRO（Starter から）	PRO で無制限	有料メンバーが非公開リポジトリを使える	Pro で無制限。2024年12月の発表で Free にも追加
有料の価格	年払いで月8ドル〜	月8ユーロ・1年80ユーロ	Teams（料金ページ）・Enterprise	Pro 月12ドル
運営	CodePen（2012年〜）	JSFiddle	StackBlitz, Inc.	2024年12月から Together AI の一員

いずれも2026年10月22日時点の各公式ページの内容です。StackBlitz の WebContainers は、npm・pnpm・yarn を含む Node.js をブラウザの中で動かす仕組みで、保存と共同作業には GitHub のアカウントを使います。CodeSandbox の料金ページには、サーバーのサンドボックス・ターミナル・複数のポートなどが並んでいます。

やりたいこと	候補になりやすいもの（目安）
CSS・JS の小さなデモを作って記事に埋め込む	CodePen・JSFiddle
デモを集めて見せる・他の人の作品から学ぶ	CodePen（Collection・トレンド）
npm のパッケージや Node.js のサーバーを動かしたい	StackBlitz・CodeSandbox
GitHub のリポジトリをそのまま開きたい	StackBlitz・CodeSandbox
小さな静的サイトをそのまま公開したい	CodePen（PRO のデプロイ）

CodePenでよくあるつまずきと直し方

この節では、CodePen を使っていてよく起きる症状の原因と直し方を引けます。

症状・メッセージ	原因	直し方
TypeError: Failed to fetch（コンソールに CORS の表示）	呼んだ API が CodePen のオリジンからの読み取りを許可していない	CORS に対応した API を使う。自分の API なら Access-Control-Allow-Origin を返す
Failed to resolve module specifier "…"	パッケージ名の import を、import map なしで動かした（手元に持ち出したときなど）	import map を書くか、esm.sh などの完全な URL で import する
$ is not defined	jQuery を読み込む前に $ を使った・読み込んでいない	jQuery の script を自分の JS より前に読み込む（Classic は External Resources に追加）
ループの途中で処理が止まる	無限ループ保護が 2.2秒で止めた	終わる条件を直す。正しい重い処理なら MAX_TIME_IN_LOOP_WO_EXIT を延ばす
Pen を開くとブラウザが固まる	保護で止まらない重い処理・再帰	URL に ?turn_off_js=true を付けて開いて直す
/images/a.png が表示されない	Classic の Pen にはファイルシステムが無い。Free は画像を置けない	https:// から始まる完全な URL にする。2.0で PRO ならファイルとして置く
alert() が一覧で出ない	一覧（Grid View）とスクリーンショットでは止められる	エディターかプレビューで確かめる
DevTools の結果がプレビューと違う	DevTools が codepen.io のページで実行している	DevTools のコンソールの実行コンテキストをプレビューの iframe に切り替える
Sass を書いたのに CSS が変わらない	Sass の誤りでビルドが止まり、前回のビルドが表示されている	Diagnostics のエラー（Undefined variable など）を直す
保存できない（Classic）	コードが合計1MB・100万文字を超えた	2.0の Pen にしてファイルを分ける

よくある質問

Q. CodePenとは何ですか？ A. ブラウザで HTML・CSS・JavaScript を書き、結果をその場で見て、URL や埋め込みで共有できるサービスです。作品1つを Pen と呼びます。「CodePenとは」の節で詳しく説明しています。

Q. CodePenは無料で使えますか？ A. 使えます。Free プランで公開 Pen を無制限に作れます。1つの Pen のファイルは3つまで、画像のアップロードと非公開の Pen は使えません（2026年10月22日時点）。

Q. CodePenの料金（PRO）はいくらですか？ A. 年払いの場合、Starter が月8ドル（年96ドル）、Developer が月12ドル（年144ドル）、Super が月26ドル（年312ドル）です。月払いはこれより高く、Team は席数で請求されます（2026年10月22日時点）。

Q. CodePenは日本語で使えますか？ A. 公式サイトとドキュメントは英語です。コードやコメント、Pen のタイトルには日本語を書けます。この記事の実行例でも、日本語の見出しや console.log の出力を使っています。

Q. PenとProjectの違いは何ですか？ A. Project は複数ファイルを扱う以前のエディターで、2.0の公開に合わせてすべて2.0の Pen に変換されました。今は Pen だけでフォルダとファイルを扱えます。

Q. CodePenをブログに埋め込むには？ A. Pen の Share メニューから Embed を選び、表示するタブ・テーマ・高さを選んでコードを貼ります。WordPress はプラグイン、Notion や Medium は Pen の URL を1行で貼る方法（oEmbed）が使えます。

Q. CodePenでjQueryを使うには？ A. 2.0では jQuery の CDN の URL を <script src> で読み込むか、Packages の検索で jQuery を探してコードをコピーします。Classic では JS の枠の歯車アイコンから External Resources に jQuery を追加します。

Q. CodePenでconsole.logが見られません。 A. エディターの Console を開くか、ブラウザの DevTools でコンソールの実行コンテキストをプレビューの iframe に切り替えます。一覧のサムネイルでは見られません。

Q. 無限ループでCodePenが固まりました。 A. Pen の URL の最後に ?turn_off_js=true を付けて開くと JS が止まり、エディターでコードを直して保存できます。直したら外して再読み込みします。

Q. CodePenのコードをダウンロードできますか？ A. Pen Actions の「Export」で zip をダウンロードできます。src に書いたファイル、dist に最後のビルド結果、LICENSE が入ります。

Q. 他の人のPenを使ってもいいですか？ A. 公開 Pen は MIT ライセンスなので、ライセンスの表示を残せば再利用できます。Fork すると元の Pen が記録された自分のコピーができます。非公開 Pen にはライセンスが付かず、権利は持ち主にあります。

Q. CodePenとJSFiddleの違いは？ A. どちらもブラウザでコードを試して共有するサービスです。CodePen は Collection・2.0のファイルと Blocks・デプロイを持ち、JSFiddle の PRO は月8ユーロ・1年80ユーロです。「JSFiddle・StackBlitz・CodeSandboxとの違い」の節に表があります。

まとめ

• CodePen は、ブラウザで HTML・CSS・JS を書き、すぐ動かして URL や埋め込みで共有できるサービス。作品は Pen、まとめは Collection。Project は2.0で Pen に統合された。
• 2.0エディター（2026年7月23日公開）は、ファイルとフォルダ・Blocks・版の履歴・共同編集・デプロイを持つ。Classic は codepen.io/pen で今も使える。
• Sass・TypeScript は拡張子で Block が入り、変換後の CSS・JS がプレビューで動く。TypeScript は型エラーでも JS が出るので、Diagnostics も見る。
• ライブラリは import 文か CDN の URL で。パッケージ名の import は CodePen が作る import map で動く。
• 無限ループ保護は、ループに脱出チェックを入れ、2.2秒で break する仕組み。固まったら ?turn_off_js=true。
• 外部 API の Failed to fetch は、多くが CORS。理由はブラウザのコンソールに出る。
• 料金は Free と、年払いで月8・12・26ドルの PRO（2026年10月22日時点）。非公開・画像のアップロード・デプロイ・CodePen AI は PRO。

参考・出典

確認日はいずれも 2026年10月22日です。

• CodePen Blog「Two Point Oh」（2.0の公開）：https://blog.codepen.io/2026/07/23/two-point-oh/
• Chris Coyier「CodePen 2.0」：https://chriscoyier.net/2026/07/30/codepen-2-0/
• CodePen Docs：https://blog.codepen.io/docs/
• CodePen Docs「Why Did Everything Change?」：https://blog.codepen.io/docs/what-changed/
• CodePen Docs「Pens」：https://blog.codepen.io/docs/pens/
• CodePen Docs「Files」：https://blog.codepen.io/docs/pens/files/
• CodePen Docs「Blocks」：https://blog.codepen.io/docs/pens/blocks/
• CodePen Docs「All Blocks」：https://blog.codepen.io/docs/pens/blocks/all-blocks/
• CodePen Docs「Builds」：https://blog.codepen.io/docs/pens/builds/
• CodePen Docs「Diagnostics」：https://blog.codepen.io/docs/pens/builds/diagnostics/
• CodePen Docs「Packages」：https://blog.codepen.io/docs/pens/packages/
• CodePen Docs「Console」：https://blog.codepen.io/docs/pens/console/
• CodePen Docs「Limitations」：https://blog.codepen.io/docs/pens/limitations/
• CodePen Docs「Preview & Live Preview」：https://blog.codepen.io/docs/live-view/
• CodePen Docs「CodePen Domains」：https://blog.codepen.io/docs/codepen-domains/
• CodePen Docs「Omnibar」：https://blog.codepen.io/docs/omnibar/
• CodePen Docs「Forking」：https://blog.codepen.io/docs/pens/forking/
• CodePen Docs「Default Template」：https://blog.codepen.io/docs/pens/templates/default-template/
• CodePen Docs「Exporting」：https://blog.codepen.io/docs/pens/exporting/
• CodePen Docs「Licensing」：https://blog.codepen.io/docs/pens/licensing/
• CodePen Docs「Privacy & Collaboration」：https://blog.codepen.io/docs/pens/privacy-sharing/
• CodePen Docs「Deployment / Hosting」：https://blog.codepen.io/docs/pens/deployment/
• CodePen Docs「CodePen AI」：https://blog.codepen.io/docs/pens/codepen-ai/
• CodePen Docs「Collections」：https://blog.codepen.io/docs/collections/
• CodePen Docs「Embeds」：https://blog.codepen.io/docs/embeds/
• CodePen Docs「POST to Prefill Pen」：https://blog.codepen.io/docs/api/post-to-prefill-pen/
• CodePen Classic Docs：https://blog.codepen.io/documentation/
• CodePen Classic Docs「Embedded Pens」：https://blog.codepen.io/documentation/embedded-pens/
• CodePen Classic Docs「Adding External Resources」：https://blog.codepen.io/documentation/adding-external-resources/
• CodePen Classic Docs「Using CSS Preprocessors」：https://blog.codepen.io/documentation/using-css-preprocessors/
• CodePen Classic Docs「Using JS Libraries」：https://blog.codepen.io/documentation/using-javascript-libraries/
• CodePen Classic Docs「Pen Limitations」：https://blog.codepen.io/documentation/limitations/
• CodePen Classic Docs「Things We Strip」：https://blog.codepen.io/documentation/things-we-strip/
• CodePen Classic Docs「Turn Off JavaScript in Previews」：https://blog.codepen.io/documentation/turn-off-javascript-in-previews/
• CodePen Blog「Infinite Loop Protection, Round Two」：https://blog.codepen.io/2014/12/16/infinite-loop-protection-round-two/
• CodePen Blog「You Can Adjust Infinite Loop Protection Timing」：https://blog.codepen.io/2016/06/08/can-adjust-infinite-loop-protection-timing/
• CodePen「Improving Infinite Loop Detection」：https://codepen.io/quezo/post/improving-infinite-loop-detection
• CodePen「Pricing」：https://codepen.io/pricing
• CodePen「PRO Features」：https://codepen.io/features/pro
• Wikipedia「CodePen」：https://en.wikipedia.org/wiki/CodePen
• JSFiddle：https://jsfiddle.net/
• StackBlitz「Pricing」：https://stackblitz.com/pricing
• WebContainers：https://webcontainers.io/
• CodeSandbox「Pricing」：https://codesandbox.io/pricing
• CodeSandbox Blog「CodeSandbox is joining Together AI」：https://codesandbox.io/blog/joining-together-ai-introducing-codesandbox-sdk
• Sass「Breaking Change: Color Functions」：https://sass-lang.com/d/color-functions
• MDN「import map」：https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/script/type/importmap

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。