ホーム  >  CSS辞典 / WEB / ボックス

CSS辞典 scroll-margin-blockプロパティ、 scroll-margin-inlineプロパティ、scroll-margin-block-start、scroll-margin-block-endプロパティ、scroll-margin-inline-start、scroll-margin-inline-endプロパティの解説

ブロック方向（縦）及びインライン方向（横）に応じてスナップされる位置のマージンの幅をまとめて指定する「scroll-margin-blockプロパティ」、「scroll-margin-inlineプロパティ」、ブロック方向（縦）及びインライン方向（横）に応じてスナップされる位置のマージンの幅を指定する「scroll-margin-block-start」、「scroll-margin-block-end」、「scroll-margin-inline-start」、「scroll-margin-inline-end」使用方法を記載

対応バージョン：CSS3／2.1

目次
  1. 対応ブラウザ
  2. scroll-margin-blockプロパティ、scroll-margin-inlineプロパティ
  3. scroll-margin-block-startプロパティ、scroll-margin-block-endプロパティ
  4. scroll-margin-inline-startプロパティ、scroll-margin-inline-endプロパティ

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ：chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ：firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ：safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ：ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ：ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ：opera
初期値0
適用される要素すべての要素
モジュールCSS Scroll Snap Module Level 1
継承なし

※scroll-margin-block、scroll-margin-inline、scroll-margin-block-start、scroll-margin-block-end、scroll-margin-inline-start、scroll-margin-inline-endすべて同様。

scroll-margin-blockプロパティ、scroll-margin-inlineプロパティ

概要・使用方法

{ scroll-margin-block:-start -end;}
{ scroll-margin-inline: -start -end;}

「scroll-margin-blockプロパティ」、scroll-margin-block-start、scroll-margin-block-endを一括で指定するプロパティです。「scroll-margin-inlineプロパティ」は、scroll-margin-inline-start、scroll-margin-inline-endを一括で指定できるプロパティです。

プロパティの値は個別で指定する値と一緒になります。

scroll-margin-blockプロパティは、writing-modeプロパティに「vertical-rl」か「vertical-lr」の指定が必要になります。scroll-margin-inlineプロパティは、writing-modeプロパティに「sideways-rl」か「sideways-lr」の指定が必要になります。

scroll-margin-blockプロパティ、scroll-margin-inlineプロパティ解説図

writing-modeプロパティで指定した書字方向（文章の書きはじめと終わり）に対してそれぞれ、マージンを設けることができます。

「sideways-rl」か「sideways-lr」はfirefoxブラウザで対応しています。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>scroll-margin-inlineプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
.bl-box1 {
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  width: 500px;
  height: 200px;
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
  
}
.nr-panel-1 {
  background-color:silver;
  writing-mode: vertical-rl;
  width: 350px;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
}

.nr-panel-2 {
  background-color:teal;
  writing-mode: vertical-rl;
  width: 350px;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
}

.bl-panel-1 {
  background-color:silver;
  writing-mode: vertical-rl;
  width: 350px;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-block:100px 50px;
}

.bl-panel-2 {
  background-color:teal;
  writing-mode: vertical-rl;
  width: 350px;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-block:100px 50px;
}

.li-box1 {
  scroll-snap-type: y mandatory;
  -ms-scroll-snap-type: y mandatory;
  width: 350px;
  height: 300px;
  overflow-y: scroll;
  
}
.nr-li-panel-1 {
  background-color:silver;
  writing-mode: sideways-rl;
  width: 100%;
  height: 200px;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
}
.nr-li-panel-2 {
  background-color:teal;
  writing-mode: sideways-rl;
  width: 100%;
  height: 200px;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
}
.li-panel-1 {
  background-color:silver;
  writing-mode: sideways-rl;
  width: 100%;
  height: 200px;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-inline:70px 30px;
}
.li-panel-2 {
  background-color:teal;
  writing-mode: sideways-rl;
  width: 100%;
  height: 200px;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-inline:70px 30px;
}
    </style>
  </head>
  <body>
 <h1>なし</h1>
<div class="bl-box1">
  <div><div class="nr-panel-1">１</div></div>
  <div><div class="nr-panel-2">２</div></div>
  <div><div class="nr-panel-1">３</div></div>
  <div><div class="nr-panel-2">４</div></div>
  <div><div class="nr-panel-1">５</div></div>
</div>
<h1>scroll-margin-block:100px 50px;</h1>
<div class="bl-box1">
  <div><div class="bl-panel-1">１</div></div>
  <div><div class="bl-panel-2">２</div></div>
  <div><div class="bl-panel-1">３</div></div>
  <div><div class="bl-panel-2">４</div></div>
  <div><div class="bl-panel-1">５</div></div>
</div>
<h1>なし</h1>
<div class="li-box1">
  <div class="nr-li-panel-1">１</div>
  <div class="nr-li-panel-2">２</div>
  <div class="nr-li-panel-1">３</div>
  <div class="nr-li-panel-2">４</div>
  <div class="nr-li-panel-1">５</div>
</div>
<h1>scroll-margin-inline:70px 30px;</h1>
<div class="li-box1">
  <div class="li-panel-1">１</div>
  <div class="li-panel-2">２</div>
  <div class="li-panel-1">３</div>
  <div class="li-panel-2">４</div>
  <div class="li-panel-1">５</div>
</div>
  </body>
</html>

なし

１
２
３
４
５

scroll-margin-block:100px 50px;

１
２
３
４
５

なし

１
２
３
４
５

scroll-margin-inline:70px 30px;

１
２
３
４
５

Firefox ブラウザ実行結果

Firefox

