混在コード
<h1 style="color:red">HI</h1>
プレビュー
赤いテキストを表示し、要素に指定した JS を実行します。
開発者ツール
Web サンドボックス — HTML／CSS／JS プレビュー
HTML、CSS、JavaScript をページ内の分離された iframe で編集・プレビューします。ローカルプロジェクトを開かずに、小さなフロントエンドコードを確認する場合に便利です。
HTMLSandboxPreview
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
开发工具
Web サンドボックスプレビュー
在左侧编写 HTML / CSS / JS，结果在隔离 iframe 中预览。 已加载模板。
源码（HTML / CSS / JS）
预览输出
利用シーン
- 小さな HTML／CSS 変更を確認する
- 短いインタラクティブコードをデモする
- スタイルをデバッグする前に最小再現例を作る
使い方
- エディターに HTML、CSS、JS を入力します
- 実行または保存してプレビューを更新します
- 期待する表示になるまで調整します
入出力サンプル
FAQ
ネットワークリクエストを送信できますか？
プレビューは制限付きの sandbox iframe で実行されるため、クロスオリジンリクエストは通常失敗します。静的マークアップとローカルスクリプトに適しています。
オンライン IDE との違いは何ですか？
短いコードをすぐにプレビューするためのツールです。プロジェクト全体の依存関係管理や複数ファイルのワークスペースには対応しません。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
HTMLミニファイア
HTML 圧縮・余分な空白の整理
余分な空白や改行を除去してHTMLフラグメントをローカルで最小化します。マークアップをアップロードせずにテンプレートの整理やサイズ比較に便利です。
HTML ミニファイア
CSS Grid ジェネレーター
CSS Grid ジェネレーター - 行、列、gap
列数、行数、gap を設定し、基本的な display:grid レイアウトを生成できます。track 構造をプレビューし、簡易テンプレートを試しながら、管理画面レイアウトやカードグリッド向けの CSS / HTML をコピーできます。
CSS Grid Layout
Flexbox ジェネレーター
Flexbox ジェネレーター - 1 次元レイアウトの視覚調整
flex-direction、justify-content、align-items、wrap、gap をライブプレビュー付きで調整できます。box の追加・削除で折り返しや余白を確認し、生成された CSS と HTML scaffold をそのままプロジェクトへ持ち込めます。
Design CSS Layout