WEBVTT

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

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

3
00:00:03.725 --> 00:00:06.053
今回のテーマは、ウィドスです。

4
00:00:06.053 --> 00:00:10.709
これは要素の横幅を決める、最も基本的なプロパティの一つです。

5
00:00:10.709 --> 00:00:18.469
箱をどれくらいの幅で表示するかを指定でき、指定しなければ、要素の種類や中身に合わせて幅が決まります。

6
00:00:18.469 --> 00:00:25.064
この動画では、基本の書き方、指定できる値の種類、親の幅を基準にする割合の考え方、

7
00:00:25.064 --> 00:00:31.660
そしてインライン要素やフレックスボックスで思い通りにならない理由まで、順番に見ていきます。

8
00:00:31.660 --> 00:00:37.713
高さを決めるハイトと対になるプロパティとして、イメージしながら聞いてください。

9
00:00:37.713 --> 00:00:43.766
まずは幅を変えると見た目がどう変わるのか、感覚をつかむところから始めましょう。

10
00:00:43.766 --> 00:00:50.284
幅はレイアウトの土台になるので、最初にしっかり理解しておくと後の学習が楽になります。

11
00:00:50.284 --> 00:00:51.848
まず基本の書き方です。

12
00:00:51.848 --> 00:00:58.532
セレクターを書いたら、ウィドスと書き、コロンのあとに幅の値を書き、最後にセミコロンを付けます。

13
00:00:58.532 --> 00:01:02.656
スライドの例では、幅を親の七十パーセントに指定しています。

14
00:01:02.656 --> 00:01:06.496
パーセントで書くと、親要素の幅を基準に計算されるので、画面や親の大きさが変われば、

15
00:01:06.496 --> 00:01:10.335
子の幅も一緒に変わります。

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

17
00:01:19.579 --> 00:01:24.272
まずはこの一行を書いて、箱の横幅がどう変わるか確かめてみましょう。

18
00:01:24.272 --> 00:01:26.948
次に、指定できる値を確認します。

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

20
00:01:30.628 --> 00:01:35.981
ピクセルやレムといった長さで書けば、その幅がそのまま使われます。

21
00:01:35.981 --> 00:01:40.664
パーセントなどの割合は、親要素の幅を基準に計算されます。

22
00:01:40.664 --> 00:01:45.013
たとえば七十パーセントなら、親の幅の七割になります。

23
00:01:45.013 --> 00:01:52.039
オートは、要素の内容や種類に応じて幅が自動で決まる指定で、初期状態の値でもあります。

24
00:01:52.039 --> 00:01:58.144
このほか、内容の最小幅に合わせるミンコンテンツ、最大幅に合わせるマックスコンテンツ、

25
00:01:58.144 --> 00:02:04.249
親に収まるよう調整するフィットコンテンツといった値もあります。

26
00:02:04.249 --> 00:02:08.264
まずは長さと割合とオートの三つを押さえましょう。

27
00:02:08.264 --> 00:02:13.951
値の意味を一つずつ言葉で説明できると、指定ミスにも早めに気付けます。

28
00:02:13.951 --> 00:02:18.300
慣れてきたら、内容に合わせる値も試してみてください。

29
00:02:18.300 --> 00:02:21.187
初期値と継承について整理します。

30
00:02:21.187 --> 00:02:23.894
ウィドスの初期値はオートです。

31
00:02:23.894 --> 00:02:32.916
ブロック要素なら、オートのときは親の幅いっぱいに広がることが多く、文章が入ればその中で折り返します。

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

33
00:02:37.427 --> 00:02:47.712
親に幅を付けても、子要素に自動で同じ幅が伝わるわけではないので、幅を決めたい要素そのものに指定する必要があります。

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

35
00:02:53.215 --> 00:02:58.718
普段は長さや割合を直接書くことがほとんどです。

36
00:02:58.718 --> 00:03:04.312
この決まりを知ると、親と子で幅がそろわない理由も説明できます。

37
00:03:04.312 --> 00:03:07.974
割合で指定するときの考え方を押さえます。

38
00:03:07.974 --> 00:03:12.552
ウィドスのパーセントは、常に親要素の幅が基準です。

39
00:03:12.552 --> 00:03:18.046
親が広い画面では子も広く、親が狭い画面では子も狭くなります。

40
00:03:18.046 --> 00:03:26.836
そのため、スマートフォンとパソコンで画面幅が大きく変わるページでも、はみ出しにくいのが利点です。

41
00:03:26.836 --> 00:03:32.146
ただし、親自体の幅がどう決まっているかで結果が変わります。

42
00:03:32.146 --> 00:03:40.386
親が画面いっぱいに広がる要素なのか、最大幅で抑えられているのかを合わせて確認してください。

43
00:03:40.386 --> 00:03:48.627
迷ったら、まず親の幅を開発者ツールで数値として確認してみると、計算の仕組みが見えてきます。

44
00:03:48.627 --> 00:03:56.684
割合と長さを比べると、基準が親なのか文字サイズなのかで結果が大きく違うことが分かります。

45
00:03:56.684 --> 00:04:02.134
記事の比較ポイントである、七十パーセントと十二レムの違いを比べます。

46
00:04:02.134 --> 00:04:09.507
七十パーセントは親幅に比例するので、親が広がれば箱も広がり、親が狭くなれば箱も狭くなります。

