cssプロパティresizeについての説明

こんにちは tanaka です。

今回は、
cssプロパティ
resize の説明です。

resizeは、
作り手ではなく、
画面を見ている人が

ボックスモデルの大きさを変える事ができる
プロパティです。

contentの右下に
小さなつまみが出て、
そこで操作できます。
(paddingがあれば、contentではなくpaddingに出てくる)

画像blog-resize01

display: inlineでは使えません。
(高さを変える事ができないため)

overflowがvisibleの時は使えません。
(文章が下へはみ出た時の設定が必要)

値は4つあります。
 1:none   = 大きさを変えることはできない(デフォルト)
 2:horizontal = ヨコ方向だけ変えられる
 3:vertical  = タテ方向だけ変えられる
 4:both   = ヨコも、タテも両方変えられる

それでは
詳しく見て行きましょう。

overflow: hidden;

resize: none;
resize: horizontal;
resize: vertical;
resize: both;

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

cssプロパティresizeの説明

resizeとは

resizeは、
作り手ではなく、
画面を見ている人が

ボックスモデルの大きさを変える事ができる
プロパティです。

contentの右下に
小さなつまみが出て
(paddingがあれば、contentではなくpaddingに出てくる)

見ている人が、
そこを操作することにより
ボックスモデルの大きさを変える事ができます。

画像blog-resize01

inlineでは使えず、overflowの設定も必要

resizeは、
display: inlineの時は使えません。
(高さを変える事ができないため)
inline-block、blockにする必要があります。

resizeは、
overflowがvisibleの時は使えません。
(文章が下へはみ出た時の設定が必要)

値は4つ

値は4つあります。
 1:none   = 大きさを変えることはできない(デフォルト)
 2:horizontal = ヨコ方向だけ変えられる
 3:vertical  = タテ方向だけ変えられる
 4:both   = ヨコも、タテも両方変えられる

1:none = 大きさを変えることはできない(デフォルト)

noneは、
ボックスモデルの大きさを変える事ができません。

デフォルトではこの状態です。

画像blog-resize02
2:horizontal = ヨコ方向だけ変えられる

horizontalは、
ヨコ方向だけ
ボックスモデルを変える事ができます。

画像blog-resize03
3:vertical = タテ方向だけ変えられる

verticalは、
タテ方向だけ
ボックスモデルを変える事ができます。

画像blog-resize04
4:both = ヨコも、タテも両方変えられる

bothは、
ヨコ方向も、タテ方向も
ボックスモデルを変える事ができます。

画像blog-resize05

まとめ

resizeとは

resizeは、
画面を見ている人が

ボックスモデルの大きさを変える事ができる
プロパティ。

つまみで操作

contentの右下に
小さなつまみが出て、
そこで操作できる。
(paddingがあれば、contentではなくpaddingに出てくる)

画像blog-resize01
inlineでは使えない

display: inlineでは使えない。
(高さを変える事ができないため)

overflow:visible では使えない

overflowがvisibleの時は使えない。
(文章が下へはみ出た時の設定が必要)

値は4つ

値は4つ。
 1:none   = 大きさを変えることはできない(デフォルト)
 2:horizontal = ヨコ方向だけ変えられる
 3:vertical  = タテ方向だけ変えられる
 4:both   = ヨコも、タテも両方変えられる

overflow: hidden;

resize: none;
resize: horizontal;
resize: vertical;
resize: both;

以上、
resize
の話でした。

ありがとうございました。

タイトルとURLをコピーしました