resizeプロパティ

CSS

resizeプロパティとは?

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

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


適用対象


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

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




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

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

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

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

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

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

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



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




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


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

その他

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


Twitter検索結果。「resizeプロパティ」に関する最新ツイート


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

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



週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新