[css]textareaのサイズ固定方法

高さはともかく幅はあんまり広げたくない

どういうことか

textareaは可変前提のタグなので、右下をドラッグすればサイズ調整ができる。

記述した内容が枠内に収まらなかったときはそれで見れるようになるので便利。

だけど、広げたら他のコンテンツに影響してデザインが崩れる。縦に伸ばす分には何も影響は無いんだけど、横幅を広げたらえらいことになる。わざとやる分には勝手にしてくれだけど、ひょんなことから伸びちゃったら戻せない、めんどくさい。何をして誤操作してどこまでだるいことになるかというのは想定できないというか。閲覧に耐えられない感じになっちゃったらブラウザを再読み込みするしかなくて、そうすると入力内容が飛ぶ。場合によっては固定しなきゃだね、ということ。

やっていく

幅の固定(高さはいじれる)

textarea{
    resize: vertical;
}

高さの固定(幅はいじれる)

textarea{
    resize: horizontal;
}

完全固定

textarea{
    resize: none;
}

サイズ指定の話

width、heightを指定したとき、これはユーザーが何もしてない、ページを読み込んだ際の表示に掛かる。textarea自体が可変なので、実数を指定してもここからドラッグで増減できる。固定したければ上記のようにresize:none;を追加する必要がある。

textarea{
    width: 400px;
    height: 200px;
}

最小値、最大値を指定することでtextareaのサイズ変更を制御できる。この幅の中であれば好きに変更できますよ、って感じになる。

textarea{
    max-width: 800px;
    min-width: 400px;
    max-height: 600px;
    min-height: 200px;
}

maxとminを同値にすればサイズ固定になるんだけど、可変機構は生きてるからwidthとheightの値は変更される。反映されてないってだけ。なので、作法としてよろしくないというか。ドラッグしてるのに変わらないんだけど、ということになる。resizeで指定すればカーソルやら装飾で視覚的に理解できるんで、そっちを使うのが良い。コード数も少なくできる。

コメント

タイトルとURLをコピーしました