WEBVTT

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

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

3
00:00:03.394 --> 00:00:07.071
今回のテーマは、スクロール・パディング・トップです。

4
00:00:07.071 --> 00:00:12.586
ページ内リンクをクリックして見出しへ移動したとき、見出しが画面の一番上にぴったりくっついて、

5
00:00:12.586 --> 00:00:18.102
固定ヘッダーの後ろに隠れてしまった、という経験はないでしょうか。

6
00:00:18.102 --> 00:00:24.466
このプロパティは、スクロールの止まる位置を少し下げることで、その隠れを防ぐためのものです。

7
00:00:24.466 --> 00:00:28.850
前回は移動の滑らかさを決めるスクロール・ビヘイビアを見ました。

8
00:00:28.850 --> 00:00:36.628
今回は、移動した先の余白を調整する指定を、基本の書き方から実例、効かないときの確認まで順番に見ていきましょう。

9
00:00:36.628 --> 00:00:38.192
書き方を確認します。

10
00:00:38.192 --> 00:00:46.950
スクロール・パディング・トップは、スクロールする領域そのもの、つまりスクロールコンテナーになる要素に指定します。

11
00:00:46.950 --> 00:00:54.770
クラス名デモの要素に対して、プロパティ名、コロン、値のスリー・レム、セミコロンと書くのが基本形です。

12
00:00:54.770 --> 00:01:02.121
ページ全体のスクロールに効かせたい場合は、ルート要素であるエイチティーエムエル要素に書きます。

13
00:01:02.121 --> 00:01:05.249
ここで一番大切なのは、指定する場所です。

14
00:01:05.249 --> 00:01:11.036
移動先の見出しではなく、スクロールする側に書く、という点を覚えてください。

15
00:01:11.036 --> 00:01:15.728
対象を取り違えると、まったく効かない指定になってしまいます。

16
00:01:15.728 --> 00:01:19.732
指定できる値は、オート、長さ、割合の三種類です。

17
00:01:19.732 --> 00:01:24.570
オートは初期値で、ブラウザーが自動で決める状態を表します。

18
00:01:24.570 --> 00:01:30.910
実務でよく使うのは、スリー・レムやエイティ・ピクセルのような長さの指定です。

19
00:01:30.910 --> 00:01:41.921
たとえばスリー・レムと書くと、アンカー移動で止まるとき、見出しの上にスリー・レム分の空きができるようにスクロール位置が調整されます。

20
00:01:41.921 --> 00:01:47.427
割合で書く場合は、スクロール領域の高さを基準にした比率になります。

21
00:01:47.427 --> 00:01:56.436
まずは長さの指定で、固定ヘッダーの高さに少し余裕を足した値を入れる、という使い方から始めるのがおすすめです。

22
00:01:56.436 --> 00:01:58.513
初期値と継承を確認します。

23
00:01:58.513 --> 00:02:00.110
初期値はオートです。

24
00:02:00.110 --> 00:02:03.625
そして、このプロパティは通常は継承しません。

25
00:02:03.625 --> 00:02:08.578
親の要素に指定しても、内側にある別のスクロール領域へ自動では伝わらないので、

26
00:02:08.578 --> 00:02:13.530
スクロールする領域ごとに指定する必要があります。

27
00:02:13.530 --> 00:02:20.559
汎用的な値として、親の計算値を使うインヘリット、仕様の初期値に戻すイニシャルも書けます。

28
00:02:20.559 --> 00:02:25.831
アンセットは、継承しないプロパティなのでイニシャルと同じ扱いです。

29
00:02:25.831 --> 00:02:30.864
ふだんはレムやピクセルの長さを直接書けば十分ですが、値を読み解く場面では、

30
00:02:30.864 --> 00:02:35.896
初期値がオートであることを知っていると混乱しません。

31
00:02:35.896 --> 00:02:37.287
実例を見ていきます。

32
00:02:37.287 --> 00:02:39.792
まずエイチティーエムエルの用意です。

33
00:02:39.792 --> 00:02:46.748
ステージの中に、スクローラーというクラスを持つ箱を用意し、その中にリンクと移動先の見出しを入れます。

34
00:02:46.748 --> 00:02:50.505
見出しには、リンクの飛び先になるアイディーを付けます。

35
00:02:50.505 --> 00:02:56.210
見出しの前後には高さのある余白を置いて、中身がスクロールできる状態にしておきます。

36
00:02:56.210 --> 00:03:01.358
構造のポイントは、リンクも移動先も、スクロールする箱の内側にあることです。

37
00:03:01.358 --> 00:03:08.036
この箱に対して次にシーエスエスを書くことで、箱の中での移動の止まり方を調整できるようになります。

38
00:03:08.036 --> 00:03:12.136
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

39
00:03:12.136 --> 00:03:18.748
まずスクローラーに高さと、オーバーフロー、オートを指定して、箱の中でスクロールが起きるようにします。

40
00:03:18.748 --> 00:03:22.715
スペーサーで見出しの前後に十分な余白を確保するのが土台です。

41
00:03:22.715 --> 00:03:26.022
その上で、今回の主役であるスクロール・パディング・トップ、スリー・レムを、

42
00:03:26.022 --> 00:03:29.328
デモのクラスに追加します。

