WEBVTT

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

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

3
00:00:03.646 --> 00:00:06.837
今回のテーマは、アライン・コンテンツです。

4
00:00:06.837 --> 00:00:14.890
これは、項目が複数行に折り返したときに、行の集まり全体をコンテナーの中でどう配るかを決めるプロパティです。

5
00:00:14.890 --> 00:00:20.359
一行一行の中身ではなく、行全体と余った空間の関係を調整するのが役割です。

6
00:00:20.359 --> 00:00:25.221
この動画では、行を上下いっぱいに広げるスペース・ビトウィーンと、中央に集めるセンターを比べて、

7
00:00:25.221 --> 00:00:30.083
見た目がどう変わるかを確認します。

8
00:00:30.083 --> 00:00:37.073
基本の書き方、主な値、効くための条件、実例、効かないときの確認まで、順番に見ていきましょう。

9
00:00:37.073 --> 00:00:41.934
フレックスボックスでもグリッドでも使える、大切な配置の指定です。

10
00:00:41.934 --> 00:00:47.860
高さに余裕のあるカード一覧やギャラリーで、この違いは特に分かりやすく現れます。

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

12
00:00:49.707 --> 00:00:56.088
セレクターのあとに、アライン・コンテンツ、コロン、値、セミコロンを書きます。

13
00:00:56.088 --> 00:01:03.309
スライドの例では、デモというクラスを持つ要素にスペース・ビトウィーンを指定しています。

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

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

16
00:01:12.545 --> 00:01:17.499
親がフレックスやグリッドとして行を作り、その行の集まり全体の位置をこの一行で調整する、

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

18
00:01:22.453 --> 00:01:29.002
子に書いても行全体は動かないので、まずは親子関係を確認する習慣をつけましょう。

19
00:01:29.002 --> 00:01:34.712
書き方自体はシンプルなので、値の意味を理解することに集中しましょう。

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

21
00:01:37.216 --> 00:01:43.059
スタートは行の集まりを開始側の端へ寄せ、エンドは終了側の端へ寄せます。

22
00:01:43.059 --> 00:01:45.229
センターは中央に集めます。

23
00:01:45.229 --> 00:01:51.406
ストレッチは、行の高さが自動のときに余った空間ぶんだけ行を引き伸ばします。

24
00:01:51.406 --> 00:01:58.585
スペース・ビトウィーンは最初と最後の行を両端に置き、余白を行と行の間へ均等に配ります。

25
00:01:58.585 --> 00:02:06.765
ほかに、周囲へ余白を配るスペース・アラウンドや、全体に均等に配るスペース・イーブンリーもあります。

26
00:02:06.765 --> 00:02:12.775
値の名前は、余白をどこへ置くかを表していると考えると覚えやすくなります。

27
00:02:12.775 --> 00:02:19.620
迷ったときは、端寄せ、中央、均等配分という三つの考え方に分けて選ぶと整理できます。

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

29
00:02:21.585 --> 00:02:24.910
アライン・コンテンツの初期値はノーマルです。

30
00:02:24.910 --> 00:02:34.130
ノーマルは文脈によって扱いが変わり、フレックスやグリッドではストレッチに近い既定の振る舞いとして解釈されることがあります。

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

32
00:02:40.024 --> 00:02:43.651
配置を変えたいコンテナーごとに指定してください。

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

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

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

36
00:02:58.312 --> 00:03:01.483
このプロパティが効く条件を整理します。

37
00:03:01.483 --> 00:03:04.488
第一に、行が複数あることが前提です。

38
00:03:04.488 --> 00:03:12.499
フレックスボックスならフレックス・ラップで折り返しを許可し、項目が二行以上になる必要があります。

39
00:03:12.499 --> 00:03:18.007
第二に、コンテナーの高さなど、交差軸の方向に余った空間が必要です。

40
00:03:18.007 --> 00:03:24.183
行の集まりがコンテナーいっぱいに広がっていると、配る余白自体がありません。

41
00:03:24.183 --> 00:03:28.773
逆に言えば、一行しかない場面や、余白がない場面で値が変わって見えなくても、

42
00:03:28.773 --> 00:03:33.363
書き方が間違っているとは限りません。

43
00:03:33.363 --> 00:03:38.370
条件がそろっているかを先に点検することが、理解への近道です。

44
00:03:38.370 --> 00:03:45.380
グリッドでも考え方は同じで、トラック全体をブロック方向へどう配るかが対象になります。

45
00:03:45.380 --> 00:03:46.922
実例を見ていきます。

46
00:03:46.922 --> 00:03:49.698
まずエイチティーエムエルの用意です。

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

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

49
00:04:00.494 --> 00:04:03.270
親と子の構造そのものが例の一部です。

50
00:04:03.270 --> 00:04:07.666
このあとデモをフレックスボックスにして折り返しを許可するので、六つの項目は幅に収まらず、

