Web上でHTMLやCSS、JavaScriptを
リアルタイムで確認、実行できるWebサービス。
Web制作、Web学習にとても便利で
コードを記述して即時にプレビューや実行可能です。
![Web上でHTML、CSS、JavaScriptをリアルタイムで確認、実行できるWebサービス 『Playground』](https://pc.mogeringo.com/wp-content/uploads/2023/07/playground-thumb.jpg)
目次
リンク先
使い方
![Web上でHTML、CSS、JavaScriptをリアルタイムで確認、実行できるWebサービス 『Playground』](https://pc.mogeringo.com/wp-content/uploads/2023/07/playground1.jpg)
左側に上からHTML、CSS、JAVASCRIPTと並んでいるのでそれぞれコードを記述するだけで、
画面右側のプレビューウィンドウにリアルタイムに表示されていきます。
プレビューウィンドウの下にはコンソールも用意されていてデバッグなどに便利です。
![Web上でHTML、CSS、JavaScriptをリアルタイムで確認、実行できるWebサービス 『Playground』](https://pc.mogeringo.com/wp-content/uploads/2023/07/playground2.jpg)
入力時は補完などの機能も完備されています。HTML勉強中の方には特に助かります。
![Web上でHTML、CSS、JavaScriptをリアルタイムで確認、実行できるWebサービス 『Playground』](https://pc.mogeringo.com/wp-content/uploads/2023/07/playground3.jpg)
簡単なサンプル画面を作ってみました。
CSSが実際に記述中からリアルタイムに反映されているのが分かります。
![Web上でHTML、CSS、JavaScriptをリアルタイムで確認、実行できるWebサービス 『Playground』](https://pc.mogeringo.com/wp-content/uploads/2023/07/playground4.jpg)
ボタンを押して実行されるJavaScriptを作ってみました。
console.logでしっかりとコンソールに表示されるのも確認出来ました。
![Web上でHTML、CSS、JavaScriptをリアルタイムで確認、実行できるWebサービス 『Playground』](https://pc.mogeringo.com/wp-content/uploads/2023/07/playground5.jpg)
Web制作など開発現場でも、HTMLやJavaScript学習にもとても便利なWebサービスです。
コメント