ChatGPTで出力されたHTMLやCSS、JSを
即座にCodepenでプレビュー可能な拡張機能。
Web制作にとても便利で、出力されたコードを
即座に編集したり実行が可能です。
![ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』](https://pc.mogeringo.com/wp-content/uploads/2024/06/chatgptcodepreview-thumb.jpg)
目次
リンク先
ChatGPT Web Preview リンク先はこちらから
Chrome / Edge / FireFoxに対応
インストール
![ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』](https://pc.mogeringo.com/wp-content/uploads/2024/06/chatgptcodepreview2.png)
上記リンク先ページを開きお使いのブラウザのアイコンをクリックします。
![ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』](https://pc.mogeringo.com/wp-content/uploads/2024/06/chatgptcodepreview3.png)
それぞれのストアページが開くので「Chromeに追加」をクリックします。
![ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』](https://pc.mogeringo.com/wp-content/uploads/2024/06/chatgptcodepreview4-1.png)
拡張機能を追加をクリックするとインストールが完了します。
アイコンは使わないので、ピン留め表示は不要です。
使い方
![ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』](https://pc.mogeringo.com/wp-content/uploads/2024/06/chatgptcodepreview1.png)
ChatGPTでコードが出力された時の画面ですが、通常はこのようにコードが表示されるだけとなります。
![ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』](https://pc.mogeringo.com/wp-content/uploads/2024/06/chatgptcodepreview5.png)
この拡張機能を導入するとコード出力の下にCodepenでのプレビュー画面が表示され、
実際に動作を確認することができます。
また右下の「Edit on CodePen」をクリックするとCodepenで開くことも可能です。
![ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』](https://pc.mogeringo.com/wp-content/uploads/2024/06/chatgptcodepreview6-1200x832.png)
出力されたコードを即座にCodepenで実行したり、変更したりも可能です。
対応している言語はHTML、CSS、JavaScriptとWeb関連の言語になっているようです。
![ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』](https://pc.mogeringo.com/wp-content/uploads/2024/06/chatgptcodepreview7.png)
出力されたコードを即座にプレビューできる便利な拡張機能。
Web制作などでChatGPTを使っている方には便利過ぎる機能です。
コメント