WEBVTT

1
00:00:00.000 --> 00:00:00.816
こんにちは。

2
00:00:00.816 --> 00:00:03.263
シーエスエス、リファレンス解説です。

3
00:00:03.263 --> 00:00:05.302
今回のテーマは、リサイズです。

4
00:00:05.302 --> 00:00:12.643
長い文章を入力するテキストエリアでは、右下の角をドラッグして、箱の高さや幅を広げた経験があるかもしれません。

5
00:00:12.643 --> 00:00:16.586
リサイズは、その利用者によるサイズ変更を、シーエスエス側から許可したり、

6
00:00:16.586 --> 00:00:20.528
止めたり、方向を絞ったりするプロパティです。

7
00:00:20.528 --> 00:00:27.190
自分で大きさを決める幅や高さの指定とは別に、使う人が後から変えられるかどうかを決める点が特徴です。

8
00:00:27.190 --> 00:00:31.132
書き方から実例、効かない条件まで、順番に見ていきましょう。

9
00:00:31.132 --> 00:00:32.751
まず基本の書き方です。

10
00:00:32.751 --> 00:00:36.800
書き方はほかのプロパティとまったく同じで、対象のセレクターに、プロパティ名、

11
00:00:36.800 --> 00:00:40.848
コロン、値、セミコロンを書きます。

12
00:00:40.848 --> 00:00:47.031
スライドの例では、クラス名デモを持つ要素に、リサイズ、バーティカルと指定しています。

13
00:00:47.031 --> 00:00:51.594
バーティカルは縦方向、つまり高さだけ変更を許すという意味です。

14
00:00:51.594 --> 00:00:57.335
これでテキストエリアの端を持って、上下に広げたり縮めたりできるようになります。

15
00:00:57.335 --> 00:01:03.813
まずはこの一行を書いて、実際に角をドラッグしてみる、という小さな実験から始めてください。

16
00:01:03.813 --> 00:01:07.640
対象をセレクターで正確に選ぶことが第一歩になります。

17
00:01:07.640 --> 00:01:10.266
指定できる主な値を整理します。

18
00:01:10.266 --> 00:01:11.666
中心は四つです。

19
00:01:11.666 --> 00:01:15.342
ノーンはサイズ変更をできなくする指定です。

20
00:01:15.342 --> 00:01:19.368
ボウスは縦と横、どちらへも変更できる指定です。

21
00:01:19.368 --> 00:01:24.794
ホリゾンタルは横方向だけ、バーティカルは縦方向だけを許します。

22
00:01:24.794 --> 00:01:31.008
文章を書くテキストエリアなら、横幅はレイアウトに合わせて固定し、高さだけをバーティカルで広げられるようにするのが、

23
00:01:31.008 --> 00:01:37.222
よくある現実的な選び方です。

24
00:01:37.222 --> 00:01:44.749
逆に、大きさが変わると周りの配置が崩れて困る小さな入力欄では、ノーンが候補になります。

25
00:01:44.749 --> 00:01:50.700
値の名前と方向をセットで言い分けられることが、理解の土台になります。

26
00:01:50.700 --> 00:01:52.664
初期値と継承を確認します。

27
00:01:52.664 --> 00:01:56.140
仕様上の初期値はノーン、通常の継承はしません。

28
00:01:56.140 --> 00:02:01.881
親に書いても子へは引き継がれないので、変えたい要素そのものへ直接指定します。

29
00:02:01.881 --> 00:02:04.601
ここで一つ、ややこしい点があります。

30
00:02:04.601 --> 00:02:09.663
仕様の初期値がノーンでも、テキストエリアはブラウザーの既定スタイルによって、

31
00:02:09.663 --> 00:02:14.725
最初からドラッグで広げられるように見えることが多いのです。

32
00:02:14.725 --> 00:02:20.769
つまり、書いていないのに変えられるからといって、初期値が違うわけではありません。

33
00:02:20.769 --> 00:02:22.129
汎用値も書けます。

34
00:02:22.129 --> 00:02:31.648
インヘリットは親の計算値、イニシャルは初期値ノーンに戻す指定、アンセットは継承しないプロパティなのでイニシャルと同じ扱いです。

35
00:02:31.648 --> 00:02:35.792
リサイズが効く条件で、一番大切なのがオーバーフローです。

36
00:02:35.792 --> 00:02:40.011
一般の要素にリサイズを書いても、オーバーフローがビジブル、つまり初期状態のままでは、

37
00:02:40.011 --> 00:02:44.229
サイズ変更は有効になりません。

38
00:02:44.229 --> 00:02:47.560
オートやスクロール、ヒドゥンなど、ビジブル以外と組み合わせて初めて効く、

39
00:02:47.560 --> 00:02:50.890
と覚えてください。

40
00:02:50.890 --> 00:02:57.255
今回のテキストエリアの実例でも、土台の指定の中にオーバーフロー、オートが入っています。

41
00:02:57.255 --> 00:03:04.508
リサイズだけを書いて動かないときは、値の書き間違いを疑う前に、まずこの組み合わせを確認しましょう。

42
00:03:04.508 --> 00:03:08.060
条件を満たして初めて、角のつまみが働き始めます。

43
00:03:08.060 --> 00:03:09.554
実例を見ていきます。

44
00:03:09.554 --> 00:03:12.243
まずエイチティーエムエルの用意です。

45
00:03:12.243 --> 00:03:18.369
ステージという土台の箱の中に、メモというラベルと、テキストエリアをひとつ置きます。

