WEBVTT

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

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

3
00:00:03.959 --> 00:00:06.599
今回のテーマは、ポジションです。

4
00:00:06.599 --> 00:00:11.713
これは、要素をどこを基準に置くか、そして通常の並びの中に元の場所を残すかどうかを決める、

5
00:00:11.713 --> 00:00:16.827
レイアウトの要になるプロパティです。

6
00:00:16.827 --> 00:00:24.581
値には、スタティック、リラティブ、アブソリュート、フィックスド、スティッキーの五つがあります。

7
00:00:24.581 --> 00:00:29.448
同じ箱でも、値を変えるだけで、普通に並ぶのか、少しずれるのか、親に重なるのか、

8
00:00:29.448 --> 00:00:34.314
画面に固定されるのかが大きく変わります。

9
00:00:34.314 --> 00:00:41.573
この動画では、エー、対象、シーという三つの箱を比べながら、五つの違いを順番に整理します。

10
00:00:41.573 --> 00:00:48.172
値の名前を暗記するより、動きの違いで覚えることが、初心者にとって近道になります。

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

12
00:00:49.829 --> 00:00:54.575
スライドの例では、対象の要素にポジション、リラティブを指定し、トップに二十四ピクセル、

13
00:00:54.575 --> 00:00:59.321
レフトに三十二ピクセルを指定しています。

14
00:00:59.321 --> 00:01:02.937
ポジションが置き方の種類を決め、トップやレフトが、どれだけずらすかを決める、

15
00:01:02.937 --> 00:01:06.553
という役割分担です。

16
00:01:06.553 --> 00:01:10.018
初期値はスタティックで、通常の継承はしません。

17
00:01:10.018 --> 00:01:16.496
親にリラティブを書いても、子が自動でリラティブになるわけではない点に注意してください。

18
00:01:16.496 --> 00:01:21.016
位置を変えたい要素ごとに、ポジションを明示するのが基本です。

19
00:01:21.016 --> 00:01:27.344
書き方に迷ったら、まず対象を一つ決めて、値と移動量をセットで書く習慣を付けましょう。

20
00:01:27.344 --> 00:01:31.711
五つの値を見分けるコツは、三つの質問で考えることです。

21
00:01:31.711 --> 00:01:33.651
一つ目は、どこが基準か。

22
00:01:33.651 --> 00:01:35.915
二つ目は、元の場所が残るか。

23
00:01:35.915 --> 00:01:39.797
三つ目は、スクロールしたときにどう動くか、です。

24
00:01:39.797 --> 00:01:44.163
スタティックは通常の流れで、場所は残り、ずらせません。

25
00:01:44.163 --> 00:01:48.368
リラティブは元の場所を残したまま見た目だけずれます。

26
00:01:48.368 --> 00:01:54.190
アブソリュートとフィックスドは通常の流れから外れ、元の場所は残りません。

27
00:01:54.190 --> 00:02:00.012
スティッキーは元の場所を保ちながら、スクロールに応じて途中で留まります。

28
00:02:00.012 --> 00:02:03.570
この三つの視点があれば、迷いにくくなります。

29
00:02:03.570 --> 00:02:10.524
表で比べるだけでなく、実際の箱がどう動くかをこの後の各セクションで一つずつ確かめます。

30
00:02:10.524 --> 00:02:12.405
最初はスタティックです。

31
00:02:12.405 --> 00:02:17.580
これは初期値で、エー、対象、シーの順に、通常の流れで縦に並びます。

32
00:02:17.580 --> 00:02:21.656
トップに二十四ピクセルと書いても、対象は動きません。

33
00:02:21.656 --> 00:02:27.614
スタティックな要素では、トップやレフトといった移動の指定が効かないからです。

34
00:02:27.614 --> 00:02:33.259
文章やカードのような通常の内容は、まずこの通常フローで置くのが基本です。

35
00:02:33.259 --> 00:02:36.551
内容の量が変わっても破綻しにくいからです。

36
00:02:36.551 --> 00:02:41.961
なお、フレックスやグリッドの子要素では、ゼットインデックスの扱いに例外があるので、

