WEBVTT

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

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

3
00:00:03.808 --> 00:00:06.346
今回のテーマは、フレックスです。

4
00:00:06.346 --> 00:00:12.137
これはフレックスボックスの項目が、どれだけ伸びるか、どれだけ縮むか、そして伸び縮みする前の基準の大きさを、

5
00:00:12.137 --> 00:00:17.928
まとめて決める一括指定のプロパティです。

6
00:00:17.928 --> 00:00:27.288
親の箱に余裕があれば項目を広げ、逆に幅が足りなければ項目を縮める、といった柔軟な横並びを作るときの中心になる指定です。

7
00:00:27.288 --> 00:00:33.793
この動画では、伸び縮みする指定と、大きさを固定する指定を比べて、違いを確認します。

8
00:00:33.793 --> 00:00:40.139
ナビゲーションやカードの横並びなど、実際のページでも登場する場面が多い指定です。

9
00:00:40.139 --> 00:00:47.596
基本の書き方、三つの数字の意味、実例での動き、効かないときの確認まで、順番に見ていきましょう。

10
00:00:47.596 --> 00:00:49.343
まず基本の書き方です。

11
00:00:49.343 --> 00:00:54.583
セレクターのあとに、フレックス、コロン、値、セミコロンを書きます。

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

13
00:01:01.094 --> 00:01:03.952
この三つの値が、この動画の主役です。

14
00:01:03.952 --> 00:01:06.334
ここで大切なのは書く場所です。

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

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

17
00:01:19.515 --> 00:01:27.296
親が並べ方の土台を用意し、子が自分の伸び縮みのルールを決める、という役割分担をまず覚えてください。

18
00:01:27.296 --> 00:01:29.880
三つの数字の読み方を整理します。

19
00:01:29.880 --> 00:01:36.178
一つ目はフレックス・グロウで、余った幅をどれだけ受け取って伸びるかを表します。

20
00:01:36.178 --> 00:01:39.731
1なら余白の分配に参加し、0なら伸びません。

21
00:01:39.731 --> 00:01:46.030
二つ目はフレックス・シュリンクで、幅が足りないときにどれだけ縮むかを表します。

22
00:01:46.030 --> 00:01:48.452
1なら縮み、0なら縮みません。

23
00:01:48.452 --> 00:01:53.782
三つ目はフレックス・ベイシスで、伸び縮みする前の基準の大きさです。

24
00:01:53.782 --> 00:01:57.496
12レムや、パーセント、オートなどが使えます。

25
00:01:57.496 --> 00:02:01.857
左から、伸びる、縮む、基準、の順番だと覚えてください。

26
00:02:01.857 --> 00:02:07.509
たとえばグロウが2の項目は、1の項目のおよそ2倍の余白を受け取ります。

27
00:02:07.509 --> 00:02:10.255
比率で配分される点もポイントです。

28
00:02:10.255 --> 00:02:14.292
この順番さえ押さえれば、省略記法も怖くありません。

29
00:02:14.292 --> 00:02:17.572
キーワードと短い書き方も見ておきます。

30
00:02:17.572 --> 00:02:24.996
フレックス、オートは、1、1、オートと同じで、内容に合わせた大きさから伸び縮みします。

31
00:02:24.996 --> 00:02:32.938
フレックス、ノンは、0、0、オートと同じで、伸びも縮みもせず、内容どおりの大きさを保ちます。

32
00:02:32.938 --> 00:02:40.189
フレックス、イニシャルは、0、1、オートで、伸びはしませんが、必要なときは縮みます。

33
00:02:40.189 --> 00:02:44.937
また、フレックス、1のように数字をひとつだけ書くと、基準がゼロになって、

34
00:02:44.937 --> 00:02:49.684
余った幅を均等に分け合う形になります。

35
00:02:49.684 --> 00:02:53.483
等幅の列を作りたいときによく使う書き方です。

36
00:02:53.483 --> 00:02:58.144
目的に合わせて、数字とキーワードを使い分けてください。

37
00:02:58.144 --> 00:02:59.941
初期値と継承を確認します。

38
00:02:59.941 --> 00:03:06.716
フレックスは一括指定なので、初期値は、構成する三つの個別プロパティ、それぞれの初期値を参照します。

39
00:03:06.716 --> 00:03:11.417
何も指定しない状態は、伸びる係数が0、縮む係数が1、基準がオートで、内容に合わせた大きさを保ちながら、

40
00:03:11.417 --> 00:03:16.118
必要なときだけ縮む動きになります。

41
00:03:16.118 --> 00:03:18.054
そして通常の継承はしません。

42
00:03:18.054 --> 00:03:22.893
親要素にフレックスを書いても、子へ自動で受け継がれることはありません。

43
00:03:22.893 --> 00:03:28.562
フレックスボックスの直接の子である項目ごとに指定するプロパティだと考えてください。

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

45
00:03:34.922 --> 00:03:38.793
迷ったら個別プロパティで確認すると整理しやすくなります。

46
00:03:38.793 --> 00:03:44.324
親全体の並べ方はディスプレイ、個別の伸び縮みはフレックス、という整理が要点です。

47
00:03:44.324 --> 00:03:46.080
実例を見ていきます。

48
00:03:46.080 --> 00:03:49.240
まずエイチティーエムエルの用意です。

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

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

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

