HTML CSS JS プレイグラウンド

コードスニペットを書いて、実行して、共有できます — セットアップ不要。

プレビュー自動プレビュー

コンソール

コンソール出力がここに表示されます。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Playground</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1 id="greeting">Hello, world!</h1>
        <button id="btn">Click me</button>
        <script src="script.js"></script>
    </body>
</html>

ライブプレビュー付きで HTML、CSS、JavaScript を作成

実ブラウザのプレビュー付きの無料オンライン HTML・CSS・JavaScript プレイグラウンド。index.html、styles.css、script.js の3ファイルを編集すれば、変更のたびに iframe が再レンダリングされます。ローカルサーバーも、Live Server 拡張も、ビルドも不要です。

エディタは VS Code と同じエンジンで動いているので、HTML タグや CSS プロパティ、JS のオートコンプリートがそのまま使えます。ライブプレビューはサンドボックス化された iframe 内でページをレンダリングします。ランディングページのラフ作り、CSS grid の実験、素の DOM スクリプトの記述などにちょうどいい環境です。

この HTML・CSS・JavaScript プレイグラウンドが役立つ理由

瞬時のライブプレビュー — HTML、CSS、JS を編集すると、変更のたびに iframe が再レンダリングされます。ビルドもリロードも不要。
HTML・CSS・JavaScript の構文ハイライトとオートコンプリート。Emmet スタイルのショートカットと即時フィードバックを、VS Code と同じエディタエンジンで提供。
インストール不要：Node も Live Server もローカル HTTP サーバーもいりません。どのブラウザからでも HTML、CSS、JS をプレビューできます。
3 ファイルすべてをライブプレビュー — HTML・CSS・JavaScript を同時に編集すると、ビルド不要で iframe 内に即時反映されます。

HTML・CSS・JavaScriptプレイグラウンドで作れるもの

ランディングページ：構造化された HTML、モダンな CSS（grid、flex、カスタムプロパティ）、ちょっとした JavaScript を組み合わせて、すべてプレビュー iframe にライブリロードされます。
CSS の実験：grid レイアウト、flex の整列、アニメーション、レスポンシブな media queries を、変更のたびに視覚的フィードバックですぐ確認できます。
バニラ JavaScript による DOM 操作:querySelector、event listeners、fetch、localStorage を、ライブブラウザプレビューで即座に確認できます。

HTML・CSS・JavaScript プレイグラウンドのよくある質問

オンライン HTML・CSS・JavaScript プレイグラウンドは無料ですか？

はい、HTML・CSS・JavaScript プレイグラウンドは無料で使えます。登録不要、ローカルサーバー不要、VS Code の Live Server 拡張も不要 — 書いてプレビューするだけです。

ローカルサーバーや VS Code の Live Server は必要ですか？

インストール不要です。VS Code の Live Server も、ローカル HTTP サーバーも、Node も必要ありません。HTML、CSS、JS のファイルはブラウザが iframe で直接プレビューします。

HTML・CSS・JavaScript プレイグラウンドはモバイルで動きますか？

はい。HTML・CSS・JavaScript プレイグラウンドはデスクトップ、タブレット、モバイルのブラウザで動作します。エディタ、プレビュー iframe、ファイルタブはすべて小さな画面に対応します。

ここで HTML と JavaScript をプレビューするのは安全ですか？

???HTML?CSS?JavaScript ????????????????? iframe ????????????? Coddy ??????????????

プレイグラウンドを試した後、HTML・CSS・JavaScript はどう学べばいいですか？

サンプルの HTML、CSS、JS を書き換えて「実行」を押し、プレビューが更新されるのを見てみてください。もう少し体系的に学びたくなったら、Coddy のインタラクティブな HTML、CSS、JavaScript コースが、セレクタから本格的なページ制作まで案内します。