WEBVTT

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

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

3
00:00:03.244 --> 00:00:06.622
今回のテーマは、スクロール・マージン・トップです。

4
00:00:06.622 --> 00:00:10.744
ページ内リンクをクリックして見出しへ移動したとき、見出しが固定ヘッダーの後ろに隠れてしまった、

5
00:00:10.744 --> 00:00:14.866
という経験はないでしょうか。

6
00:00:14.866 --> 00:00:22.029
前回は、スクロールする側に書くスクロール・パディング・トップで、止まる位置をまとめて下げる方法を見ました。

7
00:00:22.029 --> 00:00:25.949
今回はその仲間で、移動先の要素ひとつひとつに書く指定です。

8
00:00:25.949 --> 00:00:31.760
基本の書き方から実例、間違えやすい点、効かないときの確認まで、順番に見ていきましょう。

9
00:00:31.760 --> 00:00:36.220
目次やページ内リンクを置いているサイトなら、すぐに役立つ指定です。

10
00:00:36.220 --> 00:00:37.717
書き方を確認します。

11
00:00:37.717 --> 00:00:42.955
スクロール・マージン・トップは、移動先になる要素そのものに指定します。

12
00:00:42.955 --> 00:00:46.996
たとえばクラス名デモを持つ見出しに、プロパティ名、コロン、値のスリー・レム、

13
00:00:46.996 --> 00:00:51.037
セミコロンと書くのが基本形です。

14
00:00:51.037 --> 00:01:00.166
スリー・レムと指定すると、その見出しへスクロールで移動したとき、見出しの上にスリー・レム分の空きができる位置で止まります。

15
00:01:00.166 --> 00:01:06.003
前回のスクロール・パディング・トップがスクロールする側への指定だったのに対して、

16
00:01:06.003 --> 00:01:11.840
こちらは移動先の側への指定、という対比を覚えておくと、書き分けで迷いません。

17
00:01:11.840 --> 00:01:13.783
指定できる値は、長さです。

18
00:01:13.783 --> 00:01:20.359
スリー・レムやエイティ・ピクセルのように、上にどれだけ空けて止まるかをそのまま書きます。

19
00:01:20.359 --> 00:01:25.292
値の決め方の目安は、固定ヘッダーの高さに少し余裕を足した長さです。

20
00:01:25.292 --> 00:01:31.569
ヘッダーがおよそフォー・レムの高さなら、ファイブ・レムを指定する、といった具合です。

21
00:01:31.569 --> 00:01:36.203
要素ごとに違う値を書けるのがこのプロパティの強みで、たとえば大きな見出しだけ余白を広めにする、

22
00:01:36.203 --> 00:01:40.836
といった細かな調整もできます。

23
00:01:40.836 --> 00:01:45.619
まずはレム単位で、ヘッダーの高さを基準に決めるのがおすすめです。

24
00:01:45.619 --> 00:01:50.103
なお、マイナスの長さを書くと、止まる位置が逆に上へ寄ります。

25
00:01:50.103 --> 00:01:55.932
特殊な調整に使うこともありますが、ふだんはプラスの値だけ覚えておけば十分です。

26
00:01:55.932 --> 00:01:57.871
初期値と継承を確認します。

27
00:01:57.871 --> 00:01:59.214
初期値はゼロです。

28
00:01:59.214 --> 00:02:06.076
つまり、指定しなければ余白はなく、移動先は画面や領域の一番上にぴったりくっついて止まります。

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

30
00:02:09.358 --> 00:02:17.115
親の要素に書いても、内側の見出しへは自動で伝わらないので、余白が欲しい要素ごとに指定する必要があります。

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

32
00:02:23.678 --> 00:02:29.049
アンセットは、継承しないプロパティなのでイニシャルと同じ扱いになります。

33
00:02:29.049 --> 00:02:32.032
ふだんはレムの長さを直接書けば十分です。

34
00:02:32.032 --> 00:02:34.215
ここが一番間違えやすい点です。

35
00:02:34.215 --> 00:02:42.803
名前にはマージンと付いていますが、スクロール・マージン・トップは、通常のマージンのように文書の配置へ隙間を作りません。

36
00:02:42.803 --> 00:02:48.333
見出しの上に余白が広がるわけではなく、前後の要素の位置もまったく動きません。

37
00:02:48.333 --> 00:02:53.282
効くのは、スクロールでその要素へ移動したときの、止まる位置だけです。

38
00:02:53.282 --> 00:02:56.630
つまり、普段の見た目はそのままに、ジャンプしたときだけ少し手前で止める、

39
00:02:56.630 --> 00:02:59.977
という働きをします。

40
00:02:59.977 --> 00:03:06.090
この違いを押さえておくと、指定しても見た目が変わらない、と慌てることがなくなります。

41
00:03:06.090 --> 00:03:12.786
逆に言えば、見出し同士の間隔そのものを広げたいときは、通常のマージンやパディングの仕事です。

42
00:03:12.786 --> 00:03:15.260
目的に合わせて使い分けてください。

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

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

45
00:03:19.633 --> 00:03:27.753
ステージという箱の中に、見出しへ移動するためのリンクと、スクロールする領域であるスクローラーを置きます。

46
00:03:27.753 --> 00:03:34.312
スクローラーの中には、移動先の見出しをはさんで、前後に背の高い余白を入れておきます。

