HTML・CSS・JSコードプレビュー・保存ツール|Code Preview & Exporter

HTML / CSS / JavaScriptコードを入力すると、その場でリアルタイムにプレビュー確認や別タブでの起動ができ、1つの統合されたHTMLファイルとしてダウンロードできる開発支援ツールです。本サイトで公開している Web・UIデザイン の実装確認などにお役立てください。

このツールは …回 使われています。

HTML
CSS
JavaScript

使い方ガイド

  • コードの入力:HTML、CSS、JavaScriptそれぞれのエリアにコードを入力します。
  • プレビュー表示:HTMLとCSSは入力中に自動保存され、プレビューにも反映されます。HTML内のスクリプト・イベント処理を含むJavaScriptは、「JavaScriptを実行」にチェックを入れて「プレビュー更新」を押した場合だけ動作します。入力中と再読み込み時は実行しません。画面サイズボタンでプレビューの横幅を切り替えられます。
  • プレビューの制限:プレビューは隔離された領域で動きます。親ページ、Cookie、保存領域、ポップアップ、フォーム送信、alert・confirm・promptは利用できません。無限ループなどを実行すると、プレビューだけでなくアプリを開いているブラウザータブ全体が応答不能になる場合があります。信頼できるコードだけ実行してください。
  • 別タブで開く:「JavaScriptを実行」のチェック状態に応じて、JavaScriptを含めるか切り替えたページを親ページから隔離した新しいタブで開きます。スクリプトを実行してタブが応答しなくなった場合は、そのタブを閉じてください。
  • HTML保存:「JavaScriptを実行」のチェック状態に応じて、JavaScriptを有効または無効にしたHTMLファイルをダウンロードします。有効にしたファイルは通常のHTMLとしてスクリプトが動作するため、信頼できるコードだけ保存・実行してください。
  • 自動保存機能:入力したコードはブラウザに自動的に保存されるため、ページをリロードしてもそのまま再開できます。

ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。

バグや表示の乱れ、追加してほしい機能などがあれば、こちらよりお知らせください。

バグや表示の乱れ、使いにくかった点、追加してほしい機能などがあればお知らせください。
同意事項
・本フォームは不具合報告・改善要望専用です。個別の返信は原則行っておりません。
・誹謗中傷、脅迫、公序良俗に反する内容が含まれる場合、IPアドレス等のログに基づきしかるべき対処を行います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次