ほんっとにはじめてのHTML5とCSS3：【55】ボックスのリサイズを可能にする resizeプロパティ

【55】ボックスのリサイズを可能にする resizeプロパティ

最終更新日：2020年04月04日　（初回投稿日：2020年04月04日）

resizeプロパティは、ユーザーが要素のサイズ変更をできるかどうか指定できます。
リサイズ可能にするなら、x軸方向だけか、y軸方向か、どっちとも変更可能かも指定できます。

ただ、resizeプロパティは、IE が未対応。
モバイルは iOS Safari が未対応です。（参考：Can I use　2020年4月記）

本日のINDEX

参考：
・CSS Basic User Interface Module Level 3 (CSS3 UI) | W3C Recommendation
・resize - CSS | MDN

resizeプロパティの値

resizeプロパティの値は以下のものがあります。

resizeプロパティの値
キーワード	noneがデフォルト値。 both、horizontal、vertical
グローバル値	resize: inherit; 親の値を継承 resize: initial; 継承した親の値を解消しデフォルト値に戻す resize: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	overflowプロパティの値が「visible」以外の要素。オプションで、画像や動画を表す置換要素または iframe要素

resizeプロパティはインライン要素に適用できません。
また、overflow: visible なブロック要素もダメ。

overflowプロパティについては、
【20】overflowで、あふれた中身の表示方法を指定しよう
置換要素については、
【9】HTML要素のインラインレベル・ブロックレベルについて
iframe要素については、
[63] インラインフレームで他のHTMLファイルを組み込もう iframe要素
をご覧ください。

resizeプロパティの値のそれぞれのキーワードは、以下の意味があります。

none: ユーザーは要素のサイズをリサイズできません。
これがデフォルト値。
注意：<textarea>要素はブラウザデフォルトで「resize: both」です。これをリサイズ不可にするときは none を使います。
both: ユーザーは垂直・水平方向の両方向にリサイズできます。
horizontal: ユーザーは水平方向にリサイズできます。
vertical: ユーザーは垂直方向にリサイズできます。

resizeプロパティの指定サンプル

resizeプロパティの値を使ってみます。

<textarea>要素で試してみた

resizeプロパティは、overflowプロパティの値が「visible」以外の要素に使えるんでしたね。
<textarea>要素はブラウザのデフォルトスタイルで overflow: auto になっていますので、これで試してみます。

<textarea>要素については、[53] 文章 (複数行のテキスト) を入力してもらおう　textarea要素をご覧ください。

<textarea>要素は、もともとブラウザのデフォルトスタイルで「resize:both」なので、わざわざ指定しなくても、ユーザーは両方向にリサイズできるようになっています。
リサイズの方向を制限したいときに both 以外の値を使う感じですかね。

サンプルのHTMLはこちら。
resizeプロパティは style属性でインラインで指定しています。

<textarea style="resize:both" placeholder="both（両方向にリサイズ）"></textarea>
<textarea style="resize:horizontal" placeholder="horizontal（水平方向にリサイズ）"></textarea>
<textarea style="resize:vertical" placeholder="vertical（垂直方向にリサイズ）"></textarea>
<textarea style="resize:none" placeholder="none（リサイズ不可）"></textarea>

<iframe>要素で試してみた

サンプルのHTMLと CSSはこちら。

<iframe src="http://honttoni.blog74.fc2.com/blog-entry-211.html" class="sample2"></iframe>

<style>
.sample2 {
	resize:both;
	overflow:auto;
    display:block;
	margin:2em 0;
	border: 1px solid #ccc;
	}
</style>

<div>要素、<p>要素で試してみた

<div>要素の中に <p>要素を入れて、両方とも「resize: both」を指定してみました。

p要素と、その親要素の div要素に resize: both を指定しています。垂直・水平両方向にリサイズできます。

サンプルのHTMLと CSSはこちら。
<div>要素と <p>要素の初期サイズは、style属性でインラインで指定しています。

<div class="resizable" style="width:80%; height:280px">
  <p class="resizable" style="width:50%; height:150px">
    p要素と、その親要素の div要素に resize: both を指定しています。
    垂直・水平両方向にリサイズできます。
  </p>
</div>

<style>
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid #ccc;
  padding:1em;
}
</style>

次回予告

次回は、要素内のテキストを選択できなくしたり、ワンクリックで全部選択できたりさせる user-selectプロパティを使ってみます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。