WEBVTT

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

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

3
00:00:03.132 --> 00:00:05.872
今回のテーマは、プレイス・アイテムズです。

4
00:00:05.872 --> 00:00:10.309
グリッドでカードを並べたとき、一つひとつのカードがセルの真ん中に来てほしい、

5
00:00:10.309 --> 00:00:14.745
あるいはセルいっぱいに広がってほしい、と思う場面があります。

6
00:00:14.745 --> 00:00:20.487
このプロパティは、縦方向の揃え方と横方向の揃え方を、まとめて一行で決めるためのものです。

7
00:00:20.487 --> 00:00:25.837
もとの二つのプロパティを別々に書く代わりに、短く書ける便利な形だと覚えてください。

8
00:00:25.837 --> 00:00:31.448
カードが中央へ寄る様子と、領域へ伸びる様子の違いを比べながら、順番に見ていきましょう。

9
00:00:31.448 --> 00:00:37.972
たとえばログイン画面の小さなパネルを画面の真ん中に置くような場面でも、この発想がそのまま役立ちます。

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

11
00:00:39.613 --> 00:00:43.418
書き方はほかのプロパティと同じで、対象のセレクターに、プロパティ名、コロン、

12
00:00:43.418 --> 00:00:47.222
値、セミコロンを書きます。

13
00:00:47.222 --> 00:00:54.085
スライドの例では、クラス名デモを持つ要素に、プレイス・アイテムズ、センターと指定しています。

14
00:00:54.085 --> 00:00:59.456
センターは中央という意味で、これで子要素がセルの縦横の中央に置かれます。

15
00:00:59.456 --> 00:01:03.932
大切なのは、動かしたい子ではなく、並べる側の親に書く点です。

16
00:01:03.932 --> 00:01:10.348
まずはこの一行を書いて、カードの位置がどう変わるかをブラウザーで確かめてみてください。

17
00:01:10.348 --> 00:01:17.360
一行で済むぶん、後から読み返したときにも、縦横をそろえる意図がひと目で伝わる書き方になります。

18
00:01:17.360 --> 00:01:20.953
指定できる主な値を、二回に分けて整理します。

19
00:01:20.953 --> 00:01:22.912
まず中心となる二つです。

20
00:01:22.912 --> 00:01:26.832
センターは、項目をセルの縦と横の中央へ寄せます。

21
00:01:26.832 --> 00:01:32.220
項目は自分の大きさを保ったまま、真ん中に小さく収まるイメージです。

22
00:01:32.220 --> 00:01:36.793
ストレッチは逆に、項目をセルの領域いっぱいに伸ばします。

23
00:01:36.793 --> 00:01:41.855
カードの高さや幅がそろって見えるのは、こちらを選んだときです。

24
00:01:41.855 --> 00:01:47.571
同じ並びでも、中央に集めるか、枠まで広げるかで印象は大きく変わります。

25
00:01:47.571 --> 00:01:53.613
この二つの違いを自分の言葉で言い分けられることが、理解の第一歩になります。

26
00:01:53.613 --> 00:01:58.022
高さの違うカードを並べたとき、この差は特に目立ちます。

27
00:01:58.022 --> 00:02:02.268
そろえたいのか、遊ばせたいのかを先に決めてください。

28
00:02:02.268 --> 00:02:05.620
続いて、端へ寄せる値と、値の書き方です。

29
00:02:05.620 --> 00:02:10.145
スタートは始まり側、エンドは終わり側へ項目を寄せます。

30
00:02:10.145 --> 00:02:12.994
そして書き方には決まりがあります。

31
00:02:12.994 --> 00:02:17.519
値を一つだけ書くと、その指定が縦と横の両方に効きます。

32
00:02:17.519 --> 00:02:26.736
値を二つ書くと、最初が縦方向のアライン・アイテムズ、次が横方向のジャスティファイ・アイテムズとして扱われます。

