WEBVTT

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

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

3
00:00:03.801 --> 00:00:06.810
今回のテーマは、アライン・セルフです。

4
00:00:06.810 --> 00:00:14.728
これはフレックスボックスやグリッドの中で、特定の項目だけ、交差軸方向の揃え方を変えるプロパティです。

5
00:00:14.728 --> 00:00:19.558
親に指定するアライン・アイテムズは、すべての項目をまとめて揃えますが、アライン・セルフは、

6
00:00:19.558 --> 00:00:24.388
対象の項目ひとつだけに効きます。

7
00:00:24.388 --> 00:00:28.426
たとえばほかの項目は上に揃えたまま、このカードだけ下端や中央に置きたい、

8
00:00:28.426 --> 00:00:32.464
といった細かな調整ができます。

9
00:00:32.464 --> 00:00:36.898
横並びなら上下方向、縦並びなら左右方向が対象になります。

10
00:00:36.898 --> 00:00:43.708
基本の書き方、値の意味、実例での動き、効かないときの確認まで、順番に見ていきましょう。

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

12
00:00:45.439 --> 00:00:51.102
セレクターのあとに、アライン・セルフ、コロン、値、セミコロンを書きます。

13
00:00:51.102 --> 00:00:57.709
スライドの例では、デモというクラスを持つ項目に、フレックス・エンドを指定しています。

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

15
00:01:00.069 --> 00:01:08.407
アライン・セルフは親ではなく、位置を変えたい子、つまりフレックスアイテムやグリッドアイテム自身に書きます。

16
00:01:08.407 --> 00:01:14.857
親にはあらかじめ、ディスプレイ、フレックスやグリッドを指定しておく必要があります。

17
00:01:14.857 --> 00:01:21.936
親が全体の並べ方を用意し、子が自分の位置を上書きする、という役割分担をまず覚えてください。

18
00:01:21.936 --> 00:01:27.128
値にピクセルなどの単位は付けず、キーワードで指定する点も特徴です。

19
00:01:27.128 --> 00:01:29.823
指定できる主な値を整理します。

20
00:01:29.823 --> 00:01:35.573
フレックス・スタートは交差軸の開始側、横並びなら上側に寄ります。

21
00:01:35.573 --> 00:01:40.424
フレックス・エンドは終了側、横並びなら下側に寄ります。

22
00:01:40.424 --> 00:01:42.760
センターは中央に置きます。

23
00:01:42.760 --> 00:01:50.486
ベースラインは、文字のベースライン、つまり文字が乗る見えない線でほかの項目と揃えます。

24
00:01:50.486 --> 00:01:57.494
ストレッチは、項目の大きさが決まっていないときに、交差軸いっぱいに伸ばします。

25
00:01:57.494 --> 00:02:02.255
グリッドでは、スタートやエンドという書き方も使えますが、考え方は同じで、

26
00:02:02.255 --> 00:02:07.017
セルの中でどこに置くかを表します。

27
00:02:07.017 --> 00:02:11.868
まずは上、中央、下の三つから覚えると分かりやすいです。

28
00:02:11.868 --> 00:02:15.176
少し特殊な二つの値を、もう少し詳しく見ます。

29
00:02:15.176 --> 00:02:19.161
オートは、アライン・セルフの初期の状態で、親のアライン・アイテムズの値をそのまま引き継ぐ、

30
00:02:19.161 --> 00:02:23.145
という意味です。

31
00:02:23.145 --> 00:02:28.107
親に何も指定がなければ、結果としてストレッチに近い扱いになります。

32
00:02:28.107 --> 00:02:31.114
ストレッチは便利ですが、条件があります。

33
00:02:31.114 --> 00:02:36.227
たとえば横並びで高さがすでに決まっている項目は、それ以上伸びません。

34
00:02:36.227 --> 00:02:41.339
幅や高さを固定していない項目だけが、空いた領域いっぱいに広がります。

35
00:02:41.339 --> 00:02:45.248
オートに戻せば親全体の設定に従う、ストレッチは大きさが未指定のときだけ伸びる、

36
00:02:45.248 --> 00:02:49.158
とセットで覚えてください。

37
00:02:49.158 --> 00:02:53.368
迷ったら、まずオートで親の動きを確認するとよいでしょう。

38
00:02:53.368 --> 00:02:55.669
初期値と継承を確認します。

39
00:02:55.669 --> 00:02:57.438
初期値はオートです。

40
00:02:57.438 --> 00:03:03.455
何も指定しなければ、項目は親のアライン・アイテムズに従って揃います。

41
00:03:03.455 --> 00:03:05.933
そして通常の継承はしません。

42
00:03:05.933 --> 00:03:12.658
親要素にアライン・セルフを書いても、子へ自動で受け継がれることはありません。

43
00:03:12.658 --> 00:03:20.975
あくまで、フレックスやグリッドの直接の子である項目ごとに指定するプロパティだと考えてください。

44
00:03:20.975 --> 00:03:25.577
またイニシャルを指定すると初期値のオートに戻ります。

45
00:03:25.577 --> 00:03:31.947
インヘリットなどの共通キーワードの考え方は、ほかのプロパティと同じです。

46
00:03:31.947 --> 00:03:36.372
親全体はアライン・アイテムズ、個別の上書きはアライン・セルフ、という使い分けが、

47
00:03:36.372 --> 00:03:40.796
この項目の要点です。

48
00:03:40.796 --> 00:03:42.406
実例を見ていきます。

