概要

resizeプロパティは、CSSで要素のリサイズを制御するためのプロパティです。ユーザーが要素のサイズを変更できるかどうかを指定できるため、特にテキストエリアなどのフォーム要素や、カスタムUIで使われることが多いです。resizeを使用することで、要素を拡大縮小できるようにし、より柔軟なレイアウトを実現することが可能です。

resizeプロパティの基本構文

resizeプロパティの基本的な構文は次の通りです。

resize: none | both | horizontal | vertical | block | inline;
  • none リサイズを無効にします（デフォルト値）。
  • both 要素を縦横両方向にリサイズ可能にします。
  • horizontal 要素を水平方向（横方向）のみリサイズ可能にします。
  • vertical 要素を垂直方向（縦方向）のみリサイズ可能にします。
  • block ブロックの要素に適用されるリサイズモード（水平方向と垂直方向のリサイズ）。
  • inline インライン要素に適用されるリサイズモード。

使用例

テキストエリアのリサイズを制御する

resizeプロパティは、主に<textarea>要素で使用されることが一般的です。以下の例では、テキストエリアのリサイズ動作を制御しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>resizeプロパティの例</title>
<style>
.no-resize {
resize: none;
}
.horizontal-resize {
resize: horizontal;
}
.vertical-resize {
resize: vertical;
}
.both-resize {
resize: both;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid #ccc;
padding: 8px;
overflow: auto;
}
</style>
</head>
<body>
<h2>リサイズ無効</h2>
<textarea class="no-resize" placeholder="リサイズできません"></textarea>
<h2>水平リサイズのみ可能</h2>
<textarea class="horizontal-resize" placeholder="横方向にリサイズ可能"></textarea>
<h2>垂直リサイズのみ可能</h2>
<textarea class="vertical-resize" placeholder="縦方向にリサイズ可能"></textarea>
<h2>縦横両方向にリサイズ可能</h2>
<textarea class="both-resize" placeholder="縦横にリサイズ可能"></textarea>
</body>
</html>

この例では、異なるresize設定を持つテキストエリアが表示され、各設定によってリサイズの可能性が変わることがわかります。

カスタムUI要素に適用する

resizeプロパティは、テキストエリア以外の要素にも適用できます。次の例では、カスタムのスクロールボックスにリサイズ機能を追加しています。

<div class="resizable-box">
<p>このボックスはリサイズ可能です。要素を自由に拡大縮小して、表示内容を調整できます。</p>
</div>
<style>
.resizable-box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
resize: both;
overflow: auto;
}
</style>

このdiv要素は、ユーザーが自由にサイズを変更できるようになっており、柔軟なレイアウトを提供します。

resizeプロパティの注意点

  • resizeは、要素にoverflowプロパティが設定されている場合にのみ効果を発揮します。overflow: hiddenなどに設定されている場合は、リサイズが無効化されるので注意が必要です。
  • リサイズ可能な要素は、デザインの意図しない崩れを引き起こすことがあります。特に固定レイアウトや他の要素との位置関係に依存するレイアウトでは、慎重に使用する必要があります。
  • resizeの効果は、ユーザーが手動で行うリサイズに限定されます。プログラム的に要素をリサイズするためには、resizeではなく、JavaScriptで要素のサイズを変更する必要があります。

まとめ

resizeプロパティは、ユーザーインターフェースの柔軟性を高めるために非常に有用なCSSプロパティです。特に入力フィールドやカスタムコンテンツボックスで活用することで、ユーザーにとって使いやすいインターフェースを実現できます。ただし、レイアウトの整合性を保つために慎重に使用し、overflowとの組み合わせやデザイン全体への影響を考慮して適切に設定することが重要です。

参照:

resizeプロパティ（`CSS`） | MDN Web Docs