WEBVTT

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

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

3
00:00:03.681 --> 00:00:06.748
今回のテーマは、フレックス・グロウです。

4
00:00:06.748 --> 00:00:16.256
これはフレックスボックスの項目が、親の中に余った幅があるときに、その余りをどれだけ受け取って広がるかを決めるプロパティです。

5
00:00:16.256 --> 00:00:21.930
余裕がある場面でだけ働くのが大きな特徴で、幅が足りないときには働きません。

6
00:00:21.930 --> 00:00:26.761
この動画では、イチとゼロという二つの値を比べて、対象の項目が残りの幅を受け取って広がるか、

7
00:00:26.761 --> 00:00:31.591
広がらずに余白が残るかを確認します。

8
00:00:31.591 --> 00:00:39.566
たとえば本文を広く見せたい記事ページや、ナビゲーションの横並びを思い浮かべるとイメージしやすいはずです。

9
00:00:39.566 --> 00:00:45.700
基本の書き方、伸びる仕組み、実例、効かないときの確認まで順番に見ていきましょう。

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

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

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

13
00:00:59.390 --> 00:01:01.895
ここで大切なのは書く場所です。

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

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

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

17
00:01:23.432 --> 00:01:25.380
伸びる仕組みを整理します。

18
00:01:25.380 --> 00:01:29.200
フレックス・グロウが働くのは、項目の基準サイズの合計よりも親の幅が広く、

19
00:01:29.200 --> 00:01:33.020
余った空間があるときだけです。

20
00:01:33.020 --> 00:01:41.560
たとえば基準が6レムの項目が三つ並び、親がそれより広ければ、残りの幅を誰かが受け取らなければ右側に空白が残ります。

21
00:01:41.560 --> 00:01:47.402
その余りを、グロウの係数の比率に応じて分け合い、指定のある項目が広くなります。

22
00:01:47.402 --> 00:01:56.241
ですから最終的な幅は、係数だけで決まるのではなく、出発点となるフレックス・ベイシスや内容そのものの幅にも影響されます。

23
00:01:56.241 --> 00:01:59.987
逆に、幅が足りない場面では、グロウではなくシュリンクの方が関係するので、

24
00:01:59.987 --> 00:02:03.732
混同しないようにしましょう。

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

26
00:02:06.035 --> 00:02:09.325
値はゼロ以上の数値で、単位は付けません。

27
00:02:09.325 --> 00:02:13.273
ゼロは広がらないという指定で、これが初期値です。

28
00:02:13.273 --> 00:02:18.702
余った幅があっても項目は基準の大きさのままになり、空白が残ります。

29
00:02:18.702 --> 00:02:23.472
イチを指定すると、その項目が余りを受け取る候補になります。

30
00:02:23.472 --> 00:02:29.724
一つだけイチなら余りを一人で受け取り、複数がイチなら同じ割合で分け合います。

31
00:02:29.724 --> 00:02:33.507
ニなら、イチの項目の二倍の余りを受け取ります。

32
00:02:33.507 --> 00:02:35.481
マイナスの値は無効です。

33
00:02:35.481 --> 00:02:44.200
まずはゼロとイチの違い、つまり広がるか広がらないかから押さえ、比率の調整はそのあとで試すのがおすすめです。

34
00:02:44.200 --> 00:02:46.051
初期値と継承を確認します。

35
00:02:46.051 --> 00:02:50.180
フレックス・グロウの初期値はゼロで、通常の継承はしません。

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

37
00:02:56.302 --> 00:02:59.007
一括指定フレックスとの関係も重要です。

38
00:02:59.007 --> 00:03:04.703
フレックス、ゼロ、イチ、6レムと書いたとき、一番目のゼロがまさにこのグロウです。

39
00:03:04.703 --> 00:03:10.398
あとから伸び方だけを変えたいときは、フレックス・グロウを単体で書くのが安全です。

40
00:03:10.398 --> 00:03:15.808
一括指定で書き直すと、縮む係数や基準サイズまで一緒に変わってしまうからです。

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

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

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

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

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

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

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

48
00:03:44.694 --> 00:03:52.229
この例では親の幅に余裕を用意し、二番目の対象だけ伸び方を変えて、ほかの項目とどう違うかを見比べます。

49
00:03:52.229 --> 00:03:56.448
対象が余った幅を受け取って広がる様子に注目してください。

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

