HTML DOMのresizeプロパティとは？要素のリサイズ設定方法を解説
HTML DOMのresizeプロパティは、HTMLドキュメント内の要素がユーザーによってサイズ変更（リサイズ）可能かどうかを取得・設定するためのスタイルプロパティです。このプロパティを使うことで、JavaScriptから動的に要素のリサイズ挙動を制御できます。
構文（Syntax）
resizeプロパティの基本的な構文は以下のとおりです。
resizeの値を取得する場合
object.style.resize
resizeの値を設定する場合
object.style.resize = "value"
設定できる値（Values）
resizeプロパティには、以下の値を指定できます。
| 値 | 説明 |
|---|---|
| inherit | 親要素からこのプロパティの値を継承します。 |
| initial | このプロパティの値をデフォルト値に設定します。 |
| none | 要素をリサイズ不可に設定します。 |
| horizontal | 要素の幅のみをリサイズ可能にします。 |
| vertical | 要素の高さのみをリサイズ可能にします。 |
| both | 要素の幅と高さの両方をリサイズ可能にします。 |
なお、resizeプロパティを有効に機能させるには、対象要素のCSSでoverflowプロパティがvisible以外（例：autoやhiddenなど）に設定されている必要がある点に注意してください。
サンプルコード（Example）
ここでは、HTML DOMのresizeプロパティを使用した具体的な例を紹介します。ボタンをクリックすると、div要素がユーザーによってリサイズ可能になります。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.resize-div {
border: 2px solid #fff;
margin: 2rem auto;
width: 300px;
overflow: auto;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style resize プロパティの例</h1>
<div class="resize-div">
<p>これはダミーテキストを含む段落要素です。</p>
</div>
<button onclick="add()" class="btn">Set resize</button>
<script>
function add() {
document.querySelector('div').style.resize = "both";
}
</script>
</body>
</html>実行結果（Output）
上記のコードを実行すると、次のような画面が表示されます。
「Set resize」ボタンをクリックすると、div要素に対してstyle.resize = "both"が適用され、ユーザーがマウス操作で要素の幅と高さを自由に変更できるようになります。
このように、resizeプロパティを活用すれば、テキストエリア以外の要素でもユーザーによるサイズ変更を簡単に実装できます。WebアプリケーションのUI改善や、ユーザーがコンテンツ領域を調整できるインターフェースの構築に役立ちます。
-
HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説
HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ
-
HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説
HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明