WEBVTT

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

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

3
00:00:03.823 --> 00:00:06.849
今回のテーマは、マックスウィドスです。

4
00:00:06.849 --> 00:00:10.513
これは、要素の幅の上限を決めるプロパティです。

5
00:00:10.513 --> 00:00:18.159
画面が広いからといって文章が横に長く広がりすぎると、目が左右へ大きく移動して読みにくくなります。

6
00:00:18.159 --> 00:00:23.256
そこで上限を付けると、広い領域でも箱がその幅までに抑えられます。

7
00:00:23.256 --> 00:00:29.309
この動画では、基本の書き方、指定できる値、ウィドスやミンウィドスとの違い、

8
00:00:29.309 --> 00:00:35.362
上限ならではの柔軟な動き、そして効かないときの確認方法まで順番に見ていきます。

9
00:00:35.362 --> 00:00:41.733
高さの上限を決めるマックスハイトの、横向き版と考えるとイメージしやすくなります。

10
00:00:41.733 --> 00:00:47.308
幅の制御はレイアウトの基本なので、ここでしっかり押さえておきましょう。

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

12
00:00:48.960 --> 00:00:52.865
セレクターを書いたら、マックスウィドスと書き、コロンのあとに上限の値を書き、

13
00:00:52.865 --> 00:00:56.771
最後にセミコロンを付けます。

14
00:00:56.771 --> 00:01:00.526
スライドの例では、上限を十八レムに指定しています。

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

16
00:01:04.881 --> 00:01:09.237
読みやすさを保ちやすくなります。

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

18
00:01:19.000 --> 00:01:26.360
まずはこの一行をそのまま書いて、広い画面で箱がどこまでで止まるかをブラウザーで確かめてみましょう。

19
00:01:26.360 --> 00:01:28.801
次に、指定できる値を確認します。

20
00:01:28.801 --> 00:01:32.005
代表的なのは、長さ、割合、そしてナンです。

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

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

23
00:01:44.361 --> 00:01:49.701
たとえば百分率百パーセントなら、親の幅を超えて広がることはありません。

24
00:01:49.701 --> 00:01:54.430
そしてナンは、上限を付けないという意味で、初期状態の指定です。

25
00:01:54.430 --> 00:01:58.549
まずはレムやピクセルで分かりやすく試し、親に合わせたい場面で割合を使う、

26
00:01:58.549 --> 00:02:02.668
と使い分けると失敗が少なくなります。

27
00:02:02.668 --> 00:02:07.092
値の意味を知ると、デザインの意図に合った書き方を選べます。

28
00:02:07.092 --> 00:02:09.743
初期値と継承について整理します。

29
00:02:09.743 --> 00:02:15.543
マックスウィドスの初期値はナン、つまり幅の上限は付いていない状態です。

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

31
00:02:19.685 --> 00:02:28.301
親に上限を付けても、子要素に自動で伝わるわけではないので、抑えたい要素そのものに指定する必要があります。

32
00:02:28.301 --> 00:02:33.769
また、共通の値として、親の計算値を使うインヘリット、初期値に戻すイニシャルなども書けますが、

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

34
00:02:39.237 --> 00:02:43.794
仕様上の初期値と、ブラウザーの既定のスタイルで見えている値が同じとは限らない点も、

35
00:02:43.794 --> 00:02:48.350
あわせて覚えておきましょう。

36
00:02:48.350 --> 00:02:55.144
この初期値と継承の考え方は、ほかのサイズ系のプロパティでも共通する大切な土台です。

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

38
00:02:58.380 --> 00:03:04.124
ウィドスは幅そのものを指定するもの、ミンウィドスはこれより狭くならないという下限、

39
00:03:04.124 --> 00:03:09.868
そしてマックスウィドスはこれより広くならないという上限です。

40
00:03:09.868 --> 00:03:14.480
マックスウィドスだけを指定した場合、実際の幅は内容や親の広さに合わせて決まりますが、

41
00:03:14.480 --> 00:03:19.091
上限を超えることはありません。

42
00:03:19.091 --> 00:03:24.755
もしウィドスで決めた幅が上限より大きい場合は、上限の方が優先されます。

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

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

45
00:03:37.052 --> 00:03:42.340
マックスウィドスの大切な特徴は、ウィドスとの違いにあります。

46
00:03:42.340 --> 00:03:49.743
上限はあくまで上限なので、親の領域が狭いときは、その狭さに合わせて箱も狭くなります。

47
00:03:49.743 --> 00:03:57.851
記事でも注意されているように、マックスウィドスだけでは、必ずその幅になるわけではありません。

48
00:03:57.851 --> 00:04:02.786
たとえばウィドス百分率百パーセントと組み合わせると、親いっぱいに広がろうとしつつも、

49
00:04:02.786 --> 00:04:07.722
上限で止まる動きになります。

