継続は力なり＃３５

2020年4月3日 22:54

フォーム関連プロパティ

リサイズ可能にする

一般的なブラウザでtextarea要素を表示させると、ボックスの右下をドラックすることで大きさが変えられる

適用対象がテキスト入力欄に限定されているわけではないが、このようにボックスの大きさをユーザーが変更できるようにするかどうかは「resize プロパティ」で設定できる

resize に指定できる値

・both
幅と高さの両方をリサイズ可能にする

・horizontal
幅だけをリサイズ可能にする

・vertical
高さだけをリサイズ可能にする

・none
リサイズができない状態にする

　resizeプロパティの初期状態は「none」

そのため、現在の一般的なブラウザではほとんどの要素はリサイズができない状態になっているが、textarea要素の resizeプロパティのプロパティの値については（デフォルトスタイルシートで）「both」に設定されているものが多い

したがって、他の値を指定できないかぎり、textarea要素は幅と高さの両方がリサイズ可能な状態となっているので注意

例

HTML

<p>
<textarea id="sample1" rows="3" cols="30">
初期状態</textarea>
</p>
 
<p>
<textarea id="sample2" rows="3" cols="30">
both（幅と高さを変更可）</textarea>
</p>
 
<p>
<textarea id="sample3" rows="3" cols="30">
horizontal（幅のみ変更可能）</textarea>
</p>
 
<p>
<textarea id="sample4" rows="3" cols="30">
vertical（高さのみ変更可）</textarea>
</p>
 
<p>
<textarea id="sample5" rows="3" cols="30">
none（変更不可）</textarea>
</p>

CSS

#sample2 { resize: both; }
#sample3 { resize: horizontal; }
#sample4 { resize: vertical; }
#sample5 { resize: none; }

初期状態

変更可能