WEBVTT

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

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

3
00:00:04.037 --> 00:00:07.569
今回のテーマは、アライン・アイテムズです。

4
00:00:07.569 --> 00:00:16.147
これは、フレックスボックスやグリッドで並べた項目を、交差軸の方向へどう揃えるかを決めるプロパティです。

5
00:00:16.147 --> 00:00:21.529
横並びなら上下の揃え方、縦並びなら左右の揃え方が対象になります。

6
00:00:21.529 --> 00:00:25.734
高さの違う項目が並んだときに、上に寄せるか、中央にそろえるか、引き伸ばすかが、

7
00:00:25.734 --> 00:00:29.939
この一行で変わります。

8
00:00:29.939 --> 00:00:37.844
この動画では、中央に寄せるセンターと、引き伸ばすストレッチを比べて、見た目の違いを確認します。

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

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

11
00:00:46.617 --> 00:00:53.100
セレクターのあとに、アライン・アイテムズ、コロン、値、セミコロンを書きます。

12
00:00:53.100 --> 00:00:59.242
スライドの例では、デモというクラスを持つ要素にセンターを指定しています。

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

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

15
00:01:08.625 --> 00:01:13.914
親がフレックスやグリッドとして項目を並べ、その交差軸方向の位置をこの一行でまとめて調整する、

16
00:01:13.914 --> 00:01:19.203
という役割分担を覚えてください。

17
00:01:19.203 --> 00:01:26.198
子に書いてもほかの項目は動かないので、まずは親子関係を確認する習慣をつけましょう。

18
00:01:26.198 --> 00:01:28.928
書き方自体はとてもシンプルです。

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

20
00:01:31.296 --> 00:01:37.136
ストレッチは、項目の大きさが自動のときに、交差軸いっぱいに引き伸ばします。

21
00:01:37.136 --> 00:01:41.397
スタートは開始側の端へ、エンドは終了側の端へ寄せます。

22
00:01:41.397 --> 00:01:43.607
センターは中央にそろえます。

23
00:01:43.607 --> 00:01:48.579
ベースラインは、項目の中の文字の基準線が一直線になるようにそろえる値で、

24
00:01:48.579 --> 00:01:53.551
文字の大きさが違う項目を並べるときに違いが分かります。

25
00:01:53.551 --> 00:02:00.022
フレックスでは、フレックス・スタートやフレックス・エンドという書き方も使われます。

26
00:02:00.022 --> 00:02:08.388
どの値も、項目そのものの大きさではなく、交差軸のどこへ置くかを決める指定だと考えると整理しやすくなります。

27
00:02:08.388 --> 00:02:10.461
初期値と継承を確認します。

28
00:02:10.461 --> 00:02:13.970
アライン・アイテムズの初期値はノーマルです。

29
00:02:13.970 --> 00:02:23.219
ノーマルは多くの場面でストレッチに近い振る舞いとして解釈されますが、値そのものはノーマルである点に注意してください。

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

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

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

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

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

35
00:02:48.736 --> 00:02:50.637
軸の考え方を整理します。

36
00:02:50.637 --> 00:02:57.605
フレックスボックスには、項目が並ぶ方向である主軸と、それに直角に交わる交差軸があります。

37
00:02:57.605 --> 00:03:01.723
アライン・アイテムズが担当するのは交差軸の方向です。

38
00:03:01.723 --> 00:03:08.058
初期状態の横並びでは主軸が左右、交差軸は上下になるので、上下の揃え方を決めます。

39
00:03:08.058 --> 00:03:12.889
ところが、フレックス・ディレクションで縦並びに変えると主軸と交差軸が入れ替わり、

40
00:03:12.889 --> 00:03:17.719
今度は左右の揃え方を決める指定になります。

41
00:03:17.719 --> 00:03:21.837
同じセンターでも、軸が変われば動く方向が変わります。

42
00:03:21.837 --> 00:03:28.964
効かないと感じたときは、まず今の並び方向で交差軸がどちらを向いているかを確認してください。

43
00:03:28.964 --> 00:03:30.684
実例を見ていきます。

44
00:03:30.684 --> 00:03:33.779
まずエイチティーエムエルの用意です。

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

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

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

48
00:03:48.912 --> 00:03:56.135
二つ目の項目だけ文章が二行に分かれているので、三つの項目は自然と高さがそろいません。

