フロントエンドのアイデアをすばやく検証
HTML構造、CSSスタイル、JavaScriptの動作を同じ画面で編集し、プレビューで確認できます。
HTML・CSS・JavaScriptコードプレイグラウンド
HTML・CSS・JavaScriptコードプレイグラウンド
HTML、CSS、JavaScriptを編集し、サンドボックス化したiframeのプレビューとコンソールを確認して、単体HTMLをダウンロードします。
主な機能
- HTML、CSS、JavaScript専用のCodeMirrorエディターとライブプレビューを提供します。
- 自動または手動で実行し、console log・info・warn・errorとランタイムエラーを取得します。
- 完全な文書をコピーするか、CSSとJavaScriptを含む1つのHTMLファイルとして保存します。
- allow-scriptsのみのiframeと、外部リソースや一般的なネットワークAPIを制限するCSPを使用します。
- コードと自動実行設定を現在のブラウザのローカルストレージに保存します。
使い方
- HTML、CSS、JSタブにコードを記述します。
- 自動実行または実行ボタンでプレビューとコンソールを確認します。
- 必要に応じて完全な文書をコピーするかHTMLとしてダウンロードします。
活用例
小さな再現例を準備
コンソール出力やエラーを確認し、現在のCSSとJavaScriptを含む単体HTMLとして保存できます。
プライバシー
コードはそのブラウザのローカルストレージに保存され、ブラウザ内のサンドボックス化されたiframeプレビューで実行されます。
動作要件
外部リソースと一般的なネットワークAPIは制限されますが、iframe自体のナビゲーションは完全なセキュリティ境界ではありません。信頼できないコードや機密情報を実行しないでください。
よくある質問
- 外部のCSSやJavaScriptライブラリを読み込めますか？
- プレビューのCSPが外部リソースと一般的なネットワークAPIを制限するため、必要なコードはエディター内に直接含めてください。
- 再読み込みすると書いたコードは消えますか？
- コードと自動実行設定は現在のブラウザのローカルストレージに保存されます。サンプルへの復元や全消去は明示的に選べます。
関連ツール
- ブラウザJavaScript実行・コンソールJavaScriptを別のWeb Workerで実行し、コンソール出力、最後の式、エラー、実行時間を確認します。
- HTMLエンティティ エンコード・デコードHTMLで特別な意味を持つ文字を名前付き・10進・16進エンティティへ変換し、ブラウザの対応表でデコードします。
- Markdownライブプレビュー・HTMLビューアーGitHub Flavored Markdownをライブプレビューの横で編集し、サニタイズ済みのHTMLをコピーします。
- カラーピッカー | 画像・画面から色を取得HEX、RGB、HSLを相互変換し、アップロード・貼り付け画像のピクセルや対応ブラウザの画面から色を取得します。