37
00:02:41.961 --> 00:02:47.370
スタティックなら常に無効、と覚え切らないことも大切です。

38
00:02:47.370 --> 00:02:54.112
普段のページ作りでは、ほとんどの要素がこのスタティックのままで自然に配置されています。

39
00:02:54.112 --> 00:02:55.536
次はリラティブです。

40
00:02:55.536 --> 00:03:00.664
対象を本来の位置から右下へずらしますが、移動前の場所はそのまま残ります。

41
00:03:00.664 --> 00:03:07.501
そのため、後ろにあるシーの配置は、対象が動く前を基準に決まり、詰めて寄ってくることはありません。

42
00:03:07.501 --> 00:03:13.768
大きくずらすとほかの箱に重なることもあるので、少しだけ位置を整えたい場面に向いています。

43
00:03:13.768 --> 00:03:18.967
また大事な使い方として、トップなどを書かずにリラティブだけを指定すると、

44
00:03:18.967 --> 00:03:24.166
見た目は変わりませんが、その要素がアブソリュートな子の配置基準になれます。

45
00:03:24.166 --> 00:03:27.015
バッジを重ねる土台として頻繁に使います。

46
00:03:27.015 --> 00:03:33.140
ずらした分だけ重なりや隙間が生まれるので、周りの要素との距離もあわせて確認しましょう。

47
00:03:33.140 --> 00:03:38.436
アブソリュートは、基準となる箱の中へ重ねて配置する方法です。

48
00:03:38.436 --> 00:03:45.673
対象が通常フローから外れるため、元の場所は残らず、エーの次にシーが詰めて並びます。

49
00:03:45.673 --> 00:03:52.557
基準になるのは原則として、ポジションがスタティック以外である最も近い祖先です。

50
00:03:52.557 --> 00:03:57.323
そのような祖先がなければ、もっと外側が基準になります。

51
00:03:57.323 --> 00:04:05.267
スライドの例では、カードにリラティブを指定し、右上のバッジをアブソリュートで重ねています。

52
00:04:05.267 --> 00:04:10.915
注意点は、絶対配置した子だけでは親の高さが確保されないことです。

53
00:04:10.915 --> 00:04:15.858
必要な余白は、親のパディングなどで別に設計してください。

54
00:04:15.858 --> 00:04:23.448
直近の親とは限らない点も重要で、変換などの指定が基準を作る場合もあることを意識します。

55
00:04:23.448 --> 00:04:27.524
フィックスドは、画面の同じ位置へ固定する方法です。

56
00:04:27.524 --> 00:04:32.414
ページをスクロールしても、対象は指定した位置に残り続けます。

57
00:04:32.414 --> 00:04:38.120
スライドの例は、画面の右下から一レムの位置に置く、上へ戻るボタンです。

58
00:04:38.120 --> 00:04:44.315
通常フローに場所を残さないので、固定したヘッダーやフッターが本文を隠してしまわないよう、

59
00:04:44.315 --> 00:04:50.510
本文側に余白を用意し、小さい画面でも読みやすいか確認しましょう。

60
00:04:50.510 --> 00:05:01.106
また例外として、祖先にトランスフォームなどがあると、その祖先が基準になって画面に固定されない場合があることも覚えておいてください。

61
00:05:01.106 --> 00:05:08.116
固定要素は便利ですが、画面が狭い端末では本文を大きく隠しやすい点にも気を付けましょう。

62
00:05:08.116 --> 00:05:14.717
スティッキーは、通常の場所を確保したまま、スクロールに応じて指定位置に留まる方法です。

63
00:05:14.717 --> 00:05:18.171
最初は普通の見出しとして並び、上へスクロールしてトップの位置に達すると、

64
00:05:18.171 --> 00:05:21.625
そこに留まります。

65
00:05:21.625 --> 00:05:25.003
ただし、親の終端が近づくと、親の領域からはみ出さないように押し上げられ、

66
00:05:25.003 --> 00:05:28.380
離れていきます。

