ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』

ChatGPTで出力されたHTMLやCSS、JSを
即座にCodepenでプレビュー可能な拡張機能。
Web制作にとても便利で、出力されたコードを
即座に編集したり実行が可能です。

ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』
目次

リンク先

ChatGPT Web Preview リンク先はこちらから

Chrome / Edge / FireFoxに対応

インストール

ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』

上記リンク先ページを開きお使いのブラウザのアイコンをクリックします。

ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』

それぞれのストアページが開くので「Chromeに追加」をクリックします。

ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』

拡張機能を追加をクリックするとインストールが完了します。
アイコンは使わないので、ピン留め表示は不要です。

使い方

ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』

ChatGPTでコードが出力された時の画面ですが、通常はこのようにコードが表示されるだけとなります。

ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』

この拡張機能を導入するとコード出力の下にCodepenでのプレビュー画面が表示され、
実際に動作を確認することができます。
また右下の「Edit on CodePen」をクリックするとCodepenで開くことも可能です。

ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』

出力されたコードを即座にCodepenで実行したり、変更したりも可能です。
対応している言語はHTML、CSS、JavaScriptとWeb関連の言語になっているようです。

ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能 『ChatGPT Web Preview』

出力されたコードを即座にプレビューできる便利な拡張機能。
Web制作などでChatGPTを使っている方には便利過ぎる機能です。

よかったらシェアしてください!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次