51
00:04:01.551 --> 00:04:07.641
ステージはディスプレイ、フレックスで項目が横に並び、最大幅は30レムです。

52
00:04:07.641 --> 00:04:15.048
各項目の土台はフレックス、ゼロ、イチ、6レムで、基準は6レム、伸びる係数はゼロの状態です。

53
00:04:15.048 --> 00:04:23.278
そして主役は最後の行で、デモだけにフレックス・グロウ、イチを指定し、余りを受け取るようにしています。

54
00:04:23.278 --> 00:04:29.532
すると対象だけが残りの幅を受け取って広がり、ほかの二つは基準のまま残ります。

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

56
00:04:34.306 --> 00:04:40.396
対象だけ枠線が太く背景が付いているので、どれが広がったか一目で分かります。

57
00:04:40.396 --> 00:04:42.302
値を変えて比べてみましょう。

58
00:04:42.302 --> 00:04:46.660
最後のフレックス・グロウの値だけを、イチからゼロへ置き換えます。

59
00:04:46.660 --> 00:04:51.154
ファイルを保存してブラウザーを再読み込みすると、二番目の対象もほかの項目と同じように広がらなくなり、

60
00:04:51.154 --> 00:04:55.648
親の中に余白がそのまま残ります。

61
00:04:55.648 --> 00:04:58.507
エイチティーエムエルは一切変えていません。

62
00:04:58.507 --> 00:05:03.818
たった一つの係数を変えるだけで、広がっていた項目が基準の大きさに戻るわけです。

63
00:05:03.818 --> 00:05:11.308
ただし最終的な幅は基準サイズにも左右されるので、親の幅を変えたときの結果もあわせて観察すると理解が深まります。

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

65
00:05:14.576 --> 00:05:16.704
間違えやすい点を整理します。

66
00:05:16.704 --> 00:05:21.719
最も大切なのは、イチは幅を一等分する命令ではない、ということです。

67
00:05:21.719 --> 00:05:28.559
グロウは余った空間を配る比率であって、項目そのものの最終幅を直接決めるものではありません。

68
00:05:28.559 --> 00:05:34.486
出発点となる基準サイズや内容の幅も影響し、兄弟のグロウと相対的に評価されます。

69
00:05:34.486 --> 00:05:39.806
次に、親がフレックスになっていないと、子にグロウを書いても効きません。

70
00:05:39.806 --> 00:05:43.301
親への指定と子への指定を混同しないでください。

71
00:05:43.301 --> 00:05:50.445
さらに、親に余りがない場面では、そもそも配る空間がないため、値を変えても見た目が変わりません。

72
00:05:50.445 --> 00:05:56.676
効いていないのではなく、発動する条件がそろっていないだけ、という場合も多いのです。

73
00:05:56.676 --> 00:05:58.720
効かないときの確認手順です。

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

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

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

77
00:06:18.426 --> 00:06:23.972
コンピューテッドでフレックス・グロウの最終的な値を確認し、親の表示方式がフレックスになっているか、

78
00:06:23.972 --> 00:06:29.519
親の幅と項目の合計を比べて余りがあるかも調べましょう。

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

80
00:06:36.088 --> 00:06:38.202
最後に互換性とまとめです。

81
00:06:38.202 --> 00:06:42.918
フレックス・グロウは、クローム、エッジ、ファイアフォックス、サファリなど、

82
00:06:42.918 --> 00:06:47.633
現在の主要ブラウザーで広く対応しています。

83
00:06:47.633 --> 00:06:53.243
記事では、クロームは29以降、エッジは12以降、ファイアフォックスは20以降で補足条件あり、

84
00:06:53.243 --> 00:06:58.854
サファリは9以降などの記録が紹介されています。

85
00:06:58.854 --> 00:07:03.651
練習は、まずイチとゼロの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて、

86
00:07:03.651 --> 00:07:08.448
結果がどう変わるかを比べることです。

87
00:07:08.448 --> 00:07:09.423
まとめます。

88
00:07:09.423 --> 00:07:13.163
フレックス・グロウは、余った幅を項目へ配る割合を決める係数で、初期値はゼロ、

89
00:07:13.163 --> 00:07:16.903
継承はしません。

90
00:07:16.903 --> 00:07:25.197
関連するフレックス、フレックス・シュリンク、フレックス・ベイシスもあわせて確認すると理解が深まります。

91
00:07:25.197 --> 00:07:26.660
お疲れさまでした。