WEBVTT

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

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

3
00:00:03.486 --> 00:00:06.537
今回のテーマは、フレックス・ベイシスです。

4
00:00:06.537 --> 00:00:13.946
これはフレックスボックスの項目について、伸びたり縮んだりする前の、基準の大きさを決めるプロパティです。

5
00:00:13.946 --> 00:00:20.483
ブラウザーはまずこの基準を置き、余った幅や足りない幅を計算して、最終的な大きさを決めます。

6
00:00:20.483 --> 00:00:26.148
横並びのときは幅の基準、縦並びのときは高さの基準になるのが大切なポイントです。

7
00:00:26.148 --> 00:00:33.267
この動画では、12レムと6レムという二つの基準を比べて、項目の幅の配分がどう変わるかを確認します。

8
00:00:33.267 --> 00:00:38.932
基本の書き方、値の種類、実例、効かないときの確認まで、順番に見ていきましょう。

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

10
00:00:40.772 --> 00:00:47.127
セレクターのあとに、フレックス・ベイシス、コロン、値、セミコロンを書きます。

11
00:00:47.127 --> 00:00:53.315
スライドの例では、デモというクラスを持つ項目に、12レムと指定しています。

12
00:00:53.315 --> 00:00:55.824
ここで大切なのは書く場所です。

13
00:00:55.824 --> 00:01:04.521
フレックス・ベイシスは、横並びにしたい親ではなく、並べられる子、つまりフレックスアイテム自身に書きます。

14
00:01:04.521 --> 00:01:10.542
親にはあらかじめ、ディスプレイ、フレックスを指定しておく必要があります。

15
00:01:10.542 --> 00:01:18.403
親が並べ方の土台を用意し、子が自分の基準の大きさを決める、という役割分担をまず覚えてください。

16
00:01:18.403 --> 00:01:20.744
値には長さや割合が使えます。

17
00:01:20.744 --> 00:01:22.736
基準の考え方を整理します。

18
00:01:22.736 --> 00:01:27.027
フレックス・ベイシスが決めるのは、主軸方向の大きさです。

19
00:01:27.027 --> 00:01:32.851
主軸とは、フレックス・ディレクションで決まる、項目が並ぶ方向の軸のことです。

20
00:01:32.851 --> 00:01:39.288
初期状態のロー、つまり横並びでは、主軸は横向きなので、ベイシスは幅の基準になります。

21
00:01:39.288 --> 00:01:45.877
一方、カラム、つまり縦並びにすると主軸は縦向きになり、ベイシスは高さの基準になります。

22
00:01:45.877 --> 00:01:50.935
ですから、ベイシスは常に幅だ、と覚えてしまうと縦並びで混乱します。

23
00:01:50.935 --> 00:01:56.452
並びの方向を確認してから、幅の話なのか高さの話なのかを判断してください。

24
00:01:56.452 --> 00:02:01.356
この切り替えが理解できると、縦並びメニューでも迷わなくなります。

25
00:02:01.356 --> 00:02:03.428
指定できる値を見ていきます。

26
00:02:03.428 --> 00:02:07.129
オートは、要素にもともと指定された幅や高さ、なければ中身の大きさに合わせる値で、

27
00:02:07.129 --> 00:02:10.829
初期値でもあります。

28
00:02:10.829 --> 00:02:16.898
12レムや200ピクセルのような長さを書けば、その大きさがそのまま基準になります。

29
00:02:16.898 --> 00:02:22.818
30パーセントのような割合も使え、親の主軸方向の大きさに対する比率で決まります。

30
00:02:22.818 --> 00:02:27.259
コンテンツは、中身が本来必要とする大きさを基準にする値です。

31
00:02:27.259 --> 00:02:34.364
固定したい部分には長さ、内容に合わせたい部分にはオートやコンテンツ、といった使い分けが基本です。

32
00:02:34.364 --> 00:02:37.768
まずは長さとオートの違いから押さえてください。

33
00:02:37.768 --> 00:02:39.831
初期値と継承を確認します。

34
00:02:39.831 --> 00:02:44.749
フレックス・ベイシスの初期値はオートで、通常の継承はしません。

35
00:02:44.749 --> 00:02:50.937
親に書いても子へ自動で受け継がれないので、フレックスアイテムごとに指定します。

36
00:02:50.937 --> 00:02:53.793
前回のフレックスとの関係も重要です。

37
00:02:53.793 --> 00:02:58.395
一括指定フレックスの三番目の値が、まさにこのベイシスです。

38
00:02:58.395 --> 00:03:03.313
たとえば、フレックス、0、1、6レムの6レムが基準を表します。

39
00:03:03.313 --> 00:03:09.660
あとから基準だけを変えたいときは、フレックス・ベイシスを単体で書くのが安全です。

40
00:03:09.660 --> 00:03:15.689
一括指定で書き直すと、伸びる係数や縮む係数まで一緒に変わってしまうからです。

41
00:03:15.689 --> 00:03:22.988
共通キーワードのインヘリットやイニシャル、アンセットの考え方は、ほかのプロパティと同じです。

42
00:03:22.988 --> 00:03:24.608
実例を見ていきます。

43
00:03:24.608 --> 00:03:27.524
まずエイチティーエムエルの用意です。

44
00:03:27.524 --> 00:03:31.737
ステージという親の箱の中に、項目が三つ入っています。

45
00:03:31.737 --> 00:03:39.190
一つ目と三つ目は通常の項目、二つ目だけが対象で、アイテムとデモ、二つのクラスを持っています。

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

47
00:03:44.860 --> 00:03:47.777
親と子の構造そのものが例の一部です。