33
00:02:26.736 --> 00:02:32.602
たとえばセンター、スタートと書けば、縦は中央、横は始端寄せになります。

34
00:02:32.602 --> 00:02:40.814
順番を逆にすると結果も変わるので、二つ書くときほど、縦が先、横が後、と声に出して確認してください。

35
00:02:40.814 --> 00:02:45.003
なお、二つの値が同じときは一つにまとめて書けます。

36
00:02:45.003 --> 00:02:49.696
無理に二つ書く必要はない、という点も覚えておきましょう。

37
00:02:49.696 --> 00:02:51.765
初期値と継承を確認します。

38
00:02:51.765 --> 00:02:57.098
このプロパティ自体の初期値は、元になるアライン・アイテムズとジャスティファイ・アイテムズ、

39
00:02:57.098 --> 00:03:02.430
それぞれの初期値を参照する形になっています。

40
00:03:02.430 --> 00:03:04.659
そして通常の継承はしません。

41
00:03:04.659 --> 00:03:12.140
つまり、親要素に書いたからといって、その指定が子の要素へ自動で引き継がれるわけではありません。

42
00:03:12.140 --> 00:03:16.916
置き方を決めたい並びの親、そのものへ直接書く必要があります。

43
00:03:16.916 --> 00:03:18.349
汎用値も使えます。

44
00:03:18.349 --> 00:03:28.059
インヘリットは親の計算値、イニシャルは初期値に戻す指定、アンセットは継承しないプロパティなのでイニシャルとして扱われます。

45
00:03:28.059 --> 00:03:35.540
そのため、別の並びにも同じ置き方を使いたいときは、それぞれの親へ改めて書き直す必要があります。

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

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

48
00:03:40.435 --> 00:03:48.651
ステージという土台の箱の中にデモの箱を置き、その中に項目と書かれた小さなカードを六つ入れます。

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

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

51
00:03:57.917 --> 00:04:02.724
プレイス・アイテムズを書くのは親であるデモの方で、動くのは子である項目の方、

52
00:04:02.724 --> 00:04:07.532
という役割分担を意識してください。

53
00:04:07.532 --> 00:04:13.126
次のシーエスエスで土台を整えてから、最後に主役の一行を加えます。

54
00:04:13.126 --> 00:04:21.168
項目の数を六つにしたのは、三列で二行の並びになり、縦方向の置き方まで目で追いやすいためです。

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

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

57
00:04:32.385 --> 00:04:36.413
デモにはディスプレイ、グリッドを指定して三列の並びにし、ギャップで間隔を空け、

58
00:04:36.413 --> 00:04:40.441
最小の高さも確保します。

59
00:04:40.441 --> 00:04:47.393
そして最後に、今回変更するプロパティとして、プレイス・アイテムズ、センターを追加します。

60
00:04:47.393 --> 00:04:51.816
これで六つの項目が、それぞれのセルの縦横中央に寄ります。

61
00:04:51.816 --> 00:04:57.503
土台は違いを見せるための下準備で、置き方を決めているのは最後の一行です。

62
00:04:57.503 --> 00:05:02.006
同じデモが複数回登場する場合は、通常は後の同じ詳細度の宣言が優先される、

63
00:05:02.006 --> 00:05:06.508
という決まりも合わせて思い出してください。

64
00:05:06.508 --> 00:05:08.392
値を変えて比べてみましょう。

65
00:05:08.392 --> 00:05:13.504
最後のプレイス・アイテムズの値だけを、センターからストレッチへ置き換えます。

66
00:05:13.504 --> 00:05:17.204
ファイルを保存してブラウザーを再読み込みすると、今度は項目がセルの領域いっぱいに伸びて、

67
00:05:17.204 --> 00:05:20.904
高さと幅がそろいます。

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

69
00:05:24.671 --> 00:05:29.111
ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。

70
00:05:29.111 --> 00:05:35.299
中央に寄っていたカードが、枠まで広がる様子を目で追うと、二つの値の役割がはっきり分かります。