46
00:03:18.369 --> 00:03:24.644
テキストエリアには、アイディー、メモと、クラス、デモを付け、行数は四行にしています。

47
00:03:24.644 --> 00:03:30.172
中には、ここに文章を書いてサイズ変更を試します、という文を入れておきます。

48
00:03:30.172 --> 00:03:35.401
頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。

49
00:03:35.401 --> 00:03:43.320
次のシーエスエスで土台の見た目を整えてから、最後にリサイズを指定し、角をドラッグできるかどうかを比べます。

50
00:03:43.320 --> 00:03:47.867
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

51
00:03:47.867 --> 00:03:53.293
ステージとデモには、余白や枠線、背景色といった土台の見た目を先に整えます。

52
00:03:53.293 --> 00:03:59.159
デモはブロック表示で幅いっぱいに広げ、オーバーフロー、オートも指定しておきます。

53
00:03:59.159 --> 00:04:05.466
そして最後に、今回変更するプロパティとして、デモへリサイズ、バーティカルを追加します。

54
00:04:05.466 --> 00:04:12.652
これでブラウザーを開くと、テキストエリアの端を上下にドラッグして、高さを変えられるようになります。

55
00:04:12.652 --> 00:04:16.612
大切なのは、土台は比較のための下準備で、結果を決めているのは最後の一行とオーバーフローの組だ、

56
00:04:16.612 --> 00:04:20.572
という点です。

57
00:04:20.572 --> 00:04:22.743
値を変えて比べてみましょう。

58
00:04:22.743 --> 00:04:27.704
最後のリサイズの値だけを、バーティカルからノーンへ置き換えます。

59
00:04:27.704 --> 00:04:32.665
ファイルを保存してブラウザーを再読み込みし、もう一度テキストエリアの端をドラッグすると、

60
00:04:32.665 --> 00:04:37.626
今度は高さがまったく変わらなくなります。

61
00:04:37.626 --> 00:04:41.968
比較のコツは、変えるのはこの値ひとつだけにすることです。

62
00:04:41.968 --> 00:04:47.084
ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。

63
00:04:47.084 --> 00:04:54.216
余裕があれば、ボウスやホリゾンタルへも変えて、動く方向がどう変わるかを確かめてみてください。

64
00:04:54.216 --> 00:04:58.712
手を動かして初めて、値ごとの違いが体感として身に付きます。

65
00:04:58.712 --> 00:05:01.384
実際の使いどころと配慮を整理します。

66
00:05:01.384 --> 00:05:06.209
感想文や問い合わせ本文のような長文の入力欄では、バーティカルで高さを広げられる余地を残すと、

67
00:05:06.209 --> 00:05:11.034
書いた文章全体を見返しやすくなります。

68
00:05:11.034 --> 00:05:15.264
一方で、横に広がるとレイアウトが崩れる欄や、大きさが決まっている小さな部品では、

69
00:05:15.264 --> 00:05:19.495
ノーンで固定する選択もあり得ます。

70
00:05:19.495 --> 00:05:25.137
ただし注意したいのは、テキストエリアのサイズ変更を一律に禁止しないことです。

71
00:05:25.137 --> 00:05:32.708
文字を大きくして読む人や、長い文章を書く人にとって、広げられることはそのまま使いやすさにつながります。

72
00:05:32.708 --> 00:05:38.052
見た目を守る都合だけで決めず、使う人の読み書きを想像して選んでください。

73
00:05:38.052 --> 00:05:39.990
効かないときの確認手順です。

74
00:05:39.990 --> 00:05:41.928
まず開発者ツールを開きます。

75
00:05:41.928 --> 00:05:50.234
ネットワークでスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認してください。

76
00:05:50.234 --> 00:05:54.525
スタイルズで宣言に打ち消し線があれば、別の宣言に負けています。

77
00:05:54.525 --> 00:05:57.709
コンピューテッドで最終的な値も確認しましょう。

78
00:05:57.709 --> 00:06:03.108
リサイズ特有の落とし穴は、オーバーフローがビジブルのままになっていることです。

79
00:06:03.108 --> 00:06:07.814
一般要素ではこの条件を満たさない限り、値を正しく書いても動きません。

80
00:06:07.814 --> 00:06:11.967
三百二十ピクセル程度の画面幅や文字の拡大、キーボード操作でも内容を利用できるかまで確かめると、

81
00:06:11.967 --> 00:06:16.120
確認漏れがぐっと減ります。

82
00:06:16.120 --> 00:06:18.011
最後に互換性とまとめです。

83
00:06:18.011 --> 00:06:22.885
パソコン向けでは古くから広く対応し、クロームは一以降、エッジは七十九以降、

84
00:06:22.885 --> 00:06:27.759
ファイアフォックスは四以降、サファリは三以降という記録です。

85
00:06:27.759 --> 00:06:35.760
アンドロイド版クロームは十八以降ですが、アイオーエス版サファリは非対応で補足条件がある点には注意してください。

86
00:06:35.760 --> 00:06:40.561
ノーンもバーティカルも、対応するブラウザーでは同じ範囲で使えます。

87
00:06:40.561 --> 00:06:47.835
練習は、まずバーティカルとノーンの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。

88
00:06:47.835 --> 00:06:48.708
まとめます。

89
00:06:48.708 --> 00:06:54.091
リサイズは利用者のサイズ変更を決める指定、初期値はノーン、継承はしません。

90
00:06:54.091 --> 00:06:57.583
そしてオーバーフローの条件を忘れないでください。

91
00:06:57.583 --> 00:06:58.892
お疲れさまでした。