WEBVTT

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

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

3
00:00:03.589 --> 00:00:07.177
今回のテーマは、フレックス・ディレクションです。

4
00:00:07.177 --> 00:00:13.756
これは、フレックスボックスで並べる項目が、どの向きに進んでいくかを決めるプロパティです。

5
00:00:13.756 --> 00:00:23.026
横向きに並べればナビゲーションのような一行のメニューになり、縦向きに並べればスマートフォン向けのリストのような形になります。

6
00:00:23.026 --> 00:00:29.605
並びの向きは、このあと学ぶ余白の配り方や揃え方の効き方にも関わる、レイアウトの土台です。

7
00:00:29.605 --> 00:00:34.689
この動画では、代表的な値であるカラムとロウを比べて違いを確認します。

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

9
00:00:39.923 --> 00:00:44.707
例えば、パソコンでは横並びのメニューを、画面の狭いスマートフォンでは縦並びに切り替える、

10
00:00:44.707 --> 00:00:49.492
といった使い分けの出発点になる指定です。

11
00:00:49.492 --> 00:00:51.258
まず基本の書き方です。

12
00:00:51.258 --> 00:00:57.842
セレクターのあとに、フレックス・ディレクション、コロン、値、セミコロンを書きます。

13
00:00:57.842 --> 00:01:03.622
スライドの例では、デモというクラスを持つ要素に、カラムを指定しています。

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

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

16
00:01:12.454 --> 00:01:16.950
親がディスプレイ、フレックスで並び方を用意し、その親に対して進む向きを指定する、

17
00:01:16.950 --> 00:01:21.446
という役割分担を覚えてください。

18
00:01:21.446 --> 00:01:28.832
子に一つずつ書いても全体の向きは変わらないので、まずは親子関係を確認する習慣をつけましょう。

19
00:01:28.832 --> 00:01:31.428
指定できる主な値を確認します。

20
00:01:31.428 --> 00:01:33.158
全部で四つあります。

21
00:01:33.158 --> 00:01:37.485
ロウは左から右へ横に並べる値で、最も基本の形です。

22
00:01:37.485 --> 00:01:43.542
ロウ・リバースも横並びですが、進む向きが逆になり、右から左へ並びます。

23
00:01:43.542 --> 00:01:49.425
カラムは上から下へ縦に並べる値で、項目を積み重ねたいときに使います。

24
00:01:49.425 --> 00:01:53.925
カラム・リバースも縦並びですが、下から上へ進みます。

25
00:01:53.925 --> 00:02:00.847
迷ったときは、項目を読ませたい順番に沿って進む向きを選ぶと分かりやすくなります。

26
00:02:00.847 --> 00:02:06.558
まずはロウとカラムで、横か縦かという大きな違いを押さえてください。

27
00:02:06.558 --> 00:02:14.172
リバースの二つは、順番の見え方が変わる値として、このあと注意点とあわせて理解しましょう。

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

29
00:02:16.200 --> 00:02:19.787
フレックス・ディレクションの初期値はロウです。

30
00:02:19.787 --> 00:02:24.778
つまり、何も指定しなければ、項目は左から右へ横に並ぼうとします。

31
00:02:24.778 --> 00:02:28.989
横並びが勝手に縦にならないのは、この初期値のためです。

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

33
00:02:35.072 --> 00:02:38.815
向きを決めたいコンテナーごとに指定してください。

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

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

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

37
00:02:53.944 --> 00:02:56.521
主軸と交差軸の考え方を整理します。

38
00:02:56.521 --> 00:03:01.826
項目が進んでいく方向を主軸、それと直角に交わる方向を交差軸と呼びます。

39
00:03:01.826 --> 00:03:05.918
ロウのとき主軸は横向きなので、項目は左右に広がります。

40
00:03:05.918 --> 00:03:10.466
カラムに変えると主軸は縦向きになり、項目は上下に広がります。

41
00:03:10.466 --> 00:03:15.543
ここが大事なポイントで、主軸が入れ替わると、ジャスティファイ・コンテンツが効く方向と、

42
00:03:15.543 --> 00:03:20.621
アライン・アイテムズが効く方向も入れ替わります。

43
00:03:20.621 --> 00:03:24.411
向きを決める指定は、単に並びを変えるだけでなく、その後の揃え方すべての前提になる、

44
00:03:24.411 --> 00:03:28.200
と考えてください。

45
00:03:28.200 --> 00:03:35.324
向きを先に決めてから揃え方を考えると、指定同士がぶつからず、意図した配置を作りやすくなります。

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

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

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

