【CSS】【resize】ユーザーが要素のサイズを変更できるようにする

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSのresizeプロパティを使って、ユーザーが要素のサイズを変更できるようにする方法をご紹介しています。

上記の疑問にお答えします。

では、解説してきます。

resizeプロパティとは

resize は CSS のプロパティで、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。

構文

resizeプロパティの構文は下記の通りです。〇〇〇の箇所にキーワード値を指定します。

resize: 〇〇〇;

キーワード値

下記がresizeプロパティで指定できる一般的なキーワード値です。水平方向／垂直方向に対するサイズ変更を正業することができます。

none	ユーザーによるリサイズ不可
both	水平方向／垂直方向のリサイズ可
horizontal	水平方向のリサイズ可
vertical	垂直方向のリサイズ可

参考：https://developer.mozilla.org/ja/docs/Web/CSS/resize

resizeプロパティを使用するには

CSSのresizeプロパティは、指定した値に応じて要素のサイズを変更することできます。ユーザー側で操作しやすいように要素のサイズを変更することができる便利なプロパティですが、使用するにあたっていくつかクリアしなければならない条件があります。

• resizeプロパティに対応したブラウザであること
• resizeプロパティを適用する要素はインライン要素以外であること
• resizeプロパティを適用する要素にoverflowのvisibleが指定されていないこと

それぞれ詳しくご説明します。

resizeプロパティに対応したブラウザであること

resizeプロパティはIE11では対応していない状況のため、IEでは使用することができません。最新のIE11は2022年6月でサポートが打ち切られ、今後IEを起動するとEdgeが立ち上がるようになるため、本格導入する時期については、IE11のサポート終了を待ってからの方が無難かなと思います。

参考：resizeプロパティのブラウザ対応状況

resizeプロパティを適用する要素はインライン要素以外であること

resizeプロパティはspanやaのようなインライン要素で使用することができません。インライン要素で使用する場合は、display: block等でブロック要素に変更する必要があります。

resizeプロパティを適用する要素にoverflowのvisibleが指定されていないこと

overflowの値にも注意が必要です。要素にはデフォルトでoverflowにvisibleが設定されています。そのためvisible以外の値に変更しなければresizeプロパティが適用されません。基本的にautoを指定すれば問題ないですが、使用する要素やコーディング状況にあわせてvisible以外の値に変更しましょう。

参考：resize は以下の者には適用されません。

resizeプロパティで要素のサイズを変更できるようにする

resizeプロパティで要素のサイズを変更できるようにしてみます。水平方向・垂直方向のサイズが変更できるようにbothを指定した例をご紹介します。

HTML

<div id="app">
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

CSS

#app {

    width: 100%;
    height: auto;
    max-width: 500px;
    overflow: hidden;
    resize: block;
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

実行結果では実際に要素のサイズを変更して動作をご確認ください。

上記ではmax-widthを指定しているため水平方向はmax-widthの値の範囲内でサイズを変更することができます。指定した範囲内でのみサイズを変更できるようにしたい場合に有効な方法となっています。

最後に

CSSのプロパティ一覧を眺めていると、新しい発見がいくつもあって、良い刺激をもらえます。コーダーの方は新しいプロパティで今後使えそうなものがあれば早い段階でインプットして、用途に応じて適切なプロパティが選択できるようにしておくと良いかもしれませんね。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/Reference

以上、CSSのresizeでユーザーが要素のサイズ（大きさ）を変更できるようにする方法のご紹介でした！