48
00:03:47.777 --> 00:03:55.229
この例では、二番目の対象だけ基準を大きくして、ほかの項目と幅の配分がどう変わるかを比べます。

49
00:03:55.229 --> 00:03:59.928
三つが横並びになる想定で、特に対象の幅に注目してください。

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

51
00:04:05.323 --> 00:04:12.459
ステージはディスプレイ、フレックスとし、隙間はれい点ごレムで、項目が横に並びます。

52
00:04:12.459 --> 00:04:18.202
項目共通の指定は、フレックス、0、1、6レムで、基準は6レムです。

53
00:04:18.202 --> 00:04:22.553
そして主役は最後の行で、デモだけにフレックス・ベイシス、12レムを指定し、

54
00:04:22.553 --> 00:04:26.904
基準を2倍に上書きします。

55
00:04:26.904 --> 00:04:33.866
すると対象は、ほかの項目より広い幅から配分が始まり、目立って大きく表示されます。

56
00:04:33.866 --> 00:04:38.913
土台の指定は共通なので、最後の一行だけに注目してください。

57
00:04:38.913 --> 00:04:44.308
枠線が太く背景が付いた対象が、広く見える様子を確認しましょう。

58
00:04:44.308 --> 00:04:46.327
値を変えて比べてみましょう。

59
00:04:46.327 --> 00:04:51.518
最後のフレックス・ベイシスの値だけを、12レムから6レムへ置き換えます。

60
00:04:51.518 --> 00:04:56.205
ファイルを保存してブラウザーを再読み込みすると、二番目の対象の基準が、ほかの項目と同じ6レムに戻り、

61
00:04:56.205 --> 00:05:00.891
幅の配分もほぼ同等になります。

62
00:05:00.891 --> 00:05:03.920
エイチティーエムエルは一切変えていません。

63
00:05:03.920 --> 00:05:09.688
基準ひとつを変えるだけで、主役のように広かった項目が、並びの一つに戻るわけです。

64
00:05:09.688 --> 00:05:12.572
ただし、これはあくまで配分の出発点です。

65
00:05:12.572 --> 00:05:17.907
最終的な幅は、このあと伸び縮みの計算で決まる点も一緒に思い出してください。

66
00:05:17.907 --> 00:05:21.368
比較のコツは、変える値を一つだけにすることです。

67
00:05:21.368 --> 00:05:23.451
間違えやすい点を整理します。

68
00:05:23.451 --> 00:05:29.253
まず、フレックス・ベイシスは出発点であって、最終サイズそのものではありません。

69
00:05:29.253 --> 00:05:34.461
親に余りがあればフレックス・グロウで伸び、幅が足りなければフレックス・シュリンクで縮むため、

70
00:05:34.461 --> 00:05:39.668
表示幅がベイシスと一致しないのは普通のことです。

71
00:05:39.668 --> 00:05:43.983
次に、縦並びのカラムでは高さの基準になる点を忘れがちです。

72
00:05:43.983 --> 00:05:48.000
幅を指定したつもりで高さが変わり、驚くことがあります。

73
00:05:48.000 --> 00:05:53.356
また、親がフレックスになっていないと、子にベイシスを書いても効きません。

74
00:05:53.356 --> 00:05:56.778
親への指定と子への指定を混同しないでください。

75
00:05:56.778 --> 00:06:02.580
さらに、最小幅や最大幅の指定があると、計算結果がそちらで止まることもあります。

76
00:06:02.580 --> 00:06:05.556
誰に何を書いたか、順番に確認しましょう。

77
00:06:05.556 --> 00:06:07.900
効かないときの確認手順です。

78
00:06:07.900 --> 00:06:15.432
まずネットワークで、スタイルズ・ドット・シーエスエスが正常に取得できているかを確認します。

79
00:06:15.432 --> 00:06:21.626
次にエレメンツで、対象のクラスとセレクターが一致しているかを見てください。

80
00:06:21.626 --> 00:06:30.498
スタイルズで宣言が無効になっていないか、フレックスの一括指定など別の宣言に上書きされていないかも重要です。

81
00:06:30.498 --> 00:06:36.441
コンピューテッドで、フレックス・ベイシスの最終的な値を確認し、親の表示方式がフレックスになっているか、

82
00:06:36.441 --> 00:06:42.383
並びの方向が意図どおりかも調べましょう。

83
00:06:42.383 --> 00:06:51.088
最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容がはみ出さずに利用できるかを確かめてください。

84
00:06:51.088 --> 00:06:52.914
最後に互換性とまとめです。

85
00:06:52.914 --> 00:06:57.059
フレックス・ベイシスは、クローム、エッジ、ファイアフォックス、サファリなど、

86
00:06:57.059 --> 00:07:01.204
現在の主要ブラウザーで広く対応しています。

87
00:07:01.204 --> 00:07:07.807
記事では、クロームは29以降、エッジは12以降、サファリは9以降などの記録が紹介されています。

88
00:07:07.807 --> 00:07:12.163
練習は、まず12レムと6レムの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて、

89
00:07:12.163 --> 00:07:16.518
結果がどう変わるかを比べることです。

90
00:07:16.518 --> 00:07:20.874
複数の指定を一度に変えず、一つずつ確かめると理解が早まります。

91
00:07:20.874 --> 00:07:21.717
まとめます。

92
00:07:21.717 --> 00:07:24.808
フレックス・ベイシスは、主軸方向の伸縮前の基準サイズで、初期値はオート、

93
00:07:24.808 --> 00:07:27.899
継承はしません。

94
00:07:27.899 --> 00:07:34.924
関連するフレックス、フレックス・グロウ、フレックス・シュリンクもあわせて確認すると理解が深まります。

95
00:07:34.924 --> 00:07:36.188
お疲れさまでした。