scroll-margin-topとは？初心者でも伝わる使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

scroll-margin-topとは？

このプロパティは、要素が画面に入るときの見える位置をずらすためのCSSです。

具体的には、ページ内リンクをクリックしたときや JavaScript でスクロールしたときに、見え方を調整できます。固定ヘッダーがあるサイトでは特に便利で、見出しが隠れにくくなります。scroll-margin-topを使うと、表示位置を安全に確保できるのです。

基本的な使い方

ポイントは「対象の要素」に対して scroll-margin-top を設定することです。例として、見出しをターゲットにする場合、次のようにします。

section { scroll-margin-top: 60px; }

この場合、スクロールして section に到達すると、上部の固定ヘッダー分だけ 60px ずれた位置に表示されます。

実際のコード例

以下は HTML と CSS の簡単な例です。固定ヘッダーがあり、ページ内リンクでセクションへ飛ぶ場面を想定しています。

例:

/* CSS */

header { position: fixed; top: 0; height: 60px; width: 100%; }

section { scroll-margin-top: 60px; }

HTML 側はシンプルに、ターゲットを用意します。

セクション1 という要素に scroll-margin-top を適用します。

注意点とよくある誤解

・scroll-margin-topは「見える位置」を決めるもので、要素自体の余白を変えるわけではありません。

・すべてのブラウザが同じ挙動をするわけではなく、特に古いブラウザではサポートが不十分なことがあります。最新の Chrome/Firefox/Safari での動作を確認しましょう。

比較表

項目	説明
scroll-margin-top	スクロール時に見える位置をずらす値を設定
margin-top	要素自体の上の余白を増やす。スクロール位置には直接影響しない
適用範囲	対象の要素のみ
例	60px, 1rem などの長さ単位が使える

まとめ

scroll-margin-top は、固定ヘッダーのあるページで、リンク先の見出しが隠れないようにする便利な CSS プロパティです。使い方はとてもシンプルで、対象の要素に対して適切な値を設定するだけ。中学生にも分かるように言えば、「スクロールのとき、上からどれくらいずらして表示するかを決める設定」です。

scroll-margin-topの同意語

scroll-margin-top: 要素がスクロールされるとき、画面上部から表示される位置を調整するための、上部のマージンを設定するCSSプロパティ。
上部スクロールマージン: scroll-margin-topの日本語表現のひとつで、要素の上部に適用されるスクロール時の余白を指します。
スクロールマージントップ: scroll-margin-topと同義の表現。要素の上部に関するスクロール時のマージンを意味します。
スクロール時の上部余白: スクロール時に要素の上部に適用される余白の意味です。
トップスクロールマージン: 要素の上部側に適用するスクロールマージンの別表現です。
アンカー遷移時の上部オフセット: アンカーリンクで目的の要素へスクロールする際、画面上部からのオフセットとして働く値を指します。
上部オフセット（スクロール）: スクロール時の表示位置を決める、上部のオフセット値を表します。
要素の上部スクロールオフセット: 要素に適用される、スクロール時の表示位置を上部からずらすオフセットを示します。
scroll-margin-topプロパティ: 正式名称そのままの説明。CSSで要素の上部のスクロールマージンを定義するプロパティです。
scroll-top-margin: 英語表現の一種で、scroll-margin-topと同義に使われることがある表現です。

scroll-margin-topの対義語・反対語

scroll-margin-bottom: スクロール時に要素の下端との距離を決める外側の余白。top（上部）に対する反対方向の配置調整として下側をずらすイメージです。
scroll-margin-left: スクロール時に要素と左端との距離を決める外側の余白。左寄せや左方向への位置調整を可能にします。
scroll-margin-right: スクロール時に要素と右端との距離を決める外側の余白。右寄せや右方向への位置調整を可能にします。
scroll-margin-block-start: ブロック軸の開始端（通常は上部）に適用される外側の余白。縦方向のトップ寄せ・調整を行います。
scroll-margin-block-end: ブロック軸の終端端（通常は下部）に適用される外側の余白。縦方向の下寄せ・調整を行います。
scroll-margin-inline-start: インライン軸の開始端（通常は左側）に適用される外側の余白。横方向の左寄せ・調整を行います。
scroll-margin-inline-end: インライン軸の終端端（通常は右側）に適用される外側の余白。横方向の右寄せ・調整を行います。
scroll-padding-top: スクロール領域の内側のスペース（パディング）で、要素とスクロールポートの間に確保する見た目の余白。margin の代わりに内側を広げます。
scroll-padding-bottom: スクロール領域の内側のスペースの下側。要素とスクロールポートの間を内側で広げます。
scroll-padding-left: スクロール領域の内側のスペースの左側。要素と左端の間を内側で広げます。
scroll-padding-right: スクロール領域の内側のスペースの右側。要素と右端の間を内側で広げます。
scroll-padding-block-start: ブロック軸の開始端における内側の余白。通常は上部の内側スペースとして機能します。
scroll-padding-block-end: ブロック軸の終端端における内側の余白。通常は下部の内側スペースとして機能します。
scroll-padding-inline-start: インライン軸の開始端における内側の余白。左側の内側スペースとして機能します。
scroll-padding-inline-end: インライン軸の終端端における内側の余白。右側の内側スペースとして機能します。

