コードプレビュー

HTML・CSS・JavaScriptを書くとその場で結果が見られるエディタです。console.logもエラーも下のコンソールに出ます。

✨ できること

  • HTML・CSS・JavaScriptをタブで切り替えて書き、入力から0.4秒でプレビューに反映(手動更新も可)
  • console.log・console.error・実行時エラーをプレビュー下のコンソールに表示(エラーは赤)
  • 表示幅をスマホ375px・タブレット768px・全幅で切り替えてレスポンシブを確認
  • 1つのHTMLファイルとしてダウンロード。コードはブラウザに自動保存され、4KB以内ならURLでも共有できます

🪄 こんなときに

ちょっと試したい

CSSの書き方やJavaScriptの挙動を、環境を用意せずその場で確かめる。

学習・授業で使う

登録不要でURLを開くだけ。書いた結果がすぐ見えるので、はじめてのHTMLに向きます。

スマホ幅を確認する

375px・768px・全幅を切り替えて、レイアウトの崩れをその場で確認する。

スニペットを配る

動く状態のまま1つのHTMLファイルに書き出して渡す、または短ければURLで共有する。

🔒 プライバシー

書いたコードはブラウザ内(localStorage)にだけ保存され、サーバーには送信されません。プレビューは同一オリジンの権限を与えないsandbox付きiframeで実行され、このページのデータには触れられません。URL共有を押したときだけ、共有URL(コードを含む)が短縮サービスに送られます。

❓ よくある質問

書いたコードはどこに保存されますか?

お使いのブラウザのlocalStorageにだけ保存されます。サーバーには送られないので、別の端末や別のブラウザからは見えません。逆に、ブラウザのデータを消すとコードも消えます。残しておきたいものは「HTMLをダウンロード」で1つのファイルとして保存するか、4KB以内なら「URLをコピーして共有」で共有URLを作ってください。

外部のライブラリ(jQueryなど)は読み込めますか?

cdnjs.cloudflare.com と cdn.jsdelivr.net のスクリプトは読み込めます。このページのセキュリティポリシー(CSP)がプレビュー側にも引き継がれるため、それ以外のドメインのスクリプトはブロックされます。画像・Webフォント・スタイルシートはhttpsであれば外部からでも読み込めます。

プレビューは安全ですか?

プレビューは allow-scripts だけを許可したsandbox付きのiframeで動きます。同一オリジンの権限(allow-same-origin)を与えていないため、プレビュー内のスクリプトからこのページのCookieやlocalStorageを読むことはできません。コンソールの内容は postMessage で受け取って表示しているだけです。

自動更新を止められますか?

「自動更新」のチェックを外すと、入力しても再描画しなくなります。重い処理や無限ループを書くときは自動更新を外し、「更新」ボタンで意図したタイミングだけ実行してください。万一プレビューが固まっても、固まるのはiframeの中だけなので、更新を止めてコードを直せば復帰できます。

🔗 関連ツール

コード

コードはこのブラウザにだけ保存されます。サーバーには送信されません。

プレビュー

表示幅

コンソール

プレビューは sandbox 付きの iframe で、このページとは別扱いで動きます。外部の画像やWebフォントは読み込めますが、外部スクリプトは cdnjs.cloudflare.com と cdn.jsdelivr.net のみ読み込めます。