VIDEO LESSON

CSSのresizeの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 6:59動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、リサイズです。
0:05長い文章を入力するテキストエリアでは、右下の角をドラッグして、箱の高さや幅を広げた経験があるかもしれません。
0:12リサイズは、その利用者によるサイズ変更を、シーエスエス側から許可したり、
0:16止めたり、方向を絞ったりするプロパティです。
0:20自分で大きさを決める幅や高さの指定とは別に、使う人が後から変えられるかどうかを決める点が特徴です。
0:27書き方から実例、効かない条件まで、順番に見ていきましょう。
0:31まず基本の書き方です。
0:32書き方はほかのプロパティとまったく同じで、対象のセレクターに、プロパティ名、
0:36コロン、値、セミコロンを書きます。
0:40スライドの例では、クラス名デモを持つ要素に、リサイズ、バーティカルと指定しています。
0:47バーティカルは縦方向、つまり高さだけ変更を許すという意味です。
0:51これでテキストエリアの端を持って、上下に広げたり縮めたりできるようになります。
0:57まずはこの一行を書いて、実際に角をドラッグしてみる、という小さな実験から始めてください。
1:03対象をセレクターで正確に選ぶことが第一歩になります。
1:07指定できる主な値を整理します。
1:10中心は四つです。
1:11ノーンはサイズ変更をできなくする指定です。
1:15ボウスは縦と横、どちらへも変更できる指定です。
1:19ホリゾンタルは横方向だけ、バーティカルは縦方向だけを許します。
1:24文章を書くテキストエリアなら、横幅はレイアウトに合わせて固定し、高さだけをバーティカルで広げられるようにするのが、
1:31よくある現実的な選び方です。
1:37逆に、大きさが変わると周りの配置が崩れて困る小さな入力欄では、ノーンが候補になります。
1:44値の名前と方向をセットで言い分けられることが、理解の土台になります。
1:50初期値と継承を確認します。
1:52仕様上の初期値はノーン、通常の継承はしません。
1:56親に書いても子へは引き継がれないので、変えたい要素そのものへ直接指定します。
2:01ここで一つ、ややこしい点があります。
2:04仕様の初期値がノーンでも、テキストエリアはブラウザーの既定スタイルによって、
2:09最初からドラッグで広げられるように見えることが多いのです。
2:14つまり、書いていないのに変えられるからといって、初期値が違うわけではありません。
2:20汎用値も書けます。
2:22インヘリットは親の計算値、イニシャルは初期値ノーンに戻す指定、アンセットは継承しないプロパティなのでイニシャルと同じ扱いです。
2:31リサイズが効く条件で、一番大切なのがオーバーフローです。
2:35一般の要素にリサイズを書いても、オーバーフローがビジブル、つまり初期状態のままでは、
2:40サイズ変更は有効になりません。
2:44オートやスクロール、ヒドゥンなど、ビジブル以外と組み合わせて初めて効く、
2:47と覚えてください。
2:50今回のテキストエリアの実例でも、土台の指定の中にオーバーフロー、オートが入っています。
2:57リサイズだけを書いて動かないときは、値の書き間違いを疑う前に、まずこの組み合わせを確認しましょう。
3:04条件を満たして初めて、角のつまみが働き始めます。
3:08実例を見ていきます。
3:09まずエイチティーエムエルの用意です。
3:12ステージという土台の箱の中に、メモというラベルと、テキストエリアをひとつ置きます。
3:18テキストエリアには、アイディー、メモと、クラス、デモを付け、行数は四行にしています。
3:24中には、ここに文章を書いてサイズ変更を試します、という文を入れておきます。
3:30頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
3:35次のシーエスエスで土台の見た目を整えてから、最後にリサイズを指定し、角をドラッグできるかどうかを比べます。
3:43次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
3:47ステージとデモには、余白や枠線、背景色といった土台の見た目を先に整えます。
3:53デモはブロック表示で幅いっぱいに広げ、オーバーフロー、オートも指定しておきます。
3:59そして最後に、今回変更するプロパティとして、デモへリサイズ、バーティカルを追加します。
4:05これでブラウザーを開くと、テキストエリアの端を上下にドラッグして、高さを変えられるようになります。
4:12大切なのは、土台は比較のための下準備で、結果を決めているのは最後の一行とオーバーフローの組だ、
4:16という点です。
4:20値を変えて比べてみましょう。
4:22最後のリサイズの値だけを、バーティカルからノーンへ置き換えます。
4:27ファイルを保存してブラウザーを再読み込みし、もう一度テキストエリアの端をドラッグすると、
4:32今度は高さがまったく変わらなくなります。
4:37比較のコツは、変えるのはこの値ひとつだけにすることです。
4:41ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。
4:47余裕があれば、ボウスやホリゾンタルへも変えて、動く方向がどう変わるかを確かめてみてください。
4:54手を動かして初めて、値ごとの違いが体感として身に付きます。
4:58実際の使いどころと配慮を整理します。
5:01感想文や問い合わせ本文のような長文の入力欄では、バーティカルで高さを広げられる余地を残すと、
5:06書いた文章全体を見返しやすくなります。
5:11一方で、横に広がるとレイアウトが崩れる欄や、大きさが決まっている小さな部品では、
5:15ノーンで固定する選択もあり得ます。
5:19ただし注意したいのは、テキストエリアのサイズ変更を一律に禁止しないことです。
5:25文字を大きくして読む人や、長い文章を書く人にとって、広げられることはそのまま使いやすさにつながります。
5:32見た目を守る都合だけで決めず、使う人の読み書きを想像して選んでください。
5:38効かないときの確認手順です。
5:39まず開発者ツールを開きます。
5:41ネットワークでスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認してください。
5:50スタイルズで宣言に打ち消し線があれば、別の宣言に負けています。
5:54コンピューテッドで最終的な値も確認しましょう。
5:57リサイズ特有の落とし穴は、オーバーフローがビジブルのままになっていることです。
6:03一般要素ではこの条件を満たさない限り、値を正しく書いても動きません。
6:07三百二十ピクセル程度の画面幅や文字の拡大、キーボード操作でも内容を利用できるかまで確かめると、
6:11確認漏れがぐっと減ります。
6:16最後に互換性とまとめです。
6:18パソコン向けでは古くから広く対応し、クロームは一以降、エッジは七十九以降、
6:22ファイアフォックスは四以降、サファリは三以降という記録です。
6:27アンドロイド版クロームは十八以降ですが、アイオーエス版サファリは非対応で補足条件がある点には注意してください。
6:35ノーンもバーティカルも、対応するブラウザーでは同じ範囲で使えます。
6:40練習は、まずバーティカルとノーンの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。
6:47まとめます。
6:48リサイズは利用者のサイズ変更を決める指定、初期値はノーン、継承はしません。
6:54そしてオーバーフローの条件を忘れないでください。
6:57お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

resizeの役割と主な指定値を解説。textareaの端をドラッグして高さを変えられるかを確認します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのresizeの使い方：指定値・実例・効かない原因とブラウザー互換性 →