zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

スクロール余白

負の値も含む余白値で、物理的なスクロール余白を設定します。

scroll-margin は、フラグメント移動やスクロールスナップなどでブラウザーが対象を表示範囲へ移動するとき、対象の周囲に追加の範囲を設けます。要素の周囲に見えるレイアウト空間は作りません。

クラスと CSS の早見表

クラスの例期待される宣言
scroll-m-6scroll-margin-top: 1.5rem; scroll-margin-right: 1.5rem; scroll-margin-bottom: 1.5rem; scroll-margin-left: 1.5rem;
scroll-mx-8scroll-margin-left: 2rem; scroll-margin-right: 2rem;
scroll-my-2scroll-margin-top: 0.5rem; scroll-margin-bottom: 0.5rem;
scroll-mb-4scroll-margin-bottom: 1rem;
scroll-ml-6scroll-margin-left: 1.5rem;
scroll-mr-6scroll-margin-right: 1.5rem;
scroll-mt-8scroll-margin-top: 2rem;
例の設定

この例では spacingUnit: "0.25rem"、reset: "none"、strict モード、空のブレークポイントを明示しています。各プレビューには、独自のスクロール枠の中に実際のリンクと対象があります。ネイティブな base 要素を about:srcdoc に向け、#top-target のようなフラグメントをプレビュー内の文書で解決します。数値の接尾辞には spacingUnit を掛け、Tailwind のスケールやテーマは継承しません。wind-demo クラスはスクロール枠と対象の表示だけを担当します。

使い方の例

フラグメント対象を上端から離す

リンクから対象へ移動します。scroll-mt-8 は物理的な上側に 2rem の追加範囲を設定します。

フラグメント対象を上端から離す
HTML
<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#top-target">Jump to the target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-mt-8" id="top-target">Target with scroll-mt-8</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-target {
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mt-8 {
  scroll-margin-top: 2rem;
}
Head
<base href="about:srcdoc">
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mt-8"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-target { min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

水平・垂直方向の範囲を指定する

縦スクロール枠では scroll-my-2、横スクロール枠では scroll-mx-8 を対象に設定しています。

水平・垂直方向の範囲を指定する
HTML
<div class="wind-demo">
  <div class="wind-demo-scroller wind-demo-y-scroller">
    <a class="wind-demo-link" href="#axis-y">Jump to the vertical target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-my-2" id="axis-y">Vertical target with scroll-my-2</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
  <div class="wind-demo-scroller wind-demo-x-scroller">
    <a class="wind-demo-link" href="#axis-x">Jump to the horizontal target</a>
    <div class="wind-demo-track">
      <section class="wind-demo-target scroll-mx-8" id="axis-x">Horizontal target with scroll-mx-8</section>
    </div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-y-scroller {
  width: 17rem;
}

