【ChatGPT】テキストエリアの高さを広げるCSS

2025年12月3日Stylebot&Stylus(CSS)ChatGPT

この記事では、PCウェブサイト版「ChatGPT」のプロンプト入力欄の高さ制限を広げるCSSを書きます。長文入力する方におすすめです。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

PCウェブサイト版「ChatGPT」のテキストボックスに長文を入力した時、途中から見切れてしまいます。右側にスクロールバーが表示されます。

一定以上の高さまでは広げてそれ以降はスクロールで対応する…っていう仕様になっていました。

CSSを使うことで、画面ぎりぎりまで高さ制限を限界突破できます。

一回の入力でそんな長文を送らない人にとってはデフォルトの高さ制限でも問題ないと思います。長文を送りがちな方にはいいかもしれません。

CSSは自身の環境上（見た目）のみの反映で、他人には一切影響しません。

Chrome拡張機能を導入できるPCブラウザでの話です。スマホやタブレットのアプリ版では拡張機能を導入できないのでできません。

【PR】OpenAI o1搭載のSEOライティングツール「トランスコープ」

1. 前提
2. 高さを広げるCSS
3. 感想

前提

「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

高さを広げるCSS

スタイルシートを開く

「ChatGPT」にアクセスして適当に会話ページを開きます。

インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。

CSS

/*テキストエリアの高さ制限撤廃*/
main:has(article) #thread-bottom-container *:has(>textarea[placeholder*="質問"]) {
    max-height: 87vh !important;
}

/*新規チャットページのテキストエリアの高さ制限撤廃*/
main:not(:has(article)) #thread-bottom-container *:has(>textarea[placeholder*="質問"]) {
    max-height: 60vh !important;
}

/*新規チャットページのテキストエリアの位置調整*/
main:not(:has(article)) header+div {
    min-height: 16vh !important;
}

/*テキストエリアの高さ制限撤廃*/
main:has(article) #thread-bottom-container *:has(>textarea[placeholder*="質問"]) {
    max-height: 87vh !important;
}

/*新規チャットページのテキストエリアの高さ制限撤廃*/
main:not(:has(article)) #thread-bottom-container *:has(>textarea[placeholder*="質問"]) {
    max-height: 60vh !important;
}

/*新規チャットページのテキストエリアの位置調整*/
main:not(:has(article)) header+div {
    min-height: 16vh !important;
}