WEBVTT

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

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

3
00:00:03.830 --> 00:00:06.542
今回のテーマは、ミンウィドスです。

4
00:00:06.542 --> 00:00:13.404
これは、要素の幅の下限、つまりこれより細くならないという最小幅を決めるプロパティです。

5
00:00:13.404 --> 00:00:23.298
画面を狭くしたり、親要素が小さくなったりしても、箱がある幅を保つので、中の文字やボタンがつぶれて読めなくなる事態を防げます。

6
00:00:23.298 --> 00:00:29.282
この動画では、基本の書き方、指定できる値、ウィドスやマックスウィドスとの違い、

7
00:00:29.282 --> 00:00:35.266
そしてフレックスボックスで重要になるゼロの使い方まで順番に見ていきます。

8
00:00:35.266 --> 00:00:41.808
幅の上限を決めるマックスウィドスの、反対の役割と考えるとイメージしやすくなります。

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

10
00:00:43.361 --> 00:00:46.890
セレクターを書いたら、ミンウィドスと書き、コロンのあとに下限の値を書き、

11
00:00:46.890 --> 00:00:50.418
最後にセミコロンを付けます。

12
00:00:50.418 --> 00:00:53.947
スライドの例では、下限を十六レムに指定しています。

13
00:00:53.947 --> 00:00:58.041
レムは文字サイズを基準にした単位なので、文字を大きくする設定でも下限が一緒に広がり、

14
00:00:58.041 --> 00:01:02.134
読みやすさを保ちやすくなります。

15
00:01:02.134 --> 00:01:11.309
エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。

16
00:01:11.309 --> 00:01:18.508
まずはこの一行をそのまま書いて、ブラウザーの幅を狭くしたときに箱がどこで止まるかを確かめてみましょう。

17
00:01:18.508 --> 00:01:21.387
次に、指定できる値を確認します。

18
00:01:21.387 --> 00:01:25.347
代表的なのは、長さ、割合、そしてオートです。

19
00:01:25.347 --> 00:01:31.466
ピクセルやレムといった長さで書けば、その幅がそのまま下限になります。

20
00:01:31.466 --> 00:01:39.924
パーセントなどの割合も書けますが、この場合は親要素の幅を基準に計算される点に注意してください。

21
00:01:39.924 --> 00:01:45.143
たとえば五十パーセントなら、親の半分より細くはなりません。

22
00:01:45.143 --> 00:01:51.622
オートは、要素の種類や内容に応じて下限が決まる指定で、初期状態の値です。

23
00:01:51.622 --> 00:01:58.281
そしてゼロは、下限をなくす特別な値として、後のセクションで大切になります。

24
00:01:58.281 --> 00:02:03.320
まずはレムやピクセルで分かりやすく試すのがおすすめです。

25
00:02:03.320 --> 00:02:05.948
初期値と継承について整理します。

26
00:02:05.948 --> 00:02:08.740
ミンウィドスの初期値はオートです。

27
00:02:08.740 --> 00:02:15.310
オートのとき、通常の要素では下限は実質ゼロのように振る舞いますが、フレックスボックスやグリッドの子要素では、

28
00:02:15.310 --> 00:02:21.879
内容に合わせた自動の最小サイズが働くことがあります。

29
00:02:21.879 --> 00:02:25.985
そして、このプロパティは親から通常は継承しません。

30
00:02:25.985 --> 00:02:34.526
親に下限を付けても、子要素に自動で伝わるわけではないので、保ちたい要素そのものに指定する必要があります。

31
00:02:34.526 --> 00:02:39.289
また、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、

32
00:02:39.289 --> 00:02:44.052
普段は長さを直接書くことがほとんどです。

33
00:02:44.052 --> 00:02:47.299
似たプロパティとの違いを整理しましょう。

34
00:02:47.299 --> 00:02:53.061
ウィドスは幅そのものを指定するもの、ミンウィドスはこれより細くならないという下限、

35
00:02:53.061 --> 00:02:58.824
そしてマックスウィドスはこれより広くならないという上限です。

36
00:02:58.824 --> 00:03:04.505
もしウィドスで決めた幅が下限より小さい場合は、下限の方が優先されます。

37
00:03:04.505 --> 00:03:12.297
下限と上限を両方使えば、その範囲の中でだけ幅が変化する、柔軟で崩れにくい箱を作ることもできます。

38
00:03:12.297 --> 00:03:19.927
たとえば本文の箱に下限と上限を両方付けると、極端に細くも広くもならない読みやすい幅を保てます。

39
00:03:19.927 --> 00:03:24.472
役割を分けて考えると、指定の意図が伝わりやすくなります。

40
00:03:24.472 --> 00:03:29.528
ミンウィドスで特に大切なのが、フレックスボックスやグリッドとの関係です。

41
00:03:29.528 --> 00:03:37.534
この二つのレイアウトでは、子要素が自動の最小サイズを持つため、親が狭くなっても内容の幅より縮まないことがあります。

42
00:03:37.534 --> 00:03:41.466
結果として、長い文章や長い単語がはみ出してしまうのです。