scroll-margin-block-startプロパティ、scroll-margin-block-endプロパティ

概要・使用方法

{scroll-margin-block-start: 幅;}
{scroll-margin-block-end: 幅;}

「scroll-margin-block-start」プロパティは、スクロール時のブロック方向（縦）の開始側のマージンを指定することができます。「scroll-margin-block-end」プロパティは、スクロール時のブロック方向（縦）の終了側のマージンを指定することができます。

scroll-margin-block-startプロパティ、scroll-margin-block-endプロパティも書字方向（文章の始まりと終わりの位置）に対してマージン（幅を）を指定できます。

writing-modeプロパティに「vertical-rl」か「vertical-lr」の指定が必要になります。

書字方向

書字方向（vertical-rl、vertical-lr）の解説図

指定できる値（幅）

数値+単位単位付きの数値で指定します。マイナスの値も指定可能です。

単位付の数字の詳細は以下を参照

CSS辞典 単位付きの数字

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>scroll-margin-block-start endプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>

.box1 {
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  width: 350px;
  height: 200px;
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
  
}

.start-panel-1 {
  background-color:silver;
  writing-mode: vertical-rl;
  width: 350px;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-block-start:100px;
}
.start-panel-2 {
  background-color:teal;
  writing-mode: vertical-rl;
  width: 350px;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-block-start:100px;
}

.end-panel-1 {
  background-color:silver;
  writing-mode: vertical-rl;
  width: 350px;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-block-end:50px;
}

.end-panel-2 {
  background-color:teal;
  writing-mode: vertical-rl;
  width: 350px;
  height: 100%;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-block-end:50px;
}

    </style>
  </head>
  <body>
<h1>scroll-margin-block-start:100px;</h1>
<div class="box1">
  <div><div class="start-panel-1">１</div></div>
  <div><div class="start-panel-2">２</div></div>
  <div><div class="start-panel-1">３</div></div>
  <div><div class="start-panel-2">４</div></div>
  <div><div class="start-panel-1">５</div></div>
</div>
<h1>scroll-margin-block-end:50px;</h1>
<div class="box1">
  <div><div class="end-panel-1">１</div></div>
  <div><div class="end-panel-2">２</div></div>
  <div><div class="end-panel-1">３</div></div>
  <div><div class="end-panel-2">４</div></div>
  <div><div class="end-panel-1">５</div></div>
</div>

  </body>
</html>

scroll-margin-block-start:100px;

１
２
３
４
５

scroll-margin-block-end:50px;

１
２
３
４
５

chromeブラウザ実行結果

chrome

Firefox ブラウザ実行結果

Firefox

edgeブラウザ実行結果

edge

operaブラウザ実行結果

opera

scroll-margin-inline-startプロパティ、scroll-margin-inline-endプロパティ

概要・使用方法

{scroll-margin-inline-start: 幅;}
{scroll-margin-inline-end: 幅;}

「scroll-margin-inline-startプロパティ」を指定するとインライン方向（横）の開始側にマージンを指定することができます。「scroll-margin-inline-endプロパティ」を指定するとインライン方向（横）の終了側にマージンを指定することができます。

scroll-margin-inline-startプロパティ、scroll-margin-inline-endプロパティも書字方向（文章の始まりと終わりの位置）に対してマージン（幅を）を指定できます。

writing-modeプロパティに「sideways-rl」か「sideways-lr」の指定が必要になります。

書字方向

書字方向（sideways-rl、sideways-lr）の解説図

指定できる値（幅）

数値+単位単位付きの数値で指定します。マイナスの値も指定可能です。
autoブラウザーの判断で「0」以外の値が選択される可能性があります。

単位付の数字の詳細は以下を参照

CSS辞典 単位付きの数字

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>scroll-margin-inline-start endプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>

.li-box1 {
  scroll-snap-type: y mandatory;
  -ms-scroll-snap-type: y mandatory;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  
}

.li-start-panel-1 {
  background-color:silver;
  writing-mode: sideways-rl;
  width: 100%;
  height: 200px;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-inline-start:100px;
}
.li-start-panel-2 {
  background-color:teal;
  writing-mode: sideways-rl;
  width: 100%;
  height: 200px;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-inline-start:100px;
}

.li-end-panel-1 {
  background-color:silver;
  writing-mode: sideways-rl;
  width: 100%;
  height: 200px;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-inline-end:50px;
}

.li-end-panel-2 {
  background-color:teal;
  writing-mode: sideways-rl;
  width: 100%;
  height: 200px;
  font-size: 5em;
  scroll-snap-align: center;
  text-align:center;
  scroll-margin-inline-end:50px;
}

    </style>
  </head>
  <body>
<h1>scroll-margin-inline-start:100px;</h1>
<div class="li-box1">
  <div class="li-start-panel-1">１</div>
  <div class="li-start-panel-2">２</div>
  <div class="li-start-panel-1">３</div>
  <div class="li-start-panel-2">４</div>
  <div class="li-start-panel-1">５</div>
</div>
<h1>scroll-margin-inline-end:50px;</h1>
<div class="li-box1">
  <div class="li-end-panel-1">１</div>
  <div class="li-end-panel-2">２</div>
  <div class="li-end-panel-1">３</div>
  <div class="li-end-panel-2">４</div>
  <div class="li-end-panel-1">５</div>
</div>

  </body>
</html>

scroll-margin-inline-start:100px;

１
２
３
４
５

scroll-margin-inline-end:50px;

１
２
３
４
５

Firefox 実行サンプル

Firefox

カテゴリー:CSS辞典​WEB​ボックス

タグ: