CSS - リサイズ: ユーザーに要素のサイズをコントロールさせる

こんにちは、未来のウェブ開発者さんたち！今日は、ウェブサイトの訪問者が要素のサイズを直接コントロールできる素晴らしいCSSプロパティについてお話しします。resizeの世界にようこそ！

CSS - Resize

CSS リサイズプロパティとは？

本題に入る前に、簡単な質問から始めましょう：テキストエリアの右下隅に小さなハンドルがあって、そのことでサイズを調整できるのを見たことがありますか？那就是 resize プロパティが動いているのです！

CSSの resize プロパティは、ユーザーが要素をリサイズできるようにします。ユーザーにミニドラッグハンドルを与え、ウェブページ上の特定要素のサイズを調整できるようにすることです。すごいですね？

さて、あなたはおそらく「ウェブページのすべてをリサイズ可能にできるのか？」と思っているかもしれません。結論から言えば、そうではありません。resize プロパティは主に、overflow が visible 以外に設定された要素に適用されます。具体的には以下の通りです：

でも心配しないでください、他の要素をリサイズ可能にする方法も見ていきます！

resize プロパティの文法を分解してみましょう：

要素 {
resize: 値;
}

簡単ですね。では、使用できるさまざまな値を見てみましょう。

以下の表に、resize プロパティのすべての可能な値をまとめています：

これらの値をそれぞれの例とともに見ていきましょう！

textarea {
resize: none;
}

このコードはブラウザに「このテキストエリアを誰にもリサイズさせないでください！」と伝えます。まるで「触らないでください」のサインを要素に貼っているようなものです。

textarea {
resize: vertical;
height: 100px;
width: 200px;
}

このコードにより、テキストエリアは初期サイズ100pxの高さと200pxの幅から始まり、ユーザーが高さを調整できます。まるでテキストのエレベーターのように！

div {
resize: horizontal;
overflow: auto;
width: 200px;
height: 100px;
border: 2px solid blue;
}

ここでは、div に resize: horizontal を適用しています。非テキストエリア要素の場合、overflow を visible 以外に設定する必要があります。ユーザーはこの div の幅を調整できます。まるでゴム-bandを伸ばしているようなもの！

textarea {
resize: both;
min-height: 100px;
max-height: 300px;
min-width: 200px;
max-width: 400px;
}

これは究極の柔軟性です！ユーザーはテキストエリアを任意の方向にリサイズできますが、最小・最大サイズを設定して、太小または太大にならないようにしています。まるでユーザーに砂場を与え、一定の柵を設けておくようなものです。

.parent {
resize: both;
overflow: auto;
}

.child {
resize: inherit;
}

ここでは、子要素が親要素からリサイズ動作を継承します。まるで家族の宝物を引き継ぐようなもの、でもリサイズの分野では！

さて、少し冒険してみましょう。普通の div をリサイズ可能にするにはどうしたらいいでしょうか？

.resizable-div {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #00f;
overflow: auto;
resize: both;
}

<div class="resizable-div">
<p>私はリサイズ可能なdivです！私をリサイズしてみてください！</p>
</div>

overflow: auto と resize: both を設定することで、普通の div をリサイズ可能な遊び場に変えます！まるでHTML要素にスーパーパワーを与えるようなものです。

そして、みなさん！CSSの resize プロパティの素晴らしい世界を探求しました。resize: none で要素を固定から、resize: both で完全に柔軟なコンポーネントを作成まで、あなたはウェブページ上の要素のサイズをコントロールする力を手に入れました。

ただし、強力な力には責任が伴います。ユーザー体験を向上させるために resize プロパティを賢く使いましょう。訪問者を混乱させたり苛立たせたりしないように。

ウェブ開発の旅を続ける中で、さまざまなCSSプロパティを試してみてください。あなたのツールボックスに新たなスキルを追加するかもしれません！

幸せなコーディングをし、あなたの要素が常に完璧なサイズで保たれますように！

Credits: Image by storyset