51
00:04:07.666 --> 00:04:12.061
複数行に分かれて並びます。

52
00:04:12.061 --> 00:04:17.382
行が複数できる構成だからこそ、アライン・コンテンツで、行全体を広げたり中央に集めたりする違いを、

53
00:04:17.382 --> 00:04:22.703
一つの画面で観察できるようになっています。

54
00:04:22.703 --> 00:04:28.872
項目が六つあることで、折り返し後に行が複数できる様子を確かめやすくなっています。

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

56
00:04:33.892 --> 00:04:41.018
デモはディスプレイ、フレックスで並べ、フレックス・ラップのラップで折り返しを許可します。

57
00:04:41.018 --> 00:04:47.172
高さは18レムと大きめに取り、行の上下に配れる余白を意図的につくっています。

58
00:04:47.172 --> 00:04:53.164
項目のフレックス・ベーシスは7レムなので、六つの項目は複数行に分かれます。

59
00:04:53.164 --> 00:04:58.104
そして主役は最後の行で、アライン・コンテンツにスペース・ビトウィーンを指定し、

60
00:04:58.104 --> 00:05:03.043
最初の行と最後の行を上下の端へ広げています。

61
00:05:03.043 --> 00:05:06.768
土台の指定は違いを見やすくするためのものです。

62
00:05:06.768 --> 00:05:13.084
緑色の背景の領域がコンテナーなので、行がその中でどう動くかに注目してください。

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

64
00:05:15.299 --> 00:05:22.260
最後のアライン・コンテンツの値だけを、スペース・ビトウィーンからセンターへ置き換えます。

65
00:05:22.260 --> 00:05:26.848
ファイルを保存してブラウザーを再読み込みすると、上下に広がっていた行の集まりが、

66
00:05:26.848 --> 00:05:31.436
コンテナーの中央へ寄って集まります。

67
00:05:31.436 --> 00:05:35.866
エイチティーエムエルや項目の大きさは一切変えていません。

68
00:05:35.866 --> 00:05:43.460
広げる指定は高さ全体を使ったゆったりした配置に、中央に集める指定はまとまりのある配置になります。

69
00:05:43.460 --> 00:05:48.206
比較のコツは、いつも通り、変える値を一つだけにすることです。

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

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

72
00:05:55.034 --> 00:05:59.346
もっとも混同しやすいのはアライン・アイテムズとの違いです。

73
00:05:59.346 --> 00:06:08.714
アライン・コンテンツが複数行の集まり全体を対象にするのに対し、アライン・アイテムズは一行の中での各項目の揃い方を対象にします。

74
00:06:08.714 --> 00:06:12.654
たとえば各項目の中身を中央に寄せたい場面でアライン・コンテンツだけを変えても、

75
00:06:12.654 --> 00:06:16.595
期待した動きにはなりません。

76
00:06:16.595 --> 00:06:22.245
また、フレックスの親へ書く指定なのか、子へ書く指定なのかも確認してください。

77
00:06:22.245 --> 00:06:28.788
一行しかないレイアウトで効かないと感じたら、まず行の数と余白の有無を疑うことが大切です。

78
00:06:28.788 --> 00:06:34.884
名前が似ているプロパティほど、対象の大きさの違いで区別すると間違えにくくなります。

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

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

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

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

83
00:06:56.814 --> 00:07:02.096
コンピューテッドでアライン・コンテンツの最終的な値を確認し、あわせて親の表示方式、

84
00:07:02.096 --> 00:07:07.378
折り返しの設定、高さに余りがあるかも調べましょう。

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

86
00:07:14.742 --> 00:07:20.344
一行ずつ条件を直して再読み込みし、変化が出た時点で原因が絞り込めます。

87
00:07:20.344 --> 00:07:22.283
最後に互換性とまとめです。

88
00:07:22.283 --> 00:07:27.430
アライン・コンテンツは、記事ではクローム29以降、エッジ12以降、ファイアフォックス28以降、

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

90
00:07:32.577 --> 00:07:38.171
フレックスの文脈ではクローム21以降、グリッドの文脈ではクローム57以降、

91
00:07:38.171 --> 00:07:43.765
サファリ10.1以降などの記録もあり、現在の主要ブラウザーでは広く使えます。

92
00:07:43.765 --> 00:07:48.389
練習は、まずスペース・ビトウィーンとセンターの違いを自分の言葉で説明し、

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

94
00:07:53.014 --> 00:07:53.909
まとめます。

95
00:07:53.909 --> 00:07:58.683
アライン・コンテンツは複数行全体の余白の配分で、継承はしません。

96
00:07:58.683 --> 00:08:00.025
お疲れさまでした。

97
00:08:00.025 --> 00:08:07.484
関連するアライン・アイテムズやフレックス・ラップもあわせて確認すると、配置の理解がさらに深まります。