WEBVTT

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

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

3
00:00:03.738 --> 00:00:07.165
今回のテーマは、フレックス・シュリンクです。

4
00:00:07.165 --> 00:00:15.265
これはフレックスボックスの項目が、親の幅に収まりきらないときに、どれくらい縮むかを決めるプロパティです。

5
00:00:15.265 --> 00:00:21.808
幅が足りない場面でだけ働くのが大きな特徴で、親に余裕があるときには何も変わりません。

6
00:00:21.808 --> 00:00:30.219
この動画では、ゼロとイチという二つの値を比べて、対象の項目が縮むか、縮まずにはみ出してしまうかを確認します。

7
00:00:30.219 --> 00:00:35.126
たとえばナビゲーションの横並びや、ボタンの並びが狭い画面でつぶれてしまう場面を思い浮かべると、

8
00:00:35.126 --> 00:00:40.033
イメージがつかみやすいはずです。

9
00:00:40.033 --> 00:00:46.108
基本の書き方、縮む仕組み、実例、効かないときの確認まで順番に見ていきましょう。

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

11
00:00:47.752 --> 00:00:53.580
セレクターのあとに、フレックス・シュリンク、コロン、値、セミコロンを書きます。

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

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

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

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

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

17
00:01:20.480 --> 00:01:22.474
縮む仕組みを整理します。

18
00:01:22.474 --> 00:01:29.620
フレックス・シュリンクが働くのは、項目の基準サイズの合計が親の幅を超えたときだけです。

19
00:01:29.620 --> 00:01:39.091
たとえば基準が12レムの項目が三つ並び、親の幅がそれより狭いと、あふれた分をどこかが引き受けなければ収まりません。

20
00:01:39.091 --> 00:01:46.735
その不足分を、シュリンクの係数と基準サイズに応じて分け合い、各項目が少しずつ小さくなります。

21
00:01:46.735 --> 00:01:56.540
ですから実際の縮小量は、係数だけで決まるのではなく、もとの基準サイズであるフレックス・ベイシスの大きさにも依存します。

22
00:01:56.540 --> 00:02:01.691
係数が同じでも、もとが大きい項目ほど多く縮むと考えてください。

23
00:02:01.691 --> 00:02:06.011
逆に、親にまだ空きがあるときは、シュリンクではなくグロウの方が関係するので、

24
00:02:06.011 --> 00:02:10.332
混同しないようにしましょう。

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

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

27
00:02:15.613 --> 00:02:22.138
ゼロは縮まないという指定で、ロゴやアイコンのように形を保ちたい項目によく使われます。

28
00:02:22.138 --> 00:02:26.953
ただし縮まない分、親からはみ出す場合があるので注意が必要です。

29
00:02:26.953 --> 00:02:31.147
イチは初期値で、幅が足りなければ状況に応じて縮みます。

30
00:02:31.147 --> 00:02:36.118
ニやサンなど大きな数ほど、ほかの項目より多く縮む割合が増えます。

31
00:02:36.118 --> 00:02:37.982
マイナスの値は無効です。

32
00:02:37.982 --> 00:02:45.904
まずはゼロとイチの違い、つまり縮むか縮まないかから押さえ、比率の調整はそのあとで試すのがおすすめです。

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

34
00:02:47.708 --> 00:02:52.011
フレックス・シュリンクの初期値はイチで、通常の継承はしません。

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

36
00:02:57.425 --> 00:03:00.062
一括指定フレックスとの関係も重要です。

37
00:03:00.062 --> 00:03:05.891
フレックス、ゼロ、イチ、6レムと書いたとき、二番目のイチがまさにこのシュリンクです。

38
00:03:05.891 --> 00:03:11.721
あとから縮み方だけを変えたいときは、フレックス・シュリンクを単体で書くのが安全です。

39
00:03:11.721 --> 00:03:17.134
一括指定で書き直すと、伸びる係数や基準サイズまで一緒に変わってしまうからです。

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

41
00:03:22.964 --> 00:03:24.755
実例を見ていきます。

42
00:03:24.755 --> 00:03:27.977
まずエイチティーエムエルの用意です。

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

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

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

