WEBVTT

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

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

3
00:00:03.898 --> 00:00:07.147
今回のテーマは、フレックス・ラップです。

4
00:00:07.147 --> 00:00:12.345
これは、フレックスボックスで横に並べた項目が、親の幅に入りきらなくなったときに、

5
00:00:12.345 --> 00:00:17.542
次の行へ折り返すかどうかを決めるプロパティです。

6
00:00:17.542 --> 00:00:24.689
折り返せば、カードやボタンが画面幅に合わせて下の段へ移動し、読みやすい大きさを保てます。

7
00:00:24.689 --> 00:00:30.536
折り返さなければ、すべての項目が一列に残り、縮んだりはみ出したりします。

8
00:00:30.536 --> 00:00:36.546
この動画では、代表的な値であるラップとノーラップを比べて違いを確認します。

9
00:00:36.546 --> 00:00:42.231
基本の書き方、主な値、実例、効かないときの確認まで、順番に解説します。

10
00:00:42.231 --> 00:00:46.942
特に、項目の数が決まっていない一覧や、スマートフォンで画面幅が狭くなる場面では、

11
00:00:46.942 --> 00:00:51.652
この折り返しの考え方が欠かせません。

12
00:00:51.652 --> 00:00:53.692
まず基本の書き方です。

13
00:00:53.692 --> 00:01:00.553
セレクターのあとに、フレックス・ラップ、コロン、値、セミコロンを書きます。

14
00:01:00.553 --> 00:01:07.229
スライドの例では、デモというクラスを持つ要素に、ラップを指定しています。

15
00:01:07.229 --> 00:01:10.011
ここで大切なのは書く場所です。

16
00:01:10.011 --> 00:01:17.429
このプロパティは、並べられる子ではなく、並べ方を決める親のコンテナーに書きます。

17
00:01:17.429 --> 00:01:22.436
親がディスプレイ、フレックスで項目を並べ、その親に対して折り返しを許可する、

18
00:01:22.436 --> 00:01:27.443
という役割分担を覚えてください。

19
00:01:27.443 --> 00:01:36.344
子に一つずつ書いても全体の折り返しは変わらないので、まずは親子関係を確認する習慣をつけましょう。

20
00:01:36.344 --> 00:01:38.831
指定できる主な値を確認します。

21
00:01:38.831 --> 00:01:43.638
ノーラップは折り返さず、すべての項目を一つの行に並べます。

22
00:01:43.638 --> 00:01:48.943
入りきらない場合は、項目が縮むか、親からはみ出すことがあります。

23
00:01:48.943 --> 00:01:55.243
ラップは、主軸の幅に入りきらない項目を次の行へ送り、複数行に分けて並べます。

24
00:01:55.243 --> 00:01:58.890
これが、カード一覧などで最もよく使う値です。

25
00:01:58.890 --> 00:02:05.024
ラップ・リバースも折り返しますが、行が積み重なる方向が通常と逆になります。

26
00:02:05.024 --> 00:02:09.334
見た目の上下が入れ替わるため、使う場面は限られます。

27
00:02:09.334 --> 00:02:17.292
まずはノーラップとラップの違いをしっかり押さえ、リバースはそういう値もあると覚えておきましょう。

28
00:02:17.292 --> 00:02:19.361
初期値と継承を確認します。

29
00:02:19.361 --> 00:02:22.863
フレックス・ラップの初期値はノーラップです。

30
00:02:22.863 --> 00:02:28.275
つまり、何も指定しなければ、項目は折り返さずに一列へ並ぼうとします。

31
00:02:28.275 --> 00:02:32.572
カードが勝手に下へ落ちないのは、この初期値のためです。

32
00:02:32.572 --> 00:02:38.780
通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。

33
00:02:38.780 --> 00:02:42.441
折り返したいコンテナーごとに指定してください。

34
00:02:42.441 --> 00:02:48.648
また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。

35
00:02:48.648 --> 00:02:53.264
ブラウザーの既定スタイルや別のクラスが重なると見た目が変わることもあるので、

36
00:02:53.264 --> 00:02:57.880
最終的には開発者ツールで確認しましょう。

37
00:02:57.880 --> 00:03:00.015
折り返しの仕組みを整理します。

38
00:03:00.015 --> 00:03:03.005
初期状態の横並びでは、主軸は左右方向です。

39
00:03:03.005 --> 00:03:07.204
項目を左から順に置いていき、親の幅を使い切ると、ラップを指定した場合だけ、

40
00:03:07.204 --> 00:03:11.403
残りの項目が次の行の左から再び並び始めます。

41
00:03:11.403 --> 00:03:16.101
こうして行が増えると、項目は交差軸である上下方向へ積み重なります。

42
00:03:16.101 --> 00:03:23.503
行と行の間隔はギャップで空けることができ、複数行全体の上下の配り方はアライン・コンテンツで調整できます。

43
00:03:23.503 --> 00:03:29.766
逆にノーラップでは行は一つだけなので、アライン・コンテンツを指定しても効果が見えません。

44
00:03:29.766 --> 00:03:34.037
折り返しが、複数行レイアウトの入り口になると考えてください。

45
00:03:34.037 --> 00:03:41.012
逆に、一行だけでよいナビゲーションなどでは、あえて折り返さずに並べる方が意図に合うこともあります。

46
00:03:41.012 --> 00:03:42.397
実例を見ていきます。