49
00:03:56.135 --> 00:04:01.638
高さが違うからこそ、このあとアライン・アイテムズで中央に寄せたり引き伸ばしたりしたときの違いが、

50
00:04:01.638 --> 00:04:07.141
一目で分かるようになっています。

51
00:04:07.141 --> 00:04:11.784
項目の数は少なくても、揃い方の観察には十分な構成です。

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

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

54
00:04:22.626 --> 00:04:29.226
最小の高さは10レムと大きめに取り、項目が上下に動ける余白を意図的につくっています。

55
00:04:29.226 --> 00:04:33.468
項目の幅は、フレックスの指定で3レムに固定しています。

56
00:04:33.468 --> 00:04:42.425
そして主役は最後の行で、アライン・アイテムズにセンターを指定し、高さの違う三つの項目を上下の中央へそろえています。

57
00:04:42.425 --> 00:04:46.039
土台の指定は違いを見やすくするためのものです。

58
00:04:46.039 --> 00:04:50.596
緑色の背景の領域の中で、項目の上下位置に注目してください。

59
00:04:50.596 --> 00:04:52.821
値を変えて比べてみましょう。

60
00:04:52.821 --> 00:04:58.862
最後のアライン・アイテムズの値だけを、センターからストレッチへ置き換えます。

61
00:04:58.862 --> 00:05:04.425
ファイルを保存してブラウザーを再読み込みすると、中央に集まっていた項目が、

62
00:05:04.425 --> 00:05:09.989
コンテナーの高さいっぱいに引き伸ばされて、上端と下端がそろいます。

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

64
00:05:14.281 --> 00:05:21.911
センターは項目本来の高さを保って中央に置く指定、ストレッチは高さをそろえて面をそろえる指定です。

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

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

67
00:05:31.448 --> 00:05:33.622
間違えやすい点を整理します。

68
00:05:33.622 --> 00:05:37.581
まず、子に固定の高さが指定されていると、ストレッチを指定しても引き伸ばす余地がなく、

69
00:05:37.581 --> 00:05:41.541
効果が見えません。

70
00:05:41.541 --> 00:05:46.354
ストレッチが効くのは、交差軸方向の大きさが自動の項目だけです。

71
00:05:46.354 --> 00:05:50.702
次に、アライン・コンテンツとの混同にも注意してください。

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

73
00:05:59.552 --> 00:06:07.160
また、項目を一つだけ違う位置に動かしたいときは、親ではなく、その子にアライン・セルフを指定します。

74
00:06:07.160 --> 00:06:11.508
対象の大きさと書く場所で区別すると間違えにくくなります。

75
00:06:11.508 --> 00:06:13.495
効かないときの確認手順です。

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

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

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

79
00:06:30.957 --> 00:06:37.061
コンピューテッドでアライン・アイテムズの最終的な値を確認し、あわせて親にディスプレイ、

80
00:06:37.061 --> 00:06:43.166
フレックスがあるか、交差軸に余った空間があるか、子に固定の高さがないかも調べましょう。

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

82
00:06:49.696 --> 00:06:51.832
最後に互換性とまとめです。

83
00:06:51.832 --> 00:06:57.499
アライン・アイテムズは、記事ではクローム29以降、エッジ12以降、ファイアフォックス20以降、

84
00:06:57.499 --> 00:07:03.167
サファリ9以降で対応すると紹介されています。

85
00:07:03.167 --> 00:07:12.039
フレックスの文脈とグリッドの文脈で細かな対応開始の記録は異なりますが、現在の主要ブラウザーでは広く使えます。

86
00:07:12.039 --> 00:07:21.403
練習は、まずセンターとストレッチの違いを自分の言葉で説明し、次に文章量や親の高さだけを変えて結果を比べることです。

87
00:07:21.403 --> 00:07:22.388
まとめます。

88
00:07:22.388 --> 00:07:27.810
アライン・アイテムズは交差軸方向の項目の揃え方で、継承はしません。

89
00:07:27.810 --> 00:07:29.288
お疲れさまでした。

90
00:07:29.288 --> 00:07:33.806
関連するジャスティファイ・コンテンツやアライン・コンテンツもあわせて確認すると、

91
00:07:33.806 --> 00:07:38.324
配置の理解がさらに深まります。