ChatGPTにソースコードの生成をお願いしたところ、横に長いソースが生成され、横スクロールバーを移動させないと見えないことがある。
ということで左右の余白を消して、横長に表示できるようにしていく。
ちなみにこの方法をChatGPT4oに聞いたが、正しい回答は得られなかったので、ソースコードの解析を行った結果である。
1. 開発ツールを開く
「F12」で開くことができる。
最近はChroniumがベースのブラウザ(Google Chrome、Edge、Braveなど)が多いので、同様の手順でできると思うが表示されない場合は各々調べてくれ。
(通常であれば「Ctrl+Shift+I」でも開くが、ChatGPTの画面では、ChatGPTをカスタマイズする画面が表示されてしまう。)
2. 設定箇所を特定する
開発ツールにあるこのマーク
「Select an element in the page to inspect it.」
ページ内の要素を選択して、どこのコードか特定するツールで以下の画像の部分をクリックする。
ChatGPTのマークと回答の間にカーソルを持っていくと、画像のようなオレンジと水色、紫色の表示になる。この状態でクリックして下さい。
3. CSSを解除する
横幅を指定しているCSS(Cascading Style Sheets)の設定を消します。
フィルターで「max-width」を検索して、チェック外すことで
4. 開発ツールを閉じる
もう一度「F12」を押すことで閉じることができます。
留意点
これは一時的なものなので、ページを更新したりブラウザを閉じると設定が戻ってしまいます。
その場合は今回の手順でもう一度設定して下さい。