49
00:03:45.668 --> 00:03:50.841
一つ目は短い、二つ目は少し長い文章、三つ目は項目という中身です。

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

51
00:03:56.336 --> 00:03:59.245
親と子の構造そのものが例の一部です。

52
00:03:59.245 --> 00:04:09.105
三つの項目は文字数が少しずつ違うため、あとで縦に並ぶか横に並ぶかで、大きさや余白の見え方の違いが分かりやすくなっています。

53
00:04:09.105 --> 00:04:12.984
中身は変えず、向きだけを比べる準備をしましょう。

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

55
00:04:17.597 --> 00:04:23.549
デモはディスプレイ、フレックスで並び方を用意し、ギャップで項目の間隔を空けます。

56
00:04:23.549 --> 00:04:27.417
項目にはフレックスで基準の大きさが与えられています。

57
00:04:27.417 --> 00:04:32.402
そのうえで、主役であるフレックス・ディレクション、カラムの指定により、三つの項目は横ではなく、

58
00:04:32.402 --> 00:04:37.387
上から下へ縦に積み重なって表示されます。

59
00:04:37.387 --> 00:04:42.371
土台の指定は違いを見やすくするためのものなので、項目が縦一列に並んでいること、

60
00:04:42.371 --> 00:04:47.356
そして間隔が上下方向に空いていることに注目してください。

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

62
00:04:49.324 --> 00:04:54.524
最後のフレックス・ディレクションの値だけを、カラムからロウへ置き換えます。

63
00:04:54.524 --> 00:04:58.319
ファイルを保存してブラウザーを再読み込みすると、縦に積み重なっていた項目が、

64
00:04:58.319 --> 00:05:02.113
左から右へ横一列に並び直します。

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

66
00:05:05.908 --> 00:05:09.984
カラムは主軸を縦にする指定、ロウは主軸を横にする指定です。

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

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

69
00:05:17.574 --> 00:05:23.336
画面幅を変えたときの収まり方もあわせて観察すると、向きと幅の関係がよく分かります。

70
00:05:23.336 --> 00:05:25.359
間違えやすい点を整理します。

71
00:05:25.359 --> 00:05:29.116
記事でも特に注意されているのが、リバース系の値です。

72
00:05:29.116 --> 00:05:34.752
ロウ・リバースやカラム・リバースを使うと、画面上の見た目の順番は逆になります。

73
00:05:34.752 --> 00:05:40.026
しかし、エイチティーエムエルに書かれた順序そのものは変わりませんし、キーボードで項目を移動する順番も、

74
00:05:40.026 --> 00:05:45.301
見た目に合わせて逆になるわけではありません。

75
00:05:45.301 --> 00:05:50.792
つまり、目で見る順番と、操作や読み上げの順番がずれてしまうおそれがあります。

76
00:05:50.792 --> 00:05:58.884
本当に順番を変えたいときは、見た目だけを逆にするのではなく、エイチティーエムエルの並び自体を見直す方が安全です。

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

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

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

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

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

82
00:06:24.561 --> 00:06:29.545
フレックスがあるかどうかも調べましょう。

83
00:06:29.545 --> 00:06:35.284
この指定は親に書くものなので、子へ書いていないかという点も見直してください。

84
00:06:35.284 --> 00:06:42.232
最後に、三百二十ピクセル程度の画面幅やキーボード操作でも内容を利用できるか確かめてください。

85
00:06:42.232 --> 00:06:43.993
最後に互換性とまとめです。

86
00:06:43.993 --> 00:06:48.868
フレックス・ディレクションは、記事ではクローム29以降、エッジ12以降、

87
00:06:48.868 --> 00:06:53.743
ファイアフォックス22以降、サファリ9以降で対応すると紹介されています。

88
00:06:53.743 --> 00:07:00.650
値のロウとカラムについては、さらに古い版からの記録もありますが、現在の主要ブラウザーでは広く使えます。

89
00:07:00.650 --> 00:07:07.692
練習は、まずカラムとロウの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べることです。

90
00:07:07.692 --> 00:07:08.504
まとめます。

91
00:07:08.504 --> 00:07:14.192
フレックス・ディレクションは主軸の向きを決める指定で、初期値はロウ、継承はしません。

92
00:07:14.192 --> 00:07:15.411
お疲れさまでした。

93
00:07:15.411 --> 00:07:19.068
関連するフレックス・ラップやジャスティファイ・コンテンツもあわせて確認すると、

94
00:07:19.068 --> 00:07:22.724
配置の理解がさらに深まります。