43
00:03:41.466 --> 00:03:48.488
そんなときにミンウィドス、ゼロを指定すると、その制約を外して、要素を小さく縮められるようになります。

44
00:03:48.488 --> 00:03:51.017
記事でも強調されているポイントです。

45
00:03:51.017 --> 00:03:58.320
ただし、ゼロにしただけでは中身がはみ出す場合もあるので、文章の折り返しの設定もあわせて確認してください。

46
00:03:58.320 --> 00:04:01.831
困ったときの定番の対処法として覚えておきましょう。

47
00:04:01.831 --> 00:04:03.718
ここからは記事の実例です。

48
00:04:03.718 --> 00:04:10.105
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を置きます。

49
00:04:10.105 --> 00:04:17.798
その中には、ハロー、シーエスエスから始まる文章を入れ、文章を増やして折り返しも確認できるようにしています。

50
00:04:17.798 --> 00:04:22.879
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

51
00:04:22.879 --> 00:04:29.411
今回の親はわざと狭く設定されているので、子の下限が効くとどう見えるかがはっきり分かります。

52
00:04:29.411 --> 00:04:34.347
親と子の入れ子構造を、後のシーエスエスと対応させて見ておきましょう。

53
00:04:34.347 --> 00:04:38.411
比べたいのは下限だけなので、文章などの土台は固定します。

54
00:04:38.411 --> 00:04:40.035
土台のシーエスエスです。

55
00:04:40.035 --> 00:04:45.178
ステージは最大幅を十四レムに絞り、あふれた分はスクロールできるようにします。

56
00:04:45.178 --> 00:04:50.051
デモの箱には濃い緑の枠線と薄い緑の背景を用意し、幅は親いっぱいにします。

57
00:04:50.051 --> 00:04:54.382
最後の行でミンウィドスを十六レムにすると、親より広い下限が優先され、箱は十六レムを保ったまま、

58
00:04:54.382 --> 00:04:58.713
親側がスクロールする形になります。

59
00:04:58.713 --> 00:05:04.533
次に最後の行だけをゼロへ置き換えると、下限がなくなり、箱は親の狭さに合わせて縮みます。

60
00:05:04.533 --> 00:05:07.240
この一行の違いが実例の比較ポイントです。

61
00:05:07.240 --> 00:05:12.519
保存して再読み込みし、箱の幅とスクロールの有無がどう変わるか注目してください。

62
00:05:12.519 --> 00:05:14.651
活用場面を考えてみましょう。

63
00:05:14.651 --> 00:05:23.029
ボタンに下限を付けると、文字が短いボタンでも一定の幅が保たれ、並べたときに大きさがそろって押しやすくなります。

64
00:05:23.029 --> 00:05:28.665
カードや入力欄でも、画面が狭くなったときに極端に細くつぶれるのを防げます。

65
00:05:28.665 --> 00:05:32.930
一方で、下限を大きくし過ぎると、スマートフォンのような狭い画面では箱がはみ出して、

66
00:05:32.930 --> 00:05:37.195
横スクロールの原因になります。

67
00:05:37.195 --> 00:05:42.983
ですから、実際の文章や部品を入れて、画面幅を変えながら調整するのが大切です。

68
00:05:42.983 --> 00:05:48.619
迷ったときは、まず控えめな下限から始めて、少しずつ広げていくのが安全です。

69
00:05:48.619 --> 00:05:52.688
効かないと感じたときは、開発者ツールで順番に調べます。

70
00:05:52.688 --> 00:05:58.114
まずネットワークで、スタイルシートが正常に取得されているかを確認します。

71
00:05:58.114 --> 00:06:04.293
次にエレメンツで、対象のクラスとシーエスエスのセレクターが一致しているかを見ます。

72
00:06:04.293 --> 00:06:09.040
続いてスタイルズで、宣言が無効になっていないか、別の宣言に上書きされていないかを確認し、

73
00:06:09.040 --> 00:06:13.788
コンピューテッドで最終的な値を見ます。

74
00:06:13.788 --> 00:06:21.173
思ったより縮まない場合は、フレックスやグリッドの自動最小サイズが関係していないかも疑ってください。

75
00:06:21.173 --> 00:06:27.352
最後に、三百二十ピクセル程度の画面幅や文字の拡大でも内容が読めるかを試しましょう。

76
00:06:27.352 --> 00:06:29.191
最後に互換性とまとめです。

77
00:06:29.191 --> 00:06:35.414
記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、

78
00:06:35.414 --> 00:06:41.637
ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。

79
00:06:41.637 --> 00:06:42.486
まとめます。

80
00:06:42.486 --> 00:06:51.396
ミンウィドスは幅の下限で、初期値はオート、継承はせず、そしてフレックスやグリッドではゼロが縮めるための鍵になるのが特徴でした。

81
00:06:51.396 --> 00:06:58.185
練習として、十六レムとゼロの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。

82
00:06:58.185 --> 00:07:04.267
関連するマックスウィドスやウィドスも学ぶと、サイズの制御が一通りできるようになります。

83
00:07:04.267 --> 00:07:05.540
お疲れさまでした。