CSSのresizeでテキストエリアのサイズ変更を制御！フォームのデザインを崩さない完全ガイド

テキストエリアのリサイズ制御（resize: noneなど）

先生と生徒の会話形式で理解しよう

生徒

「お問い合わせフォームの入力欄で、右下の角をドラッグするとサイズが自由に変えられますよね。あれってデザインが崩れそうで怖いのですが、固定することはできますか？」

先生

「その機能はテキストエリア特有のものです。CSSのresizeプロパティを使えば、簡単にサイズ変更を禁止したり、制限をかけたりすることができますよ。」

生徒

「具体的にはどのように指定するんですか？」

先生

「それでは、初心者の方にも分かりやすく、設定方法から詳しく解説していきます！」

1. テキストエリアのサイズ変更機能とは

ウェブサイト上で長い文章を入力してもらう際に利用されるのが、テキストエリア（textarea）です。この入力欄には、初期設定として右下に小さくギザギザとしたマークが表示されています。これをマウスでドラッグすると、ユーザーは自由に縦や横の長さを引き伸ばして調整できます。

この機能は便利ですが、ウェブサイトのレイアウトを綺麗に保ちたいデザイナーにとっては、意図しないサイズ変更によってページのデザインが崩れてしまうという悩みがありました。特にスマートフォンやタブレットで見ているときに、入力欄が画面からはみ出して表示されるような事態は避けたいものです。この挙動を制御する技術を学ぶことで、意図した通りの見栄えを維持できるようになります。

2. CSSのresizeプロパティを理解する

CSSには、要素の大きさを変更できるかどうかを指定するresize（リサイズ）というプロパティが用意されています。このプロパティに適切な値を設定することで、サイズ変更の挙動をコントロールします。

基本となるのはnone（ナーン）という値です。これを指定すると、テキストエリアのサイズ変更機能が完全にオフになり、ユーザーが自由にマウスでサイズを変えることができなくなります。まずはこの基本をしっかりと覚えておきましょう。コードの記述はとてもシンプルで、どのようなウェブ制作の現場でも多用される非常に便利な知識です。


<style>
    .fixed-textarea {
        resize: none;
        width: 300px;
        height: 150px;
    }
</style>

<textarea class="fixed-textarea" placeholder="サイズ変更できません"></textarea>

ブラウザ表示

3. 縦方向または横方向のみサイズ変更を許可する

すべての変更を禁止するのではなく、縦方向だけは伸ばせるようにしたい、といった要望もあるでしょう。resizeプロパティでは、方向を指定することも可能です。vertical（バーティカル）を指定すれば縦方向のみ、horizontal（ホリゾンタル）を指定すれば横方向のみ変更を許可できます。

例えば、文章入力の高さだけは内容に合わせて調整してもらいたいという場合には、verticalを指定するのが最適です。これにより、デザインの幅を維持しつつ、ユーザーの利便性も最低限確保するというバランスの取れた設計が可能になります。プログラミング未経験の方でも、こうした値を変えるだけで簡単に挙動をカスタマイズできるのがCSSの面白いところです。


<style>
    .vertical-textarea {
        resize: vertical;
        width: 300px;
        min-height: 100px;
    }
</style>

<textarea class="vertical-textarea" placeholder="縦方向のみ変更可能です"></textarea>

4. サイズ変更ができる状態に戻す方法

逆に、ブラウザの標準設定よりもさらに自由にサイズ変更をさせたいという場合には、both（ボス）という値を指定します。これはデフォルト設定と同じ挙動ですが、明示的に指定することで、コードを見た人が「ここは意図的に変更を許可しているのだな」とすぐに理解できるようになります。

ウェブ制作では、誰が見ても分かりやすいコードを書くことが大切です。resize: bothを指定すれば、縦横の両方向へ自由に変更可能となり、ユーザーは自分の好みに合わせて入力欄を調整できるようになります。ウェブサイトの性質に合わせて、どちらの設定がユーザーにとって親切かを判断することが、優れたフロントエンドエンジニアへの第一歩です。


<style>
    .both-textarea {
        resize: both;
        width: 300px;
        height: 100px;
    }
</style>

<textarea class="both-textarea" placeholder="自由にサイズ変更できます"></textarea>

5. スマホ対応とresizeの関連性

最近のウェブデザインではスマートフォンで見られることが前提となるため、resizeの設定はより一層慎重に行う必要があります。スマホの画面はパソコンに比べて非常に狭いため、ユーザーが自由にテキストエリアを大きくしてしまうと、画面の大部分が入力欄で埋め尽くされてしまい、他の情報が隠れてしまう可能性があります。

そのため、スマホ向けのスタイルを適用するときは、resize: noneを指定してサイズを固定してしまうのが現在のウェブデザインの主流です。パソコンでは変更を許可し、スマホでは変更を禁止する、といった細かい使い分けもメディアクエリという仕組みを使えば可能です。ユーザーがどの端末で見ていても快適に操作できる環境を作り上げましょう。


<style>
    @media (max-width: 600px) {
        .responsive-textarea {
            resize: none;
            width: 100%;
        }
    }
</style>

<textarea class="responsive-textarea" placeholder="スマホでは固定されます"></textarea>

6. フォームの整合性を保つための設計思考

テキストエリアのデザインだけでなく、周辺のラベルやボタンとのバランスを考えることも重要です。resizeによってサイズが変わる要素があると、どうしてもフォーム全体がガタついて見えてしまい、プロっぽさが損なわれてしまいます。

フォームというのは、ユーザーにとって情報を伝えるための大切な通り道です。その道が常に綺麗に整備されているかどうかは、ウェブサイトへの信頼感に直結します。基本的にはresize: noneでデザインをしっかり固定し、どうしても必要な場合のみ方向を制限するという考え方を身につけておけば、どのようなフォーム設計でも崩れることはなくなります。細かい部分への配慮を積み重ねることで、あなたのウェブサイトはより多くの人から愛されるものへと進化していきます。

7. ユーザーの使い勝手とデザインのバランス

resizeプロパティをうまく使いこなすことは、技術的なスキルだけでなく、使う人の視点に立つというデザインの本質を学ぶことでもあります。完全に制限することが必ずしも正解ではなく、時には制限を設けない方が親切な場合もあります。

大切なのは、今のページに何が必要かを立ち止まって考えることです。例えば、チャットアプリのように長い文章を頻繁に入力する場所なら、縦方向のリサイズを許可する。単なる氏名などの短い情報を入力する欄なら、余計なリサイズを禁止する。といった具合です。技術を知ることで、あなたはウェブサイトという空間をより快適に、そして美しく構築する権利を手に入れたことになります。今日覚えたresizeの制御技術を、ぜひ次のウェブ制作で活用してみてください。最初はうまくいかなくても大丈夫です。少しずつコードを書いていく中で、必ず理想のレイアウトが作れるようになります。

2026年最新スキルアップ・実践セミナー