ライブコードプレイグラウンド
HTML、CSS、JavaScriptを記述すると、プロ仕様の分割画面ライブプレビューで結果を即座に確認できます
1
1
1
コンソール
Fastolsのライブコードプレイグラウンドとは?
このツールでは、HTML・CSS・JavaScriptのコードをそれぞれ別のエディタで記述でき、独立したフレーム内で結果をライブプレビューし、コードから出力されるconsole.logメッセージを表示するスペースもあります。
記述したコードはブラウザに自動的に保存され、同じデバイス・同じブラウザでページを再度開いても残っています。
コードはブラウザ内でのみ実行
HTML、CSS、JSは隔離されたプレビュー内でローカルに実行され、何もアップロードされません。
入力中にリアルタイムプレビュー
入力するたびにレンダリング結果が即座に更新されます。
登録不要ですぐ利用開始
無料でプレイグラウンドを開き、すぐにコードを試せます。
ライブコードプレイグラウンドの使い方
- 1HTMLタブにHTMLコードを、CSSタブにスタイルコードを、JSタブにプログラムコードを記述します。
- 2「実行」ボタンを押してコードを実行し、プレビューで結果を確認します。
- 3エディタ下部の専用Consoleスペースに表示されるconsole.logメッセージを確認します。
- 4必要に応じて「リセット」を押すと、デフォルトのコードに戻ります。
ライブコードプレイグラウンドに関するよくある質問
記述したコードはページを閉じた後も保存されますか?
はい、コードはブラウザのローカルストレージに自動的に保存され、同じブラウザ・同じデバイスでページを再度開くと表示されます。
JavaScriptコードに記述したconsole.logメッセージはどこに表示されますか?
これらのメッセージはツール内の専用Consoleスペースに表示され、表示されたメッセージ数を示すカウンターも付いています。
「リセット」ボタンは何をしますか?
「リセット」ボタンは、3つのエディタの現在のコードを、あらかじめ用意されたデフォルトのサンプルコードに置き換えます。
記述したJavaScriptコードは独立したフレーム内で動作しますか?
はい、プレビューはページの他の要素から独立したフレーム(iframe)内に表示され、コードは分離された環境で動作します。
記述したコードはサーバーに送信されますか?
いいえ、コードはすべてブラウザ内で動作し、ブラウザのローカルストレージにのみ保存され、サーバーにアップロードされることはありません。