43
00:03:29.328 --> 00:03:33.626
これで、リンクをクリックして見出しへ移動したとき、見出しが箱の上端に張り付かず、

44
00:03:33.626 --> 00:03:37.924
スリー・レム分下がった位置に止まるようになります。

45
00:03:37.924 --> 00:03:42.288
変更するのは最後の一行だけ、という構成が比較しやすいポイントです。

46
00:03:42.288 --> 00:03:44.526
値を変えて比べてみましょう。

47
00:03:44.526 --> 00:03:52.041
スリー・レムのときは、移動後に見出しの上へ空きができ、見出し全体が読みやすい位置に止まります。

48
00:03:52.041 --> 00:03:59.556
一方、値をゼロに置き換えると、空きがなくなり、見出しは箱の上端にぴったりくっついて止まります。

49
00:03:59.556 --> 00:04:06.271
固定ヘッダーがあるページでは、この上端に隠れて見出しの上の方が読めなくなるわけです。

50
00:04:06.271 --> 00:04:12.187
比較するときのコツは、変えるのはこのプロパティの値一つだけにすることです。

51
00:04:12.187 --> 00:04:21.940
ファイル保存後にブラウザーを再読み込みして、リンクを押したときの止まる位置の違いを言葉で説明できるようになるのが目標です。

52
00:04:21.940 --> 00:04:25.536
実務で一番多い使い方が、固定ヘッダー対策です。

53
00:04:25.536 --> 00:04:34.292
画面の上に固定されたヘッダーがあるサイトでページ内リンクを使うと、移動先の見出しがヘッダーの後ろに隠れがちです。

54
00:04:34.292 --> 00:04:40.859
そんなときは、エイチティーエムエル要素にスクロール・パディング・トップを指定します。

55
00:04:40.859 --> 00:04:45.081
値の目安は、ヘッダーの高さに少し余裕を足した長さです。

56
00:04:45.081 --> 00:04:51.179
ヘッダーがおよそフォー・レムなら、ファイブ・レムを指定する、といった具合です。

57
00:04:51.179 --> 00:04:55.714
目次リンクや、よくある質問へのアンカーが多いページほど効果が分かりやすく、

58
00:04:55.714 --> 00:05:00.248
サイト全体の使い勝手を底上げしてくれます。

59
00:05:00.248 --> 00:05:05.118
似た名前の、スクロール・マージン・トップとの違いを整理します。

60
00:05:05.118 --> 00:05:13.601
スクロール・パディング・トップは、スクロールする側に一度書けば、その中のすべての移動先に効く一括の指定です。

61
00:05:13.601 --> 00:05:18.392
対してスクロール・マージン・トップは、移動先の要素ごとに書く個別の指定で、

62
00:05:18.392 --> 00:05:23.183
見出しごとに違う余白を持たせたいときに使います。

63
00:05:23.183 --> 00:05:26.482
注意したいのは、両方を同時に使う場合です。

64
00:05:26.482 --> 00:05:31.666
余白が合わさって効くため、思ったより間が空き過ぎることがあります。

65
00:05:31.666 --> 00:05:36.143
基本はどちらか一方にそろえ、ページ全体はパディング、例外の要素だけマージン、

66
00:05:36.143 --> 00:05:40.620
という使い分けが分かりやすいでしょう。

67
00:05:40.620 --> 00:05:42.683
効かないときの確認手順です。

68
00:05:42.683 --> 00:05:46.956
このプロパティで一番多い間違いは、書く場所の取り違えです。

69
00:05:46.956 --> 00:05:53.586
移動先の見出しに書いていないか、スクロールする側に書けているかを、最初に確認してください。

70
00:05:53.586 --> 00:05:59.406
次に開発者ツールを開き、ネットワークでスタイルズ・ドット・シーエスエスが正常に取得されているか、

71
00:05:59.406 --> 00:06:05.226
エレメンツで対象のクラスとセレクターが一致しているかを見ます。

72
00:06:05.226 --> 00:06:10.677
スタイルズで宣言が打ち消し線になっていれば、別の宣言に上書きされています。

73
00:06:10.677 --> 00:06:14.508
最後にコンピューテッドで最終的な値を確認しましょう。

74
00:06:14.508 --> 00:06:18.928
小さい画面幅やキーボード操作でも確認できると、より確実です。

75
00:06:18.928 --> 00:06:20.671
最後に互換性とまとめです。

76
00:06:20.671 --> 00:06:26.972
ブラウザーの対応は、クロームがシックスティナイン以降、ファイアフォックスがシックスティエイト以降、

77
00:06:26.972 --> 00:06:33.274
サファリがフォーティーン・ポイント・ワン以降などで、現在の主要ブラウザーでは広く使えます。

78
00:06:33.274 --> 00:06:41.318
練習としては、まずスリー・レムとゼロの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。

79
00:06:41.318 --> 00:06:42.123
まとめます。

80
00:06:42.123 --> 00:06:45.676
スクロール・パディング・トップは、アンカー移動の止まる位置を下げる指定で、

81
00:06:45.676 --> 00:06:49.229
書く場所はスクロールする側です。

82
00:06:49.229 --> 00:06:53.653
固定ヘッダーのあるページで困ったら、この一行を思い出してください。

83
00:06:53.653 --> 00:06:54.860
お疲れさまでした。