SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 6:55動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、スクロール・パディング・トップです。
  4. 0:07ページ内リンクをクリックして見出しへ移動したとき、見出しが画面の一番上にぴったりくっついて、
  5. 0:12固定ヘッダーの後ろに隠れてしまった、という経験はないでしょうか。
  6. 0:18このプロパティは、スクロールの止まる位置を少し下げることで、その隠れを防ぐためのものです。
  7. 0:24前回は移動の滑らかさを決めるスクロール・ビヘイビアを見ました。
  8. 0:28今回は、移動した先の余白を調整する指定を、基本の書き方から実例、効かないときの確認まで順番に見ていきましょう。
  9. 0:36書き方を確認します。
  10. 0:38スクロール・パディング・トップは、スクロールする領域そのもの、つまりスクロールコンテナーになる要素に指定します。
  11. 0:46クラス名デモの要素に対して、プロパティ名、コロン、値のスリー・レム、セミコロンと書くのが基本形です。
  12. 0:54ページ全体のスクロールに効かせたい場合は、ルート要素であるエイチティーエムエル要素に書きます。
  13. 1:02ここで一番大切なのは、指定する場所です。
  14. 1:05移動先の見出しではなく、スクロールする側に書く、という点を覚えてください。
  15. 1:11対象を取り違えると、まったく効かない指定になってしまいます。
  16. 1:15指定できる値は、オート、長さ、割合の三種類です。
  17. 1:19オートは初期値で、ブラウザーが自動で決める状態を表します。
  18. 1:24実務でよく使うのは、スリー・レムやエイティ・ピクセルのような長さの指定です。
  19. 1:30たとえばスリー・レムと書くと、アンカー移動で止まるとき、見出しの上にスリー・レム分の空きができるようにスクロール位置が調整されます。
  20. 1:41割合で書く場合は、スクロール領域の高さを基準にした比率になります。
  21. 1:47まずは長さの指定で、固定ヘッダーの高さに少し余裕を足した値を入れる、という使い方から始めるのがおすすめです。
  22. 1:56初期値と継承を確認します。
  23. 1:58初期値はオートです。
  24. 2:00そして、このプロパティは通常は継承しません。
  25. 2:03親の要素に指定しても、内側にある別のスクロール領域へ自動では伝わらないので、
  26. 2:08スクロールする領域ごとに指定する必要があります。
  27. 2:13汎用的な値として、親の計算値を使うインヘリット、仕様の初期値に戻すイニシャルも書けます。
  28. 2:20アンセットは、継承しないプロパティなのでイニシャルと同じ扱いです。
  29. 2:25ふだんはレムやピクセルの長さを直接書けば十分ですが、値を読み解く場面では、
  30. 2:30初期値がオートであることを知っていると混乱しません。
  31. 2:35実例を見ていきます。
  32. 2:37まずエイチティーエムエルの用意です。
  33. 2:39ステージの中に、スクローラーというクラスを持つ箱を用意し、その中にリンクと移動先の見出しを入れます。
  34. 2:46見出しには、リンクの飛び先になるアイディーを付けます。
  35. 2:50見出しの前後には高さのある余白を置いて、中身がスクロールできる状態にしておきます。
  36. 2:56構造のポイントは、リンクも移動先も、スクロールする箱の内側にあることです。
  37. 3:01この箱に対して次にシーエスエスを書くことで、箱の中での移動の止まり方を調整できるようになります。
  38. 3:08次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  39. 3:12まずスクローラーに高さと、オーバーフロー、オートを指定して、箱の中でスクロールが起きるようにします。
  40. 3:18スペーサーで見出しの前後に十分な余白を確保するのが土台です。
  41. 3:22その上で、今回の主役であるスクロール・パディング・トップ、スリー・レムを、
  42. 3:26デモのクラスに追加します。
  43. 3:29これで、リンクをクリックして見出しへ移動したとき、見出しが箱の上端に張り付かず、
  44. 3:33スリー・レム分下がった位置に止まるようになります。
  45. 3:37変更するのは最後の一行だけ、という構成が比較しやすいポイントです。
  46. 3:42値を変えて比べてみましょう。
  47. 3:44スリー・レムのときは、移動後に見出しの上へ空きができ、見出し全体が読みやすい位置に止まります。
  48. 3:52一方、値をゼロに置き換えると、空きがなくなり、見出しは箱の上端にぴったりくっついて止まります。
  49. 3:59固定ヘッダーがあるページでは、この上端に隠れて見出しの上の方が読めなくなるわけです。
  50. 4:06比較するときのコツは、変えるのはこのプロパティの値一つだけにすることです。
  51. 4:12ファイル保存後にブラウザーを再読み込みして、リンクを押したときの止まる位置の違いを言葉で説明できるようになるのが目標です。
  52. 4:21実務で一番多い使い方が、固定ヘッダー対策です。
  53. 4:25画面の上に固定されたヘッダーがあるサイトでページ内リンクを使うと、移動先の見出しがヘッダーの後ろに隠れがちです。
  54. 4:34そんなときは、エイチティーエムエル要素にスクロール・パディング・トップを指定します。
  55. 4:40値の目安は、ヘッダーの高さに少し余裕を足した長さです。
  56. 4:45ヘッダーがおよそフォー・レムなら、ファイブ・レムを指定する、といった具合です。
  57. 4:51目次リンクや、よくある質問へのアンカーが多いページほど効果が分かりやすく、
  58. 4:55サイト全体の使い勝手を底上げしてくれます。
  59. 5:00似た名前の、スクロール・マージン・トップとの違いを整理します。
  60. 5:05スクロール・パディング・トップは、スクロールする側に一度書けば、その中のすべての移動先に効く一括の指定です。
  61. 5:13対してスクロール・マージン・トップは、移動先の要素ごとに書く個別の指定で、
  62. 5:18見出しごとに違う余白を持たせたいときに使います。
  63. 5:23注意したいのは、両方を同時に使う場合です。
  64. 5:26余白が合わさって効くため、思ったより間が空き過ぎることがあります。
  65. 5:31基本はどちらか一方にそろえ、ページ全体はパディング、例外の要素だけマージン、
  66. 5:36という使い分けが分かりやすいでしょう。
  67. 5:40効かないときの確認手順です。
  68. 5:42このプロパティで一番多い間違いは、書く場所の取り違えです。
  69. 5:46移動先の見出しに書いていないか、スクロールする側に書けているかを、最初に確認してください。
  70. 5:53次に開発者ツールを開き、ネットワークでスタイルズ・ドット・シーエスエスが正常に取得されているか、
  71. 5:59エレメンツで対象のクラスとセレクターが一致しているかを見ます。
  72. 6:05スタイルズで宣言が打ち消し線になっていれば、別の宣言に上書きされています。
  73. 6:10最後にコンピューテッドで最終的な値を確認しましょう。
  74. 6:14小さい画面幅やキーボード操作でも確認できると、より確実です。
  75. 6:18最後に互換性とまとめです。
  76. 6:20ブラウザーの対応は、クロームがシックスティナイン以降、ファイアフォックスがシックスティエイト以降、
  77. 6:26サファリがフォーティーン・ポイント・ワン以降などで、現在の主要ブラウザーでは広く使えます。
  78. 6:33練習としては、まずスリー・レムとゼロの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
  79. 6:41まとめます。
  80. 6:42スクロール・パディング・トップは、アンカー移動の止まる位置を下げる指定で、
  81. 6:45書く場所はスクロールする側です。
  82. 6:49固定ヘッダーのあるページで困ったら、この一行を思い出してください。
  83. 6:53お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

scroll-padding-topの役割と主な指定値を解説。スクロール領域内のリンク先の上側の空きを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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