【CSS】scroll-margin-block、scroll-margin-inlineプロパティで書字方向に応じてスナップされる位置のマージン幅をまとめて指定しよう!

scroll-margin-block、scroll-margin-inlineについて知りたい人

scroll-margin-block、scroll-margin-inlineについて知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

scroll-margin-block、scroll-margin-inlineとは?
scroll-margin-block、scroll-margin-inlineの使い方
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

この記事ではscroll-margin-block、scroll-margin-inlineについて解説していきます。

よく使用する要素の一つなのでしっかりと理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

scroll-margin-block、scroll-margin-inlineの評価

頻出度

(1.0)

重要度

(1.0)

総合評価

(1.0)

1.scroll-margin-block、scroll-margin-inlineとは?

scroll-margin-block、scroll-margin-inlineプロパティは書字方向に応じてスナップされる位置のマージン幅をまとめて指定する際に利用します。

値の指定方法は以下の通りです。

{ scroll-margin-block: 値; }

{ scroll-margin-inline: 値; }

値の指定方法

値が2つ指定された場合、順に始端辺、終端辺の幅となります。

値が1つ指定された場合、始端辺、終端辺の両方に値が適用されます。

2.scroll-margin-block、scroll-margin-inlineの使い方

それではscroll-margin-block、scroll-margin-inlineの使い方をみていきましょう。

.scroll {
 width: 300px;
 height: 300px;
 overflow-x: scroll;
 display: flex;
 box-sizing: border-box;
 scroll-snap-type: x mandatory;
}

.scroll > div {
 flex: 0 0 300px;
 border: 1px solid #000;
 background-color: #57e714;
 color: #fff;
 font-size: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 scroll-snap-align: end;
}

.scroll > div: nth-child(2n) {
 background-color: #fff;
 color: #0fe962;
}

.scroll > div: nth-child(2) {
 scroll-margin-inline: 2rem;
}

他にも値を設定できるのでいろいろと試してみることをオススメします!

3.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント