【X・Twitter】チャット入力欄の高さ制限を撤廃するCSS
この記事では、PCウェブサイト版「X（旧Twitter）」のチャット（DM）入力欄の高さ制限を撤廃するCSSについて書きます。長文入力がしやすくなります。
通常、PC版Xのチャット入力欄は高さ制限があります。一定量の文章を入力すると見切れてしまいます。その中でスクロールすれば見れます。
長文を入力した時にかなり不便です。
スクロールして誤字をチェックするのがめんどくさいです。まぁそもそもXのチャットは、うっかりEnterで誤送信しちゃう恐れがあるので、別のメモ帳に書いてコピペが安心だと思います。わざわざEnterで送信できないように制限する拡張機能もあるくらいです。
https://www.naporitansushi.com/no-submit-on-enter-for-twitte...本記事のCSSを導入すると、少々長文でも見切れないよう高さを伸ばすことができます。元々の高さを伸ばすわけではなく、長文になった時に一緒に伸びる形なので普段の短文入力時を邪魔しません。
CSSを導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。
拡張機能を利用できるブラウザアプリ（例：Kiwi Browserは2025年1月で開発終了なのでMicrosoft Edge CanaryやFirefox）などをインストールして、ブラウザ版から利用する場合はもしかしたら使えるかもしれません。
前提
「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。
Xチャット入力欄の高さ制限を撤廃するCSS
スタイルシートを開く
「X（旧Twitter）」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。
もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードを書き込みます。
/*チャット入力欄の高さ・幅の制限撤廃（2026年02月23日修正）*/
textarea[data-testid="dm-composer-textarea"] {
max-height: 700px !important;
min-height: auto !important;
}「max-height: 700px !important;」が高さ制限です。
デフォルトではもっと小さい数字が設定されていたので「700px」と高い数字で上書きしています。もっと高さ制限を広げたい場合は、数字を「800px」や「900px」といったように大きくします。
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：x.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
変わったか確認
試しにサブ垢を使って長文入力してみます。
通常なら一定行になると見切れます。本記事のCSSを適用した後だと表示エリアがどんどん上にせり上がります。上記CSSだと700pxまで拡張されます。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「x.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
感想
以上、PCウェブサイト版「X（旧Twitter）」のチャット（DM）入力欄の高さ制限を撤廃するCSSでした。
DMの自分が送ったメッセージの背景色を変更する記事を書いています。同じようにCSSを使うことで可能です。
