Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

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

最終更新日:2020年04月04日  (初回投稿日:2020年04月04日)

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

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

本日のINDEX
  1. resizeプロパティの値
  2. resizeプロパティの指定サンプル
    1. <textarea>要素で試してみた
    2. <iframe>要素で試してみた
    3. <div>要素、<p>要素で試してみた

参考:
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>要素で試してみた

<iframe>要素に「resize: both」を指定してみました。

<iframe>要素は Chrome、Opera、Safari(PC)はリサイズ可能でした。
Firefox はだめでした。(Can I Use だと対応してるはずなのですが。2020年4月記)

サンプルの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プロパティを使ってみます。

この記事をはてなブックマークに追加

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

関連記事

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2020/04 | 05
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.