47
00:03:34.312 --> 00:03:41.652
見出しには、リンクの飛び先になるアイディーと、シーエスエスで選ぶためのクラス名デモを付けます。

48
00:03:41.652 --> 00:03:49.460
今回は、小さな領域の中でスクロールが起きる構成ですが、考え方はページ全体のアンカー移動でも同じです。

49
00:03:49.460 --> 00:03:53.208
次に、この見出しへシーエスエスを書いていきます。

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

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

52
00:04:02.665 --> 00:04:08.769
スペーサーで見出しの前後に十分な余白を確保し、デモのクラスには内側の余白や枠線などの見た目を整えます。

53
00:04:08.769 --> 00:04:11.822
その上で、今回の主役であるスクロール・マージン・トップ、スリー・レムを、

54
00:04:11.822 --> 00:04:14.874
同じデモのクラスへ追加します。

55
00:04:14.874 --> 00:04:20.620
変更するプロパティはこの一行だけ、という構成にすると、値を変えたときの違いが比べやすくなります。

56
00:04:20.620 --> 00:04:22.626
値を変えて比べてみましょう。

57
00:04:22.626 --> 00:04:26.781
スリー・レムのときは、リンクを押して移動したあと、見出しの上に空きができて、

58
00:04:26.781 --> 00:04:30.937
見出し全体が読みやすい位置に止まります。

59
00:04:30.937 --> 00:04:38.101
一方、値をゼロに置き換えると、その空きがなくなり、見出しは領域の上端にぴったりくっついて止まります。

60
00:04:38.101 --> 00:04:43.690
固定ヘッダーのあるページでは、この上端の部分がヘッダーに隠れてしまうわけです。

61
00:04:43.690 --> 00:04:47.559
比較のコツは、変えるのはこの値一つだけにすることです。

62
00:04:47.559 --> 00:04:53.720
保存して再読み込みし、止まる位置の違いを自分の言葉で説明できるようになるのが目標です。

63
00:04:53.720 --> 00:04:57.675
前回のスクロール・パディング・トップとの違いを整理します。

64
00:04:57.675 --> 00:05:03.949
パディングの方は、スクロールする側に一度書けば、その中のすべての移動先に効く一括の指定です。

65
00:05:03.949 --> 00:05:10.768
対してマージンの方は、移動先の要素ごとに書く個別の指定で、見出しごとに余白を変えたいときに使います。

66
00:05:10.768 --> 00:05:13.768
注意したいのは、両方を同時に使った場合です。

67
00:05:13.768 --> 00:05:18.269
余白は合算されて効くため、思ったより間が空き過ぎることがあります。

68
00:05:18.269 --> 00:05:22.156
使い分けの目安は、ページ全体はパディングでそろえ、例外的に広く空けたい要素だけマージンを足す、

69
00:05:22.156 --> 00:05:26.043
という組み立てです。

70
00:05:26.043 --> 00:05:30.476
たとえば、大きなバナー画像の下にある見出しだけ、ほかの見出しより少し多めに空ける、

71
00:05:30.476 --> 00:05:34.908
といった場面でマージンの個別指定が生きてきます。

72
00:05:34.908 --> 00:05:36.847
効かないときの確認手順です。

73
00:05:36.847 --> 00:05:39.756
まず、指定を書いた要素を確認してください。

74
00:05:39.756 --> 00:05:45.297
親やスクロールする側ではなく、移動先の見出しそのものに書けているかが第一歩です。

75
00:05:45.297 --> 00:05:50.145
次に、リンクのエイチレフと見出しのアイディーが一致しているかを見ます。

76
00:05:50.145 --> 00:05:53.608
ここがずれていると、そもそも移動自体が起きません。

77
00:05:53.608 --> 00:05:59.495
そのうえで開発者ツールを開き、ネットワークでスタイルシートが取得できているか、

78
00:05:59.495 --> 00:06:05.382
スタイルズで宣言が打ち消し線になっていないかを確認し、コンピューテッドで最終的な値を見ます。

79
00:06:05.382 --> 00:06:09.122
小さい画面幅やキーボード操作でも試しておくと確実です。

80
00:06:09.122 --> 00:06:15.009
とくにキーボードのタブ移動で要素へフォーカスが移ったときも、スクロール位置の調整は同じように働くので、

81
00:06:15.009 --> 00:06:20.896
隠れて見えない、という状態になっていないか合わせて見ておきましょう。

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

83
00:06:22.876 --> 00:06:28.408
ブラウザーの対応は、クロームがシックスティナイン以降、エッジがセブンティナイン以降、

84
00:06:28.408 --> 00:06:33.940
ファイアフォックスがシックスティエイト以降、サファリがフォーティーン・ポイント・ワン以降などで、

85
00:06:33.940 --> 00:06:39.473
現在の主要ブラウザーでは広く使えます。

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

87
00:06:48.152 --> 00:06:49.066
まとめます。

88
00:06:49.066 --> 00:06:56.375
スクロール・マージン・トップは、アンカー移動の止まる位置を、移動先の要素ごとに調整する指定です。

89
00:06:56.375 --> 00:07:02.466
見た目の配置は変えず、止まる位置だけをずらす、という性質を覚えておいてください。

90
00:07:02.466 --> 00:07:03.836
お疲れさまでした。