52
00:04:08.027 --> 00:04:11.188
親と子の構造そのものが例の一部です。

53
00:04:11.188 --> 00:04:20.318
この例では、二番目に書かれた対象だけにフレックスを指定して、ほかの項目とどう大きさが変わるかを比べます。

54
00:04:20.318 --> 00:04:26.112
三つの項目は横並びになる想定で、対象の幅の変化に注目してください。

55
00:04:26.112 --> 00:04:30.862
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

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

57
00:04:36.990 --> 00:04:43.118
ほかの項目には、フレックス、0、1、6レムを指定し、基準は小さめにしておきます。

58
00:04:43.118 --> 00:04:48.634
そして主役は最後の行で、デモにフレックス、1、1、12レムを指定します。

59
00:04:48.634 --> 00:04:52.847
すると対象は、12レムを基準にしながら、余った幅を受け取って伸び、幅が足りなければ縮む、

60
00:04:52.847 --> 00:04:57.061
柔軟な項目になります。

61
00:04:57.061 --> 00:05:01.044
土台は共通なので、最後の指定だけに注目してください。

62
00:05:01.044 --> 00:05:06.100
枠線が太く背景が付いた対象が、広く表示される様子を確認しましょう。

63
00:05:06.100 --> 00:05:08.254
値を変えて比べてみましょう。

64
00:05:08.254 --> 00:05:14.407
最後のフレックスの値だけを、1、1、12レムから、0、0、8レムへ置き換えます。

65
00:05:14.407 --> 00:05:19.407
ファイルを保存してブラウザーを再読み込みすると、二番目に書かれた対象が、

66
00:05:19.407 --> 00:05:24.406
今度は8レムの幅を保ったまま、伸びも縮みもしなくなります。

67
00:05:24.406 --> 00:05:28.098
画面を広げても狭めても、対象の幅はほぼ固定です。

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

69
00:05:31.329 --> 00:05:39.021
三つの数字を変えるだけで、柔軟な項目と固定の項目が切り替わる点が、フレックスの分かりやすい特徴です。

70
00:05:39.021 --> 00:05:43.328
比較のコツは、変えるのはこの値ひとつだけにすることです。

71
00:05:43.328 --> 00:05:45.858
間違えやすい点を整理します。

72
00:05:45.858 --> 00:05:52.907
まず、省略したつもりでも、フレックスを書くと三つの成分すべてが上書きされます。

73
00:05:52.907 --> 00:05:57.696
基準だけ変えたいのに、伸び縮みの係数まで初期の状態に戻ってしまうことがあるので、

74
00:05:57.696 --> 00:06:02.486
三成分を意識してください。

75
00:06:02.486 --> 00:06:09.534
次に、等幅にしたのに崩れる場合は、子の自動の最小サイズが原因のことがあります。

76
00:06:09.534 --> 00:06:15.498
長い文章や大きな画像があると、項目が想定より縮まずにはみ出します。

77
00:06:15.498 --> 00:06:20.378
そのときは、ミン・ウィズ、ゼロなどを検討してください。

78
00:06:20.378 --> 00:06:27.065
また、親がフレックスになっていないと、子にフレックスを書いても効きません。

79
00:06:27.065 --> 00:06:34.294
特にベイシスにオートを指定した場合は、幅の指定や内容の大きさが基準に影響します。

80
00:06:34.294 --> 00:06:37.548
この関係もあわせて確認してください。

81
00:06:37.548 --> 00:06:40.620
誰に何を書いたかを確認しましょう。

82
00:06:40.620 --> 00:06:42.870
効かないときの確認手順です。

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

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

85
00:06:56.050 --> 00:07:02.640
スタイルズで宣言が無効になっていないか、別の宣言に上書きされていないかも重要です。

86
00:07:02.640 --> 00:07:08.105
コンピューテッドで、フレックス・グロウ、シュリンク、ベイシスの最終的な値を確認し、

87
00:07:08.105 --> 00:07:13.570
親の表示方式がフレックスになっているかも調べましょう。

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

89
00:07:21.928 --> 00:07:23.900
最後に互換性とまとめです。

90
00:07:23.900 --> 00:07:32.090
フレックスは、クローム、エッジ、ファイアフォックス、サファリなど、現在の主要ブラウザーで広く対応しています。

91
00:07:32.090 --> 00:07:37.854
記事では、クロームは29以降、サファリは9以降などの記録が紹介されています。

92
00:07:37.854 --> 00:07:42.632
練習は、まず1、1、12レムと、0、0、8レムの違いを自分の言葉で説明し、

93
00:07:42.632 --> 00:07:47.410
次に親の幅や文章量だけを変えて結果を比べることです。

94
00:07:47.410 --> 00:07:53.477
値だけを変えて結果を比べる練習を繰り返すと、三つの数字の働きが体で覚えられます。

95
00:07:53.477 --> 00:07:54.387
まとめます。

96
00:07:54.387 --> 00:07:57.724
フレックスは、伸びる係数、縮む係数、基準の大きさをまとめて決める指定で、

97
00:07:57.724 --> 00:08:01.061
継承はしません。

98
00:08:01.061 --> 00:08:07.583
関連するフレックス・グロウ、シュリンク、ベイシスもあわせて確認すると理解が深まります。

99
00:08:07.583 --> 00:08:08.948
お疲れさまでした。