resizeプロパティ

CSS

resizeプロパティとは?

 状態:-  閲覧数:2,420  投稿日:2017-07-11  更新日:2017-07-11
ユーザーが「ドラッグすることで要素サイズを変更できるかどうか」を指定

リサイズするには?
・右下ある斜め棒2本(リサイズ領域)をドラッグする


適用対象


下記要件を満たす任意の要素
・textareaである必要はない

要件
・overflowプロティのvisible以外の値が指定された要素
=overflowがvisibleと指定されていない要素
※visibleは初期値なので、違う値を設定




none
・リサイズ機能を無効
・ユーザーに要素のリサイズ機能を提供しない(初期値)

both
・水平垂直(全)方向にリサイズ可能
・ユーザーに要素の幅と高さのリサイズ機能を提供する

horizontal
・水平方向のみリサイズ可能
・ユーザーに要素の幅のリサイズ機能を提供する

vertical
・垂直方向のみリサイズ可能
・ユーザーに要素の高さのリサイズ機能を提供する

inherit
・親要素の値を継承する

可変する子要素の幅や高さに合わせ、親要素を連動させるためには?

 閲覧数:604 投稿日:2017-07-11 更新日:2017-07-11
可変する子要素
・textareaなど



可変する子要素の幅や高さに合わせ、親要素を連動させるためには?




親要素に、下記何れかを指定
display: table;
display: table-cell;


可変するtextareaの幅に合わせて広がる親div

その他

 閲覧数:587 投稿日:2017-07-11 更新日:2017-07-11
リサイズ領域のデザインは変更可能
CSS resizeプロパティで要素をリサイズ可能にする。



ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」

hrタグにはwidth指定可能。点線にして左端に寄せる



週間人気ページランキング / 4-29 → 5-5
順位 ページタイトル抜粋 アクセス数
1 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 11
2 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 9
3 RGBの種類 / ビットカラー | RGB(色) 6
4 RGB ⇔ Lab | 色変換(色) 4
4 画像縦横比の問題 | 画像 4
4 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
4 ログイン 4
5 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
5 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 3
5 Adobe Camera Raw 4.0 | Photoshop 3
5 Material Design 2014 年 | Material Design(色) 3
5 Design 0 3
6 RGB | 色 2
6 問題発生 / 方法は2種類 / CSS対応時の注意点 2
6 謎の現象 / 「Photoshop CS」と「Photoshop CCでは」では扱いが異なる /「PhotoShop CS3」で「Camera Raw 4.0」を起動するには? 2
6 SVG(画像) カテゴリー 2
6 #0000CDは群青色ではない? | 色 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 ICCプロファイル | カラーマネージメント(色) 2
6 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい | Brave(ブラウザ) 2
2026/5/6 5:06 更新