VIDEO LESSON

CSSのscroll-margin-topの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:04動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、スクロール・マージン・トップです。
0:06ページ内リンクをクリックして見出しへ移動したとき、見出しが固定ヘッダーの後ろに隠れてしまった、
0:10という経験はないでしょうか。
0:14前回は、スクロールする側に書くスクロール・パディング・トップで、止まる位置をまとめて下げる方法を見ました。
0:22今回はその仲間で、移動先の要素ひとつひとつに書く指定です。
0:25基本の書き方から実例、間違えやすい点、効かないときの確認まで、順番に見ていきましょう。
0:31目次やページ内リンクを置いているサイトなら、すぐに役立つ指定です。
0:36書き方を確認します。
0:37スクロール・マージン・トップは、移動先になる要素そのものに指定します。
0:42たとえばクラス名デモを持つ見出しに、プロパティ名、コロン、値のスリー・レム、
0:46セミコロンと書くのが基本形です。
0:51スリー・レムと指定すると、その見出しへスクロールで移動したとき、見出しの上にスリー・レム分の空きができる位置で止まります。
1:00前回のスクロール・パディング・トップがスクロールする側への指定だったのに対して、
1:06こちらは移動先の側への指定、という対比を覚えておくと、書き分けで迷いません。
1:11指定できる値は、長さです。
1:13スリー・レムやエイティ・ピクセルのように、上にどれだけ空けて止まるかをそのまま書きます。
1:20値の決め方の目安は、固定ヘッダーの高さに少し余裕を足した長さです。
1:25ヘッダーがおよそフォー・レムの高さなら、ファイブ・レムを指定する、といった具合です。
1:31要素ごとに違う値を書けるのがこのプロパティの強みで、たとえば大きな見出しだけ余白を広めにする、
1:36といった細かな調整もできます。
1:40まずはレム単位で、ヘッダーの高さを基準に決めるのがおすすめです。
1:45なお、マイナスの長さを書くと、止まる位置が逆に上へ寄ります。
1:50特殊な調整に使うこともありますが、ふだんはプラスの値だけ覚えておけば十分です。
1:55初期値と継承を確認します。
1:57初期値はゼロです。
1:59つまり、指定しなければ余白はなく、移動先は画面や領域の一番上にぴったりくっついて止まります。
2:06そして、このプロパティは通常は継承しません。
2:09親の要素に書いても、内側の見出しへは自動で伝わらないので、余白が欲しい要素ごとに指定する必要があります。
2:17汎用的な値として、親の計算値を使うインヘリット、仕様の初期値に戻すイニシャルも書けます。
2:23アンセットは、継承しないプロパティなのでイニシャルと同じ扱いになります。
2:29ふだんはレムの長さを直接書けば十分です。
2:32ここが一番間違えやすい点です。
2:34名前にはマージンと付いていますが、スクロール・マージン・トップは、通常のマージンのように文書の配置へ隙間を作りません。
2:42見出しの上に余白が広がるわけではなく、前後の要素の位置もまったく動きません。
2:48効くのは、スクロールでその要素へ移動したときの、止まる位置だけです。
2:53つまり、普段の見た目はそのままに、ジャンプしたときだけ少し手前で止める、
2:56という働きをします。
2:59この違いを押さえておくと、指定しても見た目が変わらない、と慌てることがなくなります。
3:06逆に言えば、見出し同士の間隔そのものを広げたいときは、通常のマージンやパディングの仕事です。
3:12目的に合わせて使い分けてください。
3:15実例を見ていきます。
3:16まずエイチティーエムエルの用意です。
3:19ステージという箱の中に、見出しへ移動するためのリンクと、スクロールする領域であるスクローラーを置きます。
3:27スクローラーの中には、移動先の見出しをはさんで、前後に背の高い余白を入れておきます。
3:34見出しには、リンクの飛び先になるアイディーと、シーエスエスで選ぶためのクラス名デモを付けます。
3:41今回は、小さな領域の中でスクロールが起きる構成ですが、考え方はページ全体のアンカー移動でも同じです。
3:49次に、この見出しへシーエスエスを書いていきます。
3:53次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
3:56スクローラーに高さと、オーバーフロー、オートを指定して、箱の中でスクロールが起きるようにします。
4:02スペーサーで見出しの前後に十分な余白を確保し、デモのクラスには内側の余白や枠線などの見た目を整えます。
4:08その上で、今回の主役であるスクロール・マージン・トップ、スリー・レムを、
4:11同じデモのクラスへ追加します。
4:14変更するプロパティはこの一行だけ、という構成にすると、値を変えたときの違いが比べやすくなります。
4:20値を変えて比べてみましょう。
4:22スリー・レムのときは、リンクを押して移動したあと、見出しの上に空きができて、
4:26見出し全体が読みやすい位置に止まります。
4:30一方、値をゼロに置き換えると、その空きがなくなり、見出しは領域の上端にぴったりくっついて止まります。
4:38固定ヘッダーのあるページでは、この上端の部分がヘッダーに隠れてしまうわけです。
4:43比較のコツは、変えるのはこの値一つだけにすることです。
4:47保存して再読み込みし、止まる位置の違いを自分の言葉で説明できるようになるのが目標です。
4:53前回のスクロール・パディング・トップとの違いを整理します。
4:57パディングの方は、スクロールする側に一度書けば、その中のすべての移動先に効く一括の指定です。
5:03対してマージンの方は、移動先の要素ごとに書く個別の指定で、見出しごとに余白を変えたいときに使います。
5:10注意したいのは、両方を同時に使った場合です。
5:13余白は合算されて効くため、思ったより間が空き過ぎることがあります。
5:18使い分けの目安は、ページ全体はパディングでそろえ、例外的に広く空けたい要素だけマージンを足す、
5:22という組み立てです。
5:26たとえば、大きなバナー画像の下にある見出しだけ、ほかの見出しより少し多めに空ける、
5:30といった場面でマージンの個別指定が生きてきます。
5:34効かないときの確認手順です。
5:36まず、指定を書いた要素を確認してください。
5:39親やスクロールする側ではなく、移動先の見出しそのものに書けているかが第一歩です。
5:45次に、リンクのエイチレフと見出しのアイディーが一致しているかを見ます。
5:50ここがずれていると、そもそも移動自体が起きません。
5:53そのうえで開発者ツールを開き、ネットワークでスタイルシートが取得できているか、
5:59スタイルズで宣言が打ち消し線になっていないかを確認し、コンピューテッドで最終的な値を見ます。
6:05小さい画面幅やキーボード操作でも試しておくと確実です。
6:09とくにキーボードのタブ移動で要素へフォーカスが移ったときも、スクロール位置の調整は同じように働くので、
6:15隠れて見えない、という状態になっていないか合わせて見ておきましょう。
6:20最後に互換性とまとめです。
6:22ブラウザーの対応は、クロームがシックスティナイン以降、エッジがセブンティナイン以降、
6:28ファイアフォックスがシックスティエイト以降、サファリがフォーティーン・ポイント・ワン以降などで、
6:33現在の主要ブラウザーでは広く使えます。
6:39練習としては、まずスリー・レムとゼロの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
6:48まとめます。
6:49スクロール・マージン・トップは、アンカー移動の止まる位置を、移動先の要素ごとに調整する指定です。
6:56見た目の配置は変えず、止まる位置だけをずらす、という性質を覚えておいてください。
7:02お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

scroll-margin-topの役割と主な指定値を解説。リンク先の見出しへ移動したとき、上側に余裕が生まれるかを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのscroll-margin-topの使い方：指定値・実例・効かない原因とブラウザー互換性 →