VIDEO LESSON

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

再生時間 6:55動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、スクロール・ビヘイビアです。
0:07ページ内リンクをクリックしたとき、移動先へ一瞬で切り替わるのではなく、滑らかにスクロールして移動する、
0:12その動き方を決めるプロパティです。
0:17前回は要素を変形させるトランスフォームを見ました。
0:21今回は、値がスムースとオートの二つだけという、とてもシンプルな指定を取り上げます。
0:27基本の書き方、実例での比較、効かないときの確認、そして動きを減らす設定への配慮まで、
0:31順番に見ていきましょう。
0:35たとえば、長いページの先頭にある目次リンクや、ページの上へ戻るリンクを思い浮かべてください。
0:42その移動の見え方が、このプロパティ一つで変わります。
0:46書き方を確認します。
0:48スクロール・ビヘイビアは、スクロールする領域、つまりスクロールコンテナーになる要素に指定します。
0:55クラス名デモの要素に対して、スクロール・ビヘイビア、コロン、スムース、セミコロン、
0:59と書くのが基本形です。
1:02ページ全体のスクロールを滑らかにしたい場合は、ルート要素であるエイチティーエムエル要素に指定する書き方もよく使われます。
1:11大切なのは、動かしたいスクロールそのものを担当する要素に書く、という点です。
1:17リンク側のエー要素に書いても効果はないので、指定先を間違えないようにしましょう。
1:23指定できる値は、オートとスムースの二つです。
1:26オートは初期値で、移動先へ瞬時にジャンプする、ふだん見慣れた動きです。
1:32スムースは、ブラウザーがアニメーションしながら滑らかにスクロールします。
1:37距離が長いほど移動に時間がかかり、途中の景色が見えるので、読み手が、どこへ移動したかを把握しやすくなります。
1:45この指定が効くのは、ページ内リンクによるアンカー移動や、一部のプログラムによるスクロールです。
1:52マウスホイールや指での手動スクロールの速さは変わらない、という点も覚えておきましょう。
1:59初期値と継承を確認します。
2:01初期値はオートです。
2:02そして、このプロパティは通常は継承しません。
2:05親要素にスムースを指定しても、内側の別のスクロール領域には自動では伝わらないので、
2:09領域ごとに指定が必要です。
2:13また、汎用的な値として、親の計算値を使うインヘリット、初期値に戻すイニシャルも書けます。
2:19アンセットは、継承しないプロパティなので、イニシャルと同じ扱いになります。
2:24普段はスムースかオートを直接書けば十分で、汎用値は読み解くときに知っていると安心です。
2:30実例で違いを比べてみましょう。
2:32まずエイチティーエムエルを用意します。
2:35リンクを置き、その下に、高さを決めて、中身があふれたらスクロールできる領域を作ります。
2:40領域の中には、背の高い余白用の段落、移動先の見出し、後続の段落を入れます。
2:45リンクのエイチアールイーエフには、見出しのアイ・ディーと同じ名前を、シャープ付きで書きます。
2:50こうすると、クリックしたときに、その見出しへ移動する仕組みになります。
2:55スタイルシートは、ヘッド内のリンク要素で読み込んでおきます。
2:58この実例は、ページ全体ではなく、決まった高さの領域の中でスクロールが起きる形です。
3:04領域の中だけが動くので、違いを小さな画面でも確認しやすいのが利点です。
3:08次にスタイルシートです。
3:10ステージで全体の幅と余白を整え、デモのクラスで枠線や背景を付けます。
3:15スクローラーで高さを十二レムにし、オーバーフロー・オートで、中身があふれた分だけスクロールできるようにします。
3:22スペーサーで高さを確保して、スクロールが必要な状態を作るのが土台です。
3:27そして最後に、今回変更するプロパティとして、デモにスクロール・ビヘイビア、
3:31スムースを指定します。
3:34加えて、動きを減らす設定の人向けに、メディアクエリでオートへ戻す行も用意しています。
3:40では、値をオートに書き換えて比べてみましょう。
3:44ファイルを保存したら、ブラウザーを再読み込みして、リンクをクリックします。
3:49スムースのときは、見出しまで滑らかにスクロールして、移動の過程が見えました。
3:55一方、オートでは、一瞬で見出しの位置へ切り替わります。
3:59たった一語の違いで、体感が大きく変わるのが分かります。
4:03比べるときは、ほかの指定は変えず、この値だけを切り替えるのがコツです。
4:09原因と結果の対応がはっきりして、理解が深まります。
4:12配慮の話です。
4:13滑らかなスクロールは便利ですが、画面の大きな動きで気分が悪くなる人もいます。
4:19そこで、端末やブラウザーで、動きを減らす設定をしている人には、スムースを無効化するのが望ましいとされています。
4:27書き方は、プリファーズ・リデュースト・モーション、リデュースのメディアクエリの中で、
4:32スクロール・ビヘイビアをオートに戻し、インポータントを付ける形です。
4:38実例のスタイルシートにも、この行があらかじめ入っていました。
4:42飾りの動きほど、止める手段を用意しておくことが大切です。
4:46効かないときの確認です。
4:48まず多い勘違いは、手動スクロールの速度を変える指定だと思ってしまうことです。
4:53ホイールやスワイプの動きには影響しません。
4:56次に、指定する要素の取り違えです。
4:58実際にスクロールしている要素に指定されているかを確認しましょう。
5:03さらに、ブラウザーの設定でスムーススクロール自体が無効になっていると、ブラウザーがスムースを無視する場合もあります。
5:11開発者ツールでは、スタイルシートが読み込まれているか、セレクターが一致しているか、
5:17宣言が打ち消されていないか、最後にコンピューテッドで最終値は何かを、順番にたどります。
5:23ブラウザー互換性です。
5:25二千二十六年九月に確認された、エムディーエヌのデータでは、クロームは六十一以降、
5:32エッジは七十九以降、ファイアフォックスは三十六以降、サファリは十五点四以降で使えます。
5:38アンドロイド版クロームは六十一以降、アイオーエス版サファリは十五点四以降です。
5:45スムースとオート、どちらの値も同じ対応状況です。
5:49サファリは対応が始まるのが少し遅かったので、古い端末では瞬時に移動するだけ、
5:53と割り切ると安全です。
5:57対応していない環境でも、リンクの移動そのものは問題なく動きます。
6:02なお、ここでの対応はプロパティ自体のものです。
6:06組み合わせる他の指定まで含めて確認したい場合は、エムディーエヌの個別ページもあわせて参照してください。
6:14練習とまとめです。
6:16まず、スムースとオートの違いを、自分の言葉で説明してみてください。
6:21次に、実例の値だけを切り替えて、移動の見え方を比べましょう。
6:26関連するプロパティとして、移動先の見出しが固定ヘッダーに隠れないよう調整する、
6:33スクロール・パディング・トップと、スクロール・マージン・トップが、次回以降のテーマです。
6:40今回のポイントは三つ。
6:41スクロール・ビヘイビアはスクロールする要素に書くこと、値はスムースとオートの二択であること、
6:47そして、動きを減らす設定への配慮を忘れないことです。
6:53お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

scroll-behaviorの役割と主な指定値を解説。ページ内リンクによる移動が滑らかになるかを比べます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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