50
00:04:07.722 --> 00:04:13.538
大きな画面では読みやすい幅を保ち、小さな画面でははみ出さずに縮む。

51
00:04:13.538 --> 00:04:19.355
この柔軟さが、レスポンシブなレイアウトで長く使われてきた理由です。

52
00:04:19.355 --> 00:04:22.704
固定幅との違いを意識して使いましょう。

53
00:04:22.704 --> 00:04:24.488
ここからは記事の実例です。

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

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

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

57
00:04:42.597 --> 00:04:46.713
今回比べたいのは上限の違いそのものなので、文章や余白といった土台は固定し、

58
00:04:46.713 --> 00:04:50.829
上限だけを差し替えて観察するのがポイントです。

59
00:04:50.829 --> 00:04:54.259
親が十分に広いときに、子の箱がどこまでで止まるか。

60
00:04:54.259 --> 00:04:56.179
そこが今回の確認どころです。

61
00:04:56.179 --> 00:05:00.844
親と子の入れ子構造も、後のシーエスエスと対応させて見ておきましょう。

62
00:05:00.844 --> 00:05:02.947
土台のシーエスエスです。

63
00:05:02.947 --> 00:05:08.381
ステージには幅の上限三十レムと内側の余白、点線の枠を付けます。

64
00:05:08.381 --> 00:05:13.639
デモの箱には濃い緑の枠線と薄い緑の背景、文字色を用意します。

65
00:05:13.639 --> 00:05:18.810
最後の行でマックスウィドスを十八レムにすると、親は広くても、文章の箱は十八レムまでに抑えられ、

66
00:05:18.810 --> 00:05:23.981
行が短く折り返されます。

67
00:05:23.981 --> 00:05:29.064
次に最後の行だけを百分率百パーセントへ置き換えて再読み込みすると、上限が親の幅まで広がり、

68
00:05:29.064 --> 00:05:34.147
箱は親いっぱいに伸びます。

69
00:05:34.147 --> 00:05:37.828
この一行の違いが、実例の比較ポイントです。

70
00:05:37.828 --> 00:05:45.540
保存して再読み込みするたびに、行の長さと折り返し位置がどう変わるかにも注目してください。

71
00:05:45.540 --> 00:05:52.376
違いが出た理由を、上限という言葉で説明できるかも、あわせて試してみてください。

72
00:05:52.376 --> 00:05:54.776
活用場面を考えてみましょう。

73
00:05:54.776 --> 00:05:57.347
まず、記事や説明文の本文です。

74
00:05:57.347 --> 00:06:03.175
一行が長すぎると読みにくいので、上限を付けて行幅を整え、左右の余白を自動にして中央に置くと、

75
00:06:03.175 --> 00:06:09.004
広い画面でも読みやすいレイアウトになります。

76
00:06:09.004 --> 00:06:10.204
次に画像です。

77
00:06:10.204 --> 00:06:14.832
記事でも紹介されているように、画像にはマックスウィドス百分率百パーセントと、

78
00:06:14.832 --> 00:06:19.460
ハイト、オートを組み合わせます。

79
00:06:19.460 --> 00:06:24.946
そうすると、親より大きな画像は縮んで収まり、縦横比も保たれます。

80
00:06:24.946 --> 00:06:30.260
ただし上限を大きくし過ぎると効果が見えにくくなるので、実際の文章や画像を入れて、

81
00:06:30.260 --> 00:06:35.574
画面幅を変えながら調整するのがおすすめです。

82
00:06:35.574 --> 00:06:41.916
迷ったときは、まず控えめな上限から始めて、少しずつ広げていくのが安全です。

83
00:06:41.916 --> 00:06:46.275
効かないと感じたときは、開発者ツールで順番に調べます。

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

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

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

87
00:07:03.793 --> 00:07:08.879
コンピューテッドで最終的な値を見ます。

88
00:07:08.879 --> 00:07:16.628
親の幅自体が上限より狭い場合は、指定が効いていても箱が上限まで広がらない点にも注意してください。

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

90
00:07:23.248 --> 00:07:25.111
最後に互換性とまとめです。

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

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

93
00:07:37.721 --> 00:07:38.581
まとめます。

94
00:07:38.581 --> 00:07:45.889
マックスウィドスは幅の上限で、初期値はナン、継承はせず、親が狭ければ上限より狭くもなるのが特徴でした。

95
00:07:45.889 --> 00:07:53.771
練習として、十八レムと百分率百パーセントの違いを言葉で説明し、値を一つずつだけ変えて結果を比べてみてください。

96
00:07:53.771 --> 00:07:59.646
関連するミンウィドスやウィドスも学ぶと、サイズの制御が一通りできるようになります。

97
00:07:59.646 --> 00:08:00.936
お疲れさまでした。

98
00:08:00.936 --> 00:08:06.668
幅の上限と下限をセットで理解すると、読みやすく崩れにくいページ作りに役立ちます。