47
00:04:09.507 --> 00:04:13.514
レイアウト全体の中で割合を保ちたいときに便利です。

48
00:04:13.514 --> 00:04:21.368
一方、十二レムは文字サイズを基準にした長さなので、親の幅が変わっても、基本的には同じ幅を保ちます。

49
00:04:21.368 --> 00:04:26.177
ボタンや入力欄のように、大きさを保ちたい部品に向いています。

50
00:04:26.177 --> 00:04:34.512
ただし、狭い画面では固定幅が親を超えてはみ出すこともあるので、最大幅と組み合わせるなどの工夫も大切です。

51
00:04:34.512 --> 00:04:36.299
ここからは記事の実例です。

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

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

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

55
00:04:54.439 --> 00:04:58.836
親と子の入れ子構造が、そのまま後のシーエスエスの対象になります。

56
00:04:58.836 --> 00:05:03.234
比べたいのは幅だけなので、文章などの土台は固定したままにします。

57
00:05:03.234 --> 00:05:06.532
構造をシーエスエスと対応させて見ておきましょう。

58
00:05:06.532 --> 00:05:08.555
土台のシーエスエスです。

59
00:05:08.555 --> 00:05:13.107
ステージは最大幅を三十レムにし、デモの箱には濃い緑の枠線と薄い緑の背景を用意して、

60
00:05:13.107 --> 00:05:17.659
違いが見えるようにします。

61
00:05:17.659 --> 00:05:24.234
最後の行でウィドスを七十パーセントにすると、箱は親の幅の七割の広さになります。

62
00:05:24.234 --> 00:05:28.618
親の幅を変えると、それに合わせて箱も伸び縮みします。

63
00:05:28.618 --> 00:05:37.385
次に最後の行だけを十二レムへ置き換えると、幅は文字サイズ基準で保たれ、親を広げても箱の幅は変わりません。

64
00:05:37.385 --> 00:05:40.756
この一行の違いが実例の比較ポイントです。

65
00:05:40.756 --> 00:05:45.477
保存して再読み込みし、箱の横の大きさに注目してください。

66
00:05:45.477 --> 00:05:51.884
ブラウザーで実際の幅を見比べると、言葉だけの説明よりずっと理解が深まります。

67
00:05:51.884 --> 00:05:55.424
親の幅も一緒に変えて試すのがおすすめです。

68
00:05:55.424 --> 00:05:57.732
活用場面を考えてみましょう。

69
00:05:57.732 --> 00:06:04.656
本文の箱では、幅を広げ過ぎると一行が長くなって読みにくくなるので、ウィドスに最大幅であるマックスウィドスを組み合わせて、

70
00:06:04.656 --> 00:06:11.579
読みやすい行の長さに抑える使い方がよくあります。

71
00:06:11.579 --> 00:06:16.855
画像やカードでは、幅をそろえることでレイアウトが整って見えます。

72
00:06:16.855 --> 00:06:22.789
フォームの入力欄では、入力内容に合った幅を指定すると使いやすくなります。

73
00:06:22.789 --> 00:06:29.218
逆に、幅を細かく固定し過ぎると、画面サイズが変わったときに崩れやすくなります。

74
00:06:29.218 --> 00:06:34.164
割合と最大幅を組み合わせる考え方が、実務では特に役立ちます。

75
00:06:34.164 --> 00:06:36.686
効かないと感じたときの注意点です。

76
00:06:36.686 --> 00:06:41.285
まず、通常のインライン要素には、ウィドスが想定通り効きません。

77
00:06:41.285 --> 00:06:47.515
幅を指定したい場合は、表示方式をブロックやインラインブロックに変える必要があります。

78
00:06:47.515 --> 00:06:56.416
次に、フレックスボックスの中では、縮小の計算やミンウィドスの影響で、ウィドスだけで最終的な幅が決まらない場合があります。

79
00:06:56.416 --> 00:06:59.532
そのうえで、開発者ツールで順番に調べます。

80
00:06:59.532 --> 00:07:04.576
ネットワークでスタイルシートの取得、エレメンツでクラスの一致、スタイルズで上書きの有無、

81
00:07:04.576 --> 00:07:09.619
コンピューテッドで最終的な値を確認してください。

82
00:07:09.619 --> 00:07:16.740
最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容がはみ出さずに読めるかを試しましょう。

83
00:07:16.740 --> 00:07:21.784
一つずつ順番に確認すれば、原因はほとんどの場合どこかに見つかります。

84
00:07:21.784 --> 00:07:23.757
最後に互換性とまとめです。

85
00:07:23.757 --> 00:07:30.435
記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、

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

87
00:07:37.113 --> 00:07:38.023
まとめます。

88
00:07:38.023 --> 00:07:45.460
ウィドスは要素の横幅で、初期値はオート、継承はせず、割合は親の幅を基準に計算されるのが特徴でした。

89
00:07:45.460 --> 00:07:53.504
練習として、七十パーセントと十二レムの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。

90
00:07:53.504 --> 00:07:59.878
関連するボックスサイジングやマックスウィドスも学ぶと、幅の制御がより正確になります。

91
00:07:59.878 --> 00:08:01.244
お疲れさまでした。