71
00:05:35.299 --> 00:05:38.932
余裕があれば、スタートやエンドへも変えてみてください。

72
00:05:38.932 --> 00:05:42.968
寄る方向が変わる様子まで見ると、値の意味がさらに深まります。

73
00:05:42.968 --> 00:05:45.973
実際の使いどころと注意点を整理します。

74
00:05:45.973 --> 00:05:49.610
このプロパティが力を発揮するのはグリッドです。

75
00:05:49.610 --> 00:05:55.461
セルごとに縦横の置き方を決めるので、中央寄せのような指定が素直に効きます。

76
00:05:55.461 --> 00:05:58.941
一方でフレックスボックスでは注意が必要です。

77
00:05:58.941 --> 00:06:07.322
元のプロパティの一つであるジャスティファイ・アイテムズは、フレックスの主軸方向の揃え方としては働きません。

78
00:06:07.322 --> 00:06:14.281
中央に寄らないからと値を疑う前に、まず親の表示方式がグリッドかどうかを確認してください。

79
00:06:14.281 --> 00:06:22.188
縦横をそろえたいのか、一方向だけでよいのか、目的に合わせて元のプロパティを分けて書く場面もあります。

80
00:06:22.188 --> 00:06:31.044
名前が似たジャスティファイ・コンテントとの混同も起きやすいので、項目そのものの置き方かどうかで見分けてください。

81
00:06:31.044 --> 00:06:33.265
効かないときの確認手順です。

82
00:06:33.265 --> 00:06:37.708
まず親の表示方式がグリッドになっているかを見てください。

83
00:06:37.708 --> 00:06:41.516
ここが違うと、値を変えても置き方は変わりません。

84
00:06:41.516 --> 00:06:52.305
次に開発者ツールで、ネットワークからスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認します。

85
00:06:52.305 --> 00:06:59.604
スタイルズで宣言が無効扱いになっていたり、別の宣言に上書きされたりしていないかも見ましょう。

86
00:06:59.604 --> 00:07:07.537
コンピューテッドで最終的な値を確認し、グリッド表示でトラックの様子を追うと原因を絞りやすくなります。

87
00:07:07.537 --> 00:07:13.249
三百二十ピクセル程度の画面幅でも内容を利用できるかまで確かめてください。

88
00:07:13.249 --> 00:07:17.613
開発者ツールのグリッド表示では、明示したトラックと自動でできたトラックを見分けると、

89
00:07:17.613 --> 00:07:21.976
思わぬ行や列に気付けます。

90
00:07:21.976 --> 00:07:24.101
最後に互換性とまとめです。

91
00:07:24.101 --> 00:07:29.658
主要ブラウザーで広く対応し、クロームは五十九以降、エッジは七十九以降、ファイアフォックスは四十五以降、

92
00:07:29.658 --> 00:07:35.215
サファリは十一以降という記録です。

93
00:07:35.215 --> 00:07:41.263
アンドロイド版クロームは五十九以降、アイオーエス版サファリは十一以降です。

94
00:07:41.263 --> 00:07:46.657
グリッドの文脈でもフレックスの文脈でも、同じ範囲が示されています。

95
00:07:46.657 --> 00:07:55.483
練習は、まずセンターとストレッチの違いを自分の言葉で説明し、次に値だけを一つずつ変えて結果を比べることです。

96
00:07:55.483 --> 00:07:56.464
まとめます。

97
00:07:56.464 --> 00:08:01.041
プレイス・アイテムズは縦と横の一括指定、継承はしません。

98
00:08:01.041 --> 00:08:06.925
親がグリッドであることを確かめてから使う、この順番を忘れないでください。

99
00:08:06.925 --> 00:08:08.396
お疲れさまでした。

100
00:08:08.396 --> 00:08:15.097
次に学ぶジャスティファイ・アイテムズは、このプロパティの片方を単独で担うものです。

101
00:08:15.097 --> 00:08:17.876
合わせて比べると理解が深まります。