.wind-demo-x-scroller {
  width: 17rem;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-track {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 34rem;
  min-height: 7rem;
}

.wind-demo-target {
  width: 10rem;
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mx-8 {
  scroll-margin-left: 2rem;
  scroll-margin-right: 2rem;
}
.scroll-my-2 {
  scroll-margin-top: 0.5rem;
  scroll-margin-bottom: 0.5rem;
}
Head
<base href="about:srcdoc">
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-y-scroller": true,
      "wind-demo-x-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-track": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mx-8",
        "scroll-my-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-y-scroller { width: 17rem; }
.wind-demo-x-scroller { width: 17rem; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-track { display: flex; align-items: center; justify-content: flex-end; width: 34rem; min-height: 7rem; }
.wind-demo-target { width: 10rem; min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

物理的な辺を個別に指定する

リンク先の対象ごとに scroll-mb-4、scroll-ml-6、scroll-mr-6 を使い、各辺を確認できます。

物理的な辺を個別に指定する
HTML
<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#bottom-target">Jump to the bottom-margin target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-mb-4" id="bottom-target">Target with scroll-mb-4</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
  <div class="wind-demo-scroller wind-demo-x-scroller">
    <a class="wind-demo-link" href="#left-target">Jump to the left-margin target</a>
    <a class="wind-demo-link" href="#right-target">Jump to the right-margin target</a>
    <div class="wind-demo-track wind-demo-edge-track">
      <section class="wind-demo-target scroll-ml-6" id="left-target">scroll-ml-6</section>
      <section class="wind-demo-target scroll-mr-6" id="right-target">scroll-mr-6</section>
    </div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-x-scroller {
  width: 17rem;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-track {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 34rem;
  min-height: 7rem;
}

.wind-demo-edge-track {
  justify-content: space-between;
}

.wind-demo-target {
  width: 10rem;
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mb-4 {
  scroll-margin-bottom: 1rem;
}
.scroll-ml-6 {
  scroll-margin-left: 1.5rem;
}
.scroll-mr-6 {
  scroll-margin-right: 1.5rem;
}
Head
<base href="about:srcdoc">
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-x-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-track": true,
      "wind-demo-edge-track": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mb-4",
        "scroll-ml-6",
        "scroll-mr-6"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-x-scroller { width: 17rem; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-track { display: flex; align-items: center; justify-content: flex-end; width: 34rem; min-height: 7rem; }
.wind-demo-edge-track { justify-content: space-between; }
.wind-demo-target { width: 10rem; min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

四辺すべてに追加範囲を設ける

二軸スクロール枠の右下にある対象へ、scroll-m-6 で物理的な四辺すべてを設定します。

四辺すべてに追加範囲を設ける
HTML
<div class="wind-demo">
  <div class="wind-demo-scroller wind-demo-two-axis-scroller">
    <a class="wind-demo-link" href="#all-sides-target">Jump to the lower-right target</a>
    <div class="wind-demo-canvas">
      <section class="wind-demo-target scroll-m-6" id="all-sides-target">scroll-m-6 on all four sides</section>
    </div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-two-axis-scroller {
  width: 17rem;
  height: 9rem;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-canvas {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 34rem;
  height: 20rem;
}

.wind-demo-target {
  width: 10rem;
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-m-6 {
  scroll-margin-top: 1.5rem;
  scroll-margin-right: 1.5rem;
  scroll-margin-bottom: 1.5rem;
  scroll-margin-left: 1.5rem;
}
Head
<base href="about:srcdoc">
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-two-axis-scroller": true,
      "wind-demo-link": true,
      "wind-demo-canvas": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-m-6"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-two-axis-scroller { width: 17rem; height: 9rem; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-canvas { display: flex; align-items: flex-end; justify-content: flex-end; width: 34rem; height: 20rem; }
.wind-demo-target { width: 10rem; min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

再利用する対象位置に名前を付ける

tokens.spacing.sticky に 3rem を明示的に設定しています。

再利用する対象位置に名前を付ける
HTML
<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#named-target">Jump to the named-token target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-mt-sticky" id="named-target">scroll-mt-sticky · 3rem</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-sticky: 3rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-target {
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mt-sticky {
  scroll-margin-top: var(--zw-spacing-sticky);
}
Head
<base href="about:srcdoc">
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "sticky": "3rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mt-sticky"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-target { min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

一度だけ使うスクロール位置を指定する

scroll-mt-[72px] は対象の上 scroll-margin を 72px にします。

一度だけ使うスクロール位置を指定する
HTML
<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#arbitrary-target">Jump to the arbitrary-value target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target scroll-mt-[72px]" id="arbitrary-target">scroll-mt-[72px]</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-target {
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.scroll-mt-\[72px\] {
  scroll-margin-top: 72px;
}
Head
<base href="about:srcdoc">
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "scroll-mt-[72px]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-target { min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

負の scroll-margin を使う

対応している負の値 -scroll-mt-4 で、対象の上側の追加範囲を 1rem 減らします。

負の scroll-margin を使う
HTML
<div class="wind-demo">
  <div class="wind-demo-scroller">
    <a class="wind-demo-link" href="#negative-target">Jump to the negative-margin target</a>
    <div class="wind-demo-spacer">Earlier content</div>
    <section class="wind-demo-target -scroll-mt-4" id="negative-target">-scroll-mt-4</section>
    <div class="wind-demo-spacer">Later content</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-scroller {
  width: 17rem;
  height: 9rem;
  overflow: auto;
  border: 2px dashed #849bb3;
  background: #eef3f8;
}

.wind-demo-link {
  display: block;
  border-bottom: 1px solid #849bb3;
  background: #dce8f2;
}

.wind-demo-spacer {
  min-height: 10rem;
  border-bottom: 1px solid #b6c5d4;
}

.wind-demo-target {
  min-height: 4rem;
  border: 2px solid #59718b;
  background: #c6d8e9;
}
.-scroll-mt-4 {
  scroll-margin-top: -1rem;
}
Head
<base href="about:srcdoc">
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-scroller": true,
      "wind-demo-link": true,
      "wind-demo-spacer": true,
      "wind-demo-target": true
    },
    "safelist": {
      "docs-preview": [
        "-scroll-mt-4"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-scroller { width: 17rem; height: 9rem; overflow: auto; border: 2px dashed #849bb3; background: #eef3f8; }
.wind-demo-link { display: block; border-bottom: 1px solid #849bb3; background: #dce8f2; }
.wind-demo-spacer { min-height: 10rem; border-bottom: 1px solid #b6c5d4; }
.wind-demo-target { min-height: 4rem; border: 2px solid #59718b; background: #c6d8e9; }

任意値と名前付きの値

scroll-m-0 は追加範囲をなくし、scroll-m-px はトークンなしで 1px を指定します。それ以外の数値には tokens.spacingUnit、scroll-mt-sticky のような名前付きの値には tokens.spacing が必要です。scroll-mt-[72px] のような任意の長さは spacing トークン不要です。-scroll-mt-4 のように root の前にハイフンを付けると負の値を使えます。x と y の root は物理的な辺を指します。scroll-mx は左右、scroll-my は上下です。個別の辺も論理的な start/end ではなく物理的な辺を指定します。位置を調整する対象側に scroll-margin を設定します。すべての対象に共通の内側余白を設ける場合は、スクロールコンテナ側に scroll-padding を設定します。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

scroll-m

フィールド値
カタログ識別子v1.scroll-m
クラスパターンscroll-m-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則allowed
競合グループと順位scroll-margin (43)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティscroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
scroll-margin-topresolvednull
scroll-margin-rightresolvednull
scroll-margin-bottomresolvednull
scroll-margin-leftresolvednull

カタログの例

クラスの例期待される宣言
scroll-m-0scroll-margin-top: 0; scroll-margin-right: 0; scroll-margin-bottom: 0; scroll-margin-left: 0

scroll-mx

フィールド値
カタログ識別子v1.scroll-mx
クラスパターンscroll-mx-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則allowed
競合グループと順位scroll-margin (43)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティscroll-margin-left, scroll-margin-right

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
scroll-margin-leftresolvednull
scroll-margin-rightresolvednull

カタログの例

クラスの例期待される宣言
scroll-mx-0scroll-margin-left: 0; scroll-margin-right: 0

scroll-my

フィールド値
カタログ識別子v1.scroll-my
クラスパターンscroll-my-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則allowed
競合グループと順位scroll-margin (43)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティscroll-margin-top, scroll-margin-bottom

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
scroll-margin-topresolvednull
scroll-margin-bottomresolvednull

カタログの例

クラスの例期待される宣言
scroll-my-0scroll-margin-top: 0; scroll-margin-bottom: 0

scroll-mb

フィールド値
カタログ識別子v1.scroll-mb
クラスパターンscroll-mb-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-bottom","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則allowed
競合グループと順位scroll-margin (43)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティscroll-margin-bottom

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
scroll-margin-bottomresolvednull

カタログの例

クラスの例期待される宣言
scroll-mb-0scroll-margin-bottom: 0

scroll-ml

フィールド値
カタログ識別子v1.scroll-ml
クラスパターンscroll-ml-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-left","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則allowed
競合グループと順位scroll-margin (43)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティscroll-margin-left

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
scroll-margin-leftresolvednull

カタログの例

クラスの例期待される宣言
scroll-ml-0scroll-margin-left: 0

scroll-mr

フィールド値
カタログ識別子v1.scroll-mr
クラスパターンscroll-mr-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-right","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則allowed
競合グループと順位scroll-margin (43)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティscroll-margin-right

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
scroll-margin-rightresolvednull

カタログの例

クラスの例期待される宣言
scroll-mr-0scroll-margin-right: 0

scroll-mt

フィールド値
カタログ識別子v1.scroll-mt
クラスパターンscroll-mt-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"scroll-margin-top","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則allowed
競合グループと順位scroll-margin (43)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティscroll-margin-top

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
scroll-margin-topresolvednull

カタログの例

クラスの例期待される宣言
scroll-mt-0scroll-margin-top: 0

Revision History

作成更新