46
00:03:46.957 --> 00:03:50.180
親と子の構造そのものが例の一部です。

47
00:03:50.180 --> 00:03:59.491
この例では親の幅をあえて狭く用意し、二番目の対象だけ縮み方を変えて、ほかの項目とどう違うかを見比べます。

48
00:03:59.491 --> 00:04:03.072
対象の幅とはみ出し方に注目してください。

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

50
00:04:07.606 --> 00:04:12.725
ステージはディスプレイ、フレックスで項目が横に並びますが、最大幅が24レムに絞られていて、

51
00:04:12.725 --> 00:04:17.844
基準12レムの項目三つはそのままでは収まりません。

52
00:04:17.844 --> 00:04:21.208
そして主役は最後の行で、デモだけにフレックス・シュリンク、ゼロを指定し、

53
00:04:21.208 --> 00:04:24.572
縮小を止めています。

54
00:04:24.572 --> 00:04:30.861
すると対象は基準の大きさを保とうとし、親からはみ出すか、スクロールで見る形になります。

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

56
00:04:35.103 --> 00:04:39.417
対象だけ枠線が太く背景が付いているので、ブラウザーで開いたときにどれが縮んでいないか、

57
00:04:39.417 --> 00:04:43.732
一目で分かるようになっています。

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

59
00:04:45.764 --> 00:04:50.700
最後のフレックス・シュリンクの値だけを、ゼロからイチへ置き換えます。

60
00:04:50.700 --> 00:04:55.346
ファイルを保存してブラウザーを再読み込みすると、二番目の対象もほかの項目と同じように縮むようになり、

61
00:04:55.346 --> 00:04:59.991
狭い横並びの中に収まります。

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

63
00:05:03.040 --> 00:05:08.702
たった一つの係数を変えるだけで、はみ出していた項目が並びの中に収まるわけです。

64
00:05:08.702 --> 00:05:16.396
ただし縮む量は基準サイズにも左右されるので、親の幅を変えたときの結果もあわせて観察すると理解が深まります。

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

66
00:05:19.880 --> 00:05:22.036
間違えやすい点を整理します。

67
00:05:22.036 --> 00:05:26.964
まず、ゼロで縮小を止めると、項目が親からはみ出す場合があります。

68
00:05:26.964 --> 00:05:31.506
縮まない指定は便利ですが、スマホのような狭い画面では見切れや横スクロールの原因になるので、

69
00:05:31.506 --> 00:05:36.049
使いどころを選んでください。

70
00:05:36.049 --> 00:05:41.747
次に、親がフレックスになっていないと、子にシュリンクを書いても効きません。

71
00:05:41.747 --> 00:05:45.289
親への指定と子への指定を混同しないでください。

72
00:05:45.289 --> 00:05:52.834
さらに、親の幅に余裕がある場面では、そもそも縮む必要がないため、値を変えても見た目が変わりません。

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

74
00:05:59.148 --> 00:06:01.310
効かないときの確認手順です。

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

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

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

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

79
00:06:28.650 --> 00:06:35.137
親の幅と項目の合計を比べて縮む条件がそろっているかも調べましょう。

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

81
00:06:42.088 --> 00:06:43.907
最後に互換性とまとめです。

82
00:06:43.907 --> 00:06:48.104
フレックス・シュリンクは、クローム、エッジ、ファイアフォックス、サファリなど、

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

84
00:06:52.301 --> 00:06:56.639
記事では、クロームは29以降、エッジは12以降、ファイアフォックスは20以降、

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

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

87
00:07:05.103 --> 00:07:09.230
結果がどう変わるかを比べることです。

88
00:07:09.230 --> 00:07:10.070
まとめます。

89
00:07:10.070 --> 00:07:13.708
フレックス・シュリンクは、幅が足りないときに項目が縮む割合を決める係数で、

90
00:07:13.708 --> 00:07:17.345
初期値はイチ、継承はしません。

91
00:07:17.345 --> 00:07:24.201
関連するフレックス、フレックス・グロウ、フレックス・ベイシスもあわせて確認すると理解が深まります。

92
00:07:24.201 --> 00:07:25.460
お疲れさまでした。