67
00:05:28.380 --> 00:05:32.985
フィックスドとの一番の違いが、この親の範囲を超えない点です。

68
00:05:32.985 --> 00:05:37.284
記事の横の目次や、一覧の中の区切り見出しに向いています。

69
00:05:37.284 --> 00:05:45.113
スライドの例では、見出しにスティッキーとトップ、ゼロを指定し、重なり順と背景もあわせて指定しています。

70
00:05:45.113 --> 00:05:52.328
背景色を付けておくと、留まっている間も下の内容が透けて見えず、見出しとして読みやすくなります。

71
00:05:52.328 --> 00:05:55.149
手元で試せる共通の実例を紹介します。

72
00:05:55.149 --> 00:06:02.200
エイチティーエムエルでは、ペアレントという親の中に、エー、対象、シーの三つの箱を並べます。

73
00:06:02.200 --> 00:06:08.154
シーエスエスでは親にリラティブと十分な高さを用意し、対象の箱に色を付けます。

74
00:06:08.154 --> 00:06:13.090
そのうえで、対象のポジションだけを、スタティック、リラティブ、アブソリュート、

75
00:06:13.090 --> 00:06:18.026
フィックスド、スティッキーへ順に変えてください。

76
00:06:18.026 --> 00:06:22.257
まず、対象を動かしたときにシーがどこへ来るかを見ます。

77
00:06:22.257 --> 00:06:27.193
次にページをスクロールして、対象が親について動くか、画面に留まるか、親の終端で離れるかを確認すると、

78
00:06:27.193 --> 00:06:32.129
五つの違いが体感できます。

79
00:06:32.129 --> 00:06:39.180
スクロール量を用意するために、親とその後の領域には十分な高さを持たせておくことがコツです。

80
00:06:39.180 --> 00:06:40.992
効かないときの確認です。

81
00:06:40.992 --> 00:06:46.276
アブソリュートで思った場所に置けないときは、基準になる祖先が意図した要素かどうかを、

82
00:06:46.276 --> 00:06:51.560
開発者ツールで祖先のシーエスエスまでたどって確認します。

83
00:06:51.560 --> 00:06:59.864
スティッキーが留まらないときは、トップがオート以外になっているか、親が短くて動く余地が残っているか、

84
00:06:59.864 --> 00:07:08.168
祖先のオーバーフローが想定と違うスクロールを作っていないか、フレックスやグリッドで対象が引き伸ばされていないかを見ます。

85
00:07:08.168 --> 00:07:11.942
また、ポジションは横並びを作る道具ではありません。

86
00:07:11.942 --> 00:07:16.094
カードの横並びはフレックスやグリッドで作り、重ねるバッジだけをアブソリュートにする構成が、

87
00:07:16.094 --> 00:07:20.246
変化に強くなります。

88
00:07:20.246 --> 00:07:27.040
重なり順で困ったときは、ゼットインデックスの数字だけでなく、重ね合わせの文脈も確認します。

89
00:07:27.040 --> 00:07:28.810
最後に互換性とまとめです。

90
00:07:28.810 --> 00:07:34.391
ポジションは、クローム一以降、エッジ十二以降、ファイアフォックス一以降、

91
00:07:34.391 --> 00:07:39.972
サファリ一以降で対応すると紹介されており、主要ブラウザーで古くから使える基本プロパティです。

92
00:07:39.972 --> 00:07:40.788
まとめます。

93
00:07:40.788 --> 00:07:46.438
スタティックは通常の流れ、リラティブは場所を残してずらす、アブソリュートは基準へ重ねる、

94
00:07:46.438 --> 00:07:52.087
フィックスドは画面へ固定する、スティッキーは親の範囲で留まる、という違いです。

95
00:07:52.087 --> 00:07:59.573
練習として、共通の実例で五つの値を切り替え、シーの位置とスクロール時の動きを自分の言葉で説明してみてください。

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

97
00:08:00.799 --> 00:08:06.788
五つの違いを説明できれば、バッジ、固定ヘッダー、目次といった実践的な配置に応用できます。