scroll-margin-topの共起語

CSS: ウェブページの見た目を定義する言語。セレクタとプロパティでスタイルを指定します。scroll-margin-top はこの CSS の中の1つのプロパティです。
scroll-margin-top: 要素がスクロールで見えるときの、上部の余白を指定するプロパティ。固定ヘッダーがあるときに表示位置をずらすのに使われます。
scroll-margin: 四方の余白をまとめて設定するショートハンドプロパティ。top/bottom/left/right の代わりに一括指定します。
scroll-margin-bottom: 下方向のスクロール時の余白を設定します。
scroll-margin-left: 左方向のスクロール時の余白を設定します。
scroll-margin-right: 右方向のスクロール時の余白を設定します。
scroll-padding: スクロール領域の内側余白。アンカーの表示位置調整にも関係します。
scroll-padding-top: スクロール領域の上部内側余白を設定します。
scroll-padding-bottom: スクロール領域の下部内側余白を設定します。
scroll-padding-left: スクロール領域の左部内側余白を設定します。
scroll-padding-right: スクロール領域の右部内側余白を設定します。
scroll-snap-type: スクロールをスナップさせる挙動を指定します。縦方向・横方向などを設定します。
scroll-snap-align: スクロールが止まる位置を要素のどこの点に合わせるかを指定します。
アンカーリンク: ページ内リンクのこと。#id の形で別の場所へジャンプします。
id属性: HTML要素を識別するための属性。アンカーターゲットとして使われます。
固定ヘッダー: 画面上部に常に固定表示される見出し領域。scroll-margin-top で表示位置をずらす場面が多いです。
オフセット: ずらす距離・量のこと。scroll-margin-top でのオフセット値として使います。
ブラウザ対応: このプロパティのサポート状況。主要ブラウザは対応していますが、バージョン差に注意が必要です。
アクセシビリティ: 視認性や操作性への配慮。適切なスクロール位置調整はスクリーンリーダー利用時にも影響します。

scroll-margin-topの関連用語

scroll-margin-top: 要素の上端に適用されるスクロールマージン。スクロールスナップ時の停止位置や、ページ内リンクのアンカーが表示される位置を調整するために使います。値は長さ（px、rem、em など）やパーセントで指定します。
scroll-margin: 四辺の scroll-margin-top / scroll-margin-right / scroll-margin-bottom / scroll-margin-left を一括で設定するショートハンド。各辺の値を同じにしたい時にも便利です。
scroll-margin-right: 要素の右側のスクロールマージン。スクロール時の停止位置やアンカーの表示位置を右方向にも調整します。
scroll-margin-bottom: 要素の下部のスクロールマージン。下方向の停止位置を決めるのに使います。
scroll-margin-left: 要素の左側のスクロールマージン。左方向の停止位置を調整します。
scroll-margin-block-start: ブロック軸の開始端（通常は上端）に適用されるスクロールマージン。writing-mode に応じて位置が変わります。
scroll-margin-block-end: ブロック軸の終了端（通常は下端）に適用されるスクロールマージン。
scroll-margin-inline-start: インライン軸の開始端（通常は左端）に適用されるスクロールマージン。
scroll-margin-inline-end: インライン軸の終了端（通常は右端）に適用されるスクロールマージン。
scroll-padding: スクロールコンテナ内の四辺のパディングを一括設定するショートハンド。アンカーやスナップの基準点を決める時に使われます。
scroll-padding-top: スクロールコンテナの上部パディング。アンカーやスナップの基準点を調整します。
scroll-padding-right: スクロールコンテナの右部パディング。
scroll-padding-bottom: スクロールコンテナの下部パディング。
scroll-padding-left: スクロールコンテナの左部パディング。
scroll-padding-block-start: ブロック軸の開始端に対するパディング。
scroll-padding-block-end: ブロック軸の終了端に対するパディング。
scroll-padding-inline-start: インライン軸の開始端に対するパディング。
scroll-padding-inline-end: インライン軸の終了端に対するパディング。
scroll-snap-type: スクロールスナップの軸と挙動を設定します。例: 'x mandatory'、'y proximity' など。軸には x / y / inline / block / both などを指定し、必須か近接かを組み合わせます。
scroll-snap-align: スナップポイントが要素のどの位置に揃うかを決定します。主に 'start'、'center'、'end' のいずれかを指定します。
scroll-snap-stop: スナップ時の停止挙動。'normal'（通常の挙動）、'always'（必ずそのスナップ点で止まる）を指定します。
scroll-behavior: スクロールの移動方法を指定します。'auto' か 'smooth' を設定でき、スムーズなスクロールを実現します。
CSS_Scroll_Snap: 要素のスクロールを特定のポイントで止める機能の総称。scroll-margin / scroll-padding と組み合わせて、UXを向上させます。
アンカー: HTML内の id 属性を持つ要素。a href="#id" のリンクをクリックするとその要素へスクロールします。画面上の表示位置を調整する際にも関連します。