49
00:03:42.406 --> 00:03:45.305
まずエイチティーエムエルの用意です。

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

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

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

53
00:04:02.536 --> 00:04:05.435
親と子の構造そのものが例の一部です。

54
00:04:05.435 --> 00:04:11.715
この例では、二番目に書かれた対象だけを、シーエスエスで下端や中央へ動かします。

55
00:04:11.715 --> 00:04:18.962
三つの項目は横並びになる想定で、まずはすべて同じ揃え方になっている状態がスタート地点です。

56
00:04:18.962 --> 00:04:22.344
対象だけがどうずれるかに注目してください。

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

58
00:04:27.515 --> 00:04:34.186
ステージはディスプレイ、フレックスとし、隙間はれい点ごレム、項目は横に並びます。

59
00:04:34.186 --> 00:04:39.190
ステージには高さの目安も用意し、上下に動ける余白を作ります。

60
00:04:39.190 --> 00:04:45.361
ステージや項目には、余白や枠線、背景色といった土台の見た目を先に整えます。

61
00:04:45.361 --> 00:04:52.033
そして主役は最後の行で、デモにアライン・セルフ、フレックス・エンドを指定します。

62
00:04:52.033 --> 00:04:56.369
すると二番目の対象だけが下端へ移動して表示されます。

63
00:04:56.369 --> 00:04:59.038
ほかの二つは元の位置のままです。

64
00:04:59.038 --> 00:05:03.375
土台は共通なので、最後の指定だけに注目してください。

65
00:05:03.375 --> 00:05:09.546
枠線が太く背景が付いた対象が下に来るので、動いたことがひと目で分かります。

66
00:05:09.546 --> 00:05:12.040
値を変えて比べてみましょう。

67
00:05:12.040 --> 00:05:19.346
最後のアライン・セルフの値だけを、フレックス・エンドから、センターへ置き換えます。

68
00:05:19.346 --> 00:05:23.889
ファイルを保存してブラウザーを再読み込みすると、二番目に書かれた対象が、

69
00:05:23.889 --> 00:05:28.432
今度は上下の中央へ移動します。

70
00:05:28.432 --> 00:05:31.283
ほかの項目の位置は変わりません。

71
00:05:31.283 --> 00:05:35.025
エイチティーエムエルは一切変えていません。

72
00:05:35.025 --> 00:05:43.221
値ひとつで、端に置くか中央に置くかが切り替わる点が、アライン・セルフの分かりやすい特徴です。

73
00:05:43.221 --> 00:05:48.210
比較のコツは、変えるのはこの値ひとつだけにすることです。

74
00:05:48.210 --> 00:05:56.584
下端のフレックス・エンドと、中央のセンター、この二つを比べるだけでも、働きは十分につかめます。

75
00:05:56.584 --> 00:05:58.785
間違えやすい点を整理します。

76
00:05:58.785 --> 00:06:01.616
いちばん多いのは、親と子の混同です。

77
00:06:01.616 --> 00:06:06.490
アライン・セルフを親に書いても、項目の個別指定にはなりません。

78
00:06:06.490 --> 00:06:14.353
親全体を揃えたいときはアライン・アイテムズ、ひとつだけ変えたいときは子のアライン・セルフを使います。

79
00:06:14.353 --> 00:06:21.114
もう一つ、親がフレックスやグリッドになっていないと、アライン・セルフ自体が効きません。

80
00:06:21.114 --> 00:06:28.505
さらに、ストレッチを指定しても、項目の高さや幅が固定されていると伸びない点も注意してください。

81
00:06:28.505 --> 00:06:34.952
余白を作るマージンのオート指定と組み合わせた場合も、見え方が変わることがあります。

82
00:06:34.952 --> 00:06:38.411
誰に、何を書いたかを確認する習慣が大切です。

83
00:06:38.411 --> 00:06:40.307
効かないときの確認手順です。

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

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

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

87
00:06:56.961 --> 00:07:01.971
コンピューテッドで最終的なアライン・セルフの値を確認し、親の表示方式がフレックスかグリッドになっているか、

88
00:07:01.971 --> 00:07:06.981
親に十分な高さや幅があるかも調べましょう。

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

90
00:07:13.480 --> 00:07:17.271
ひとつずつ切り分けることで、原因を特定しやすくなります。

91
00:07:17.271 --> 00:07:19.229
最後に互換性とまとめです。

92
00:07:19.229 --> 00:07:23.522
フレックスボックスのアライン・セルフは、現在の主要ブラウザーで広く対応しており、

93
00:07:23.522 --> 00:07:27.815
グリッドでも同じ考え方で使えます。

94
00:07:27.815 --> 00:07:37.154
古いブラウザーではベンダープレフィックスが必要だった時期もありますが、学習用の現代的な環境では標準の書き方で問題ありません。

95
00:07:37.154 --> 00:07:45.288
練習は、まずフレックス・エンドとセンターの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。

96
00:07:45.288 --> 00:07:46.192
まとめます。

97
00:07:46.192 --> 00:07:50.410
アライン・セルフは、親のアライン・アイテムズを、項目ひとつだけ上書きする指定で、

98
00:07:50.410 --> 00:07:54.628
初期値はオート、継承はしません。

99
00:07:54.628 --> 00:08:01.255
関連するアライン・アイテムズやアライン・コンテンツもあわせて確認すると理解が深まります。

100
00:08:01.255 --> 00:08:02.611
お疲れさまでした。