CodePen コードペン

CodePen のブラウザ版（web版）でできること・できないこと

CodePen は、ブラウザで HTML・CSS・JavaScript を書いて動かす道具です。作品（Pen）は、初めの設定では公開（だれでも見られる）です。スマホのブラウザでの編集のしやすさは、公式のドキュメントに書かれていません。

ブラウザ版でできること

• 保存した Pen は、URL を送って人に見せられる。公開の Pen はだれでも見られる（公式のドキュメント）
• 公開の Pen は、だれでもフォーク（そっくりコピー）して自分のものにできる。元の作者の名前は残る（公式のドキュメント）
• 無料のアカウントでも、1つの Pen にファイルを3つまで、1ファイル 1MB までで作れる（公式のドキュメント）
• 公開の Pen には、オープンソースのライセンスが付く（公式のドキュメント）

ブラウザ版でできないこと・アプリが要ること

• 非公開・パスワード付き・招待した人だけ、の設定は PRO の機能（公式のドキュメント）
• 編集に仲間を招く（Editor）のは、持ち主が PRO のときだけ（公式のドキュメント）
• 無料のアカウントは、画像などのファイル（メディア）の欄が「Not Allowed」（公式の上限の表）
• スマホのブラウザでの編集画面の使いやすさや、ログインしないで使える範囲は、読めた公式ページに書かれていない

始め方

1. ブラウザで codepen.io を開く
2. 保存した Pen の上にある「Share」のメニューから、共有の URL を取る
3. 人に見られたくない作品は、PRO の非公開にする。無料のままだと公開になる

2026-10-16 に公式の案内で確かめました：CodePen ドキュメント：公開・非公開と共同編集（英語）・CodePen ドキュメント：共有（英語）・CodePen ドキュメント：フォーク（英語）・CodePen ドキュメント：上限（ファイル数・サイズ）（英語）。仕様は変わることがあるので、最新は公式の案内を見てください。