47
00:03:42.397 --> 00:03:44.891
まずエイチティーエムエルの用意です。

48
00:03:44.891 --> 00:03:49.878
ステージという外側の箱の中にデモがあり、その中に項目が六つ入っています。

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

50
00:03:54.588 --> 00:03:57.082
親と子の構造そのものが例の一部です。

51
00:03:57.082 --> 00:04:03.315
六つの項目は、あとで一つの幅にそろえられるため、親の幅に対して項目の合計が大きくなります。

52
00:04:03.315 --> 00:04:11.212
そのときに、入りきらない項目が下の行へ移るのか、一列に残るのかが、このあとの比較で一目で分かるようになっています。

53
00:04:11.212 --> 00:04:14.952
項目が多いほど、折り返しの効果は観察しやすくなります。

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

55
00:04:19.707 --> 00:04:25.536
デモはディスプレイ、フレックスで横並びにし、ギャップで項目の間隔を空けます。

56
00:04:25.536 --> 00:04:30.368
項目は最初に小さい基準が与えられますが、最後の方でフレックス・ベーシスが7レムに指定され、

57
00:04:30.368 --> 00:04:35.200
一つ一つが横幅を持つようになります。

58
00:04:35.200 --> 00:04:39.879
六つ並べると親の幅を超えるため、主役であるフレックス・ラップ、ラップの指定により、

59
00:04:39.879 --> 00:04:44.557
入りきらない項目が次の行へ折り返します。

60
00:04:44.557 --> 00:04:51.460
土台の指定は違いを見やすくするためのものなので、項目が何行に分かれるかに注目してください。

61
00:04:51.460 --> 00:04:53.491
値を変えて比べてみましょう。

62
00:04:53.491 --> 00:04:58.712
最後のフレックス・ラップの値だけを、ラップからノーラップへ置き換えます。

63
00:04:58.712 --> 00:05:02.628
ファイルを保存してブラウザーを再読み込みすると、複数行に分かれていた項目が、

64
00:05:02.628 --> 00:05:06.544
すべて一つの行に残ろうとします。

65
00:05:06.544 --> 00:05:10.315
幅が足りない分は、項目の並びやはみ出し方に表れます。

66
00:05:10.315 --> 00:05:14.231
エイチティーエムエルや項目の中身は一切変えていません。

67
00:05:14.231 --> 00:05:19.743
ラップは入りきらない分を次の行へ逃がす指定、ノーラップは一列を保つ指定です。

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

69
00:05:23.224 --> 00:05:27.575
ほかの指定を同時に変えると、違いの原因が分からなくなります。

70
00:05:27.575 --> 00:05:35.552
画面幅を少しずつ狭くして、どのタイミングで次の行へ移るかを観察すると、親の幅と項目の幅の関係がよく分かります。

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

72
00:05:37.989 --> 00:05:44.082
記事でも特に注意されているのが、フレックス・シュリンクによる縮小です。

73
00:05:44.082 --> 00:05:48.609
ラップを指定しても、項目が縮んで一行に収まってしまえば、折り返す必要がなくなり、

74
00:05:48.609 --> 00:05:53.135
予想より折り返しません。

75
00:05:53.135 --> 00:06:01.840
そんなときは、子のフレックス・ベーシスやミニマム・ウィドス、つまり最小幅もあわせて確認してください。

76
00:06:01.840 --> 00:06:08.455
ベーシスが小さければ一行に収まりやすく、最小幅が大きければ早く折り返します。

77
00:06:08.455 --> 00:06:11.937
また、このプロパティは親に書く指定です。

78
00:06:11.937 --> 00:06:18.204
子へ設定する指定と混同しないように、対象と書く場所を分けて考えましょう。

79
00:06:18.204 --> 00:06:20.439
効かないときの確認手順です。

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

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

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

83
00:06:40.077 --> 00:06:47.421
コンピューテッドでフレックス・ラップの最終的な値を確認し、あわせて親にディスプレイ、

84
00:06:47.421 --> 00:06:54.765
フレックスがあるか、項目の合計幅が本当に親を超えているか、子が縮んで収まっていないかも調べましょう。

85
00:06:54.765 --> 00:07:00.832
最後に、三百二十ピクセル程度の画面幅でも内容が利用できるか確かめてください。

86
00:07:00.832 --> 00:07:02.554
最後に互換性とまとめです。

87
00:07:02.554 --> 00:07:07.059
フレックス・ラップは、記事ではクローム29以降、エッジ12以降、ファイアフォックス28以降、

88
00:07:07.059 --> 00:07:11.563
サファリ9以降で対応すると紹介されています。

89
00:07:11.563 --> 00:07:18.717
値のラップとノーラップについては、さらに古い版からの記録もありますが、現在の主要ブラウザーでは広く使えます。

90
00:07:18.717 --> 00:07:26.004
練習は、まずラップとノーラップの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

91
00:07:26.004 --> 00:07:26.799
まとめます。

92
00:07:26.799 --> 00:07:32.496
フレックス・ラップは折り返しの有無を決める指定で、初期値はノーラップ、継承はしません。

93
00:07:32.496 --> 00:07:33.688
お疲れさまでした。

94
00:07:33.688 --> 00:07:37.530
関連するフレックス・ディレクションやジャスティファイ・コンテンツもあわせて確認すると、

95
00:07:37.530 --> 00:07:41.372
配置の理解がさらに深まります。