WEBVTT

1
00:00:00.000 --> 00:00:00.913
こんにちは。

2
00:00:00.913 --> 00:00:03.654
シーエスエス、リファレンス解説です。

3
00:00:03.654 --> 00:00:07.003
今回のテーマは、スクロール・ビヘイビアです。

4
00:00:07.003 --> 00:00:12.180
ページ内リンクをクリックしたとき、移動先へ一瞬で切り替わるのではなく、滑らかにスクロールして移動する、

5
00:00:12.180 --> 00:00:17.356
その動き方を決めるプロパティです。

6
00:00:17.356 --> 00:00:21.163
前回は要素を変形させるトランスフォームを見ました。

7
00:00:21.163 --> 00:00:27.405
今回は、値がスムースとオートの二つだけという、とてもシンプルな指定を取り上げます。

8
00:00:27.405 --> 00:00:31.515
基本の書き方、実例での比較、効かないときの確認、そして動きを減らす設定への配慮まで、

9
00:00:31.515 --> 00:00:35.626
順番に見ていきましょう。

10
00:00:35.626 --> 00:00:42.630
たとえば、長いページの先頭にある目次リンクや、ページの上へ戻るリンクを思い浮かべてください。

11
00:00:42.630 --> 00:00:46.588
その移動の見え方が、このプロパティ一つで変わります。

12
00:00:46.588 --> 00:00:48.078
書き方を確認します。

13
00:00:48.078 --> 00:00:55.227
スクロール・ビヘイビアは、スクロールする領域、つまりスクロールコンテナーになる要素に指定します。

14
00:00:55.227 --> 00:00:59.100
クラス名デモの要素に対して、スクロール・ビヘイビア、コロン、スムース、セミコロン、

15
00:00:59.100 --> 00:01:02.973
と書くのが基本形です。

16
00:01:02.973 --> 00:01:11.910
ページ全体のスクロールを滑らかにしたい場合は、ルート要素であるエイチティーエムエル要素に指定する書き方もよく使われます。

17
00:01:11.910 --> 00:01:17.570
大切なのは、動かしたいスクロールそのものを担当する要素に書く、という点です。

18
00:01:17.570 --> 00:01:23.528
リンク側のエー要素に書いても効果はないので、指定先を間違えないようにしましょう。

19
00:01:23.528 --> 00:01:26.861
指定できる値は、オートとスムースの二つです。

20
00:01:26.861 --> 00:01:32.164
オートは初期値で、移動先へ瞬時にジャンプする、ふだん見慣れた動きです。

21
00:01:32.164 --> 00:01:37.618
スムースは、ブラウザーがアニメーションしながら滑らかにスクロールします。

22
00:01:37.618 --> 00:01:45.800
距離が長いほど移動に時間がかかり、途中の景色が見えるので、読み手が、どこへ移動したかを把握しやすくなります。

23
00:01:45.800 --> 00:01:52.921
この指定が効くのは、ページ内リンクによるアンカー移動や、一部のプログラムによるスクロールです。

24
00:01:52.921 --> 00:01:59.436
マウスホイールや指での手動スクロールの速さは変わらない、という点も覚えておきましょう。

25
00:01:59.436 --> 00:02:01.265
初期値と継承を確認します。

26
00:02:01.265 --> 00:02:02.672
初期値はオートです。

27
00:02:02.672 --> 00:02:05.767
そして、このプロパティは通常は継承しません。

28
00:02:05.767 --> 00:02:09.565
親要素にスムースを指定しても、内側の別のスクロール領域には自動では伝わらないので、

29
00:02:09.565 --> 00:02:13.363
領域ごとに指定が必要です。

30
00:02:13.363 --> 00:02:19.553
また、汎用的な値として、親の計算値を使うインヘリット、初期値に戻すイニシャルも書けます。

31
00:02:19.553 --> 00:02:24.759
アンセットは、継承しないプロパティなので、イニシャルと同じ扱いになります。

32
00:02:24.759 --> 00:02:30.808
普段はスムースかオートを直接書けば十分で、汎用値は読み解くときに知っていると安心です。

33
00:02:30.808 --> 00:02:32.687
実例で違いを比べてみましょう。

34
00:02:32.687 --> 00:02:35.067
まずエイチティーエムエルを用意します。

35
00:02:35.067 --> 00:02:40.454
リンクを置き、その下に、高さを決めて、中身があふれたらスクロールできる領域を作ります。

36
00:02:40.454 --> 00:02:45.089
領域の中には、背の高い余白用の段落、移動先の見出し、後続の段落を入れます。

37
00:02:45.089 --> 00:02:50.852
リンクのエイチアールイーエフには、見出しのアイ・ディーと同じ名前を、シャープ付きで書きます。

38
00:02:50.852 --> 00:02:55.237
こうすると、クリックしたときに、その見出しへ移動する仕組みになります。

39
00:02:55.237 --> 00:02:58.995
スタイルシートは、ヘッド内のリンク要素で読み込んでおきます。

40
00:02:58.995 --> 00:03:04.131
この実例は、ページ全体ではなく、決まった高さの領域の中でスクロールが起きる形です。

41
00:03:04.131 --> 00:03:08.516
領域の中だけが動くので、違いを小さな画面でも確認しやすいのが利点です。

42
00:03:08.516 --> 00:03:10.226
次にスタイルシートです。

43
00:03:10.226 --> 00:03:15.072
ステージで全体の幅と余白を整え、デモのクラスで枠線や背景を付けます。

44
00:03:15.072 --> 00:03:22.912
スクローラーで高さを十二レムにし、オーバーフロー・オートで、中身があふれた分だけスクロールできるようにします。

45
00:03:22.912 --> 00:03:27.900
スペーサーで高さを確保して、スクロールが必要な状態を作るのが土台です。

46
00:03:27.900 --> 00:03:31.321
そして最後に、今回変更するプロパティとして、デモにスクロール・ビヘイビア、

47
00:03:31.321 --> 00:03:34.742
スムースを指定します。

48
00:03:34.742 --> 00:03:40.728
加えて、動きを減らす設定の人向けに、メディアクエリでオートへ戻す行も用意しています。

49
00:03:40.728 --> 00:03:44.220
では、値をオートに書き換えて比べてみましょう。

50
00:03:44.220 --> 00:03:49.838
ファイルを保存したら、ブラウザーを再読み込みして、リンクをクリックします。

51
00:03:49.838 --> 00:03:55.607
スムースのときは、見出しまで滑らかにスクロールして、移動の過程が見えました。

52
00:03:55.607 --> 00:03:59.707
一方、オートでは、一瞬で見出しの位置へ切り替わります。

53
00:03:59.707 --> 00:04:03.806
たった一語の違いで、体感が大きく変わるのが分かります。

54
00:04:03.806 --> 00:04:09.120
比べるときは、ほかの指定は変えず、この値だけを切り替えるのがコツです。

55
00:04:09.120 --> 00:04:12.916
原因と結果の対応がはっきりして、理解が深まります。

56
00:04:12.916 --> 00:04:13.921
配慮の話です。

57
00:04:13.921 --> 00:04:19.374
滑らかなスクロールは便利ですが、画面の大きな動きで気分が悪くなる人もいます。

58
00:04:19.374 --> 00:04:27.266
そこで、端末やブラウザーで、動きを減らす設定をしている人には、スムースを無効化するのが望ましいとされています。

59
00:04:27.266 --> 00:04:32.720
書き方は、プリファーズ・リデュースト・モーション、リデュースのメディアクエリの中で、

60
00:04:32.720 --> 00:04:38.173
スクロール・ビヘイビアをオートに戻し、インポータントを付ける形です。

61
00:04:38.173 --> 00:04:42.478
実例のスタイルシートにも、この行があらかじめ入っていました。

62
00:04:42.478 --> 00:04:46.496
飾りの動きほど、止める手段を用意しておくことが大切です。

63
00:04:46.496 --> 00:04:48.190
効かないときの確認です。

64
00:04:48.190 --> 00:04:53.555
まず多い勘違いは、手動スクロールの速度を変える指定だと思ってしまうことです。

65
00:04:53.555 --> 00:04:56.519
ホイールやスワイプの動きには影響しません。

66
00:04:56.519 --> 00:04:58.919
次に、指定する要素の取り違えです。

67
00:04:58.919 --> 00:05:03.437
実際にスクロールしている要素に指定されているかを確認しましょう。

68
00:05:03.437 --> 00:05:11.625
さらに、ブラウザーの設定でスムーススクロール自体が無効になっていると、ブラウザーがスムースを無視する場合もあります。

69
00:05:11.625 --> 00:05:17.555
開発者ツールでは、スタイルシートが読み込まれているか、セレクターが一致しているか、

70
00:05:17.555 --> 00:05:23.484
宣言が打ち消されていないか、最後にコンピューテッドで最終値は何かを、順番にたどります。

71
00:05:23.484 --> 00:05:25.296
ブラウザー互換性です。

72
00:05:25.296 --> 00:05:32.131
二千二十六年九月に確認された、エムディーエヌのデータでは、クロームは六十一以降、

73
00:05:32.131 --> 00:05:38.966
エッジは七十九以降、ファイアフォックスは三十六以降、サファリは十五点四以降で使えます。

74
00:05:38.966 --> 00:05:45.390
アンドロイド版クロームは六十一以降、アイオーエス版サファリは十五点四以降です。

75
00:05:45.390 --> 00:05:49.343
スムースとオート、どちらの値も同じ対応状況です。

76
00:05:49.343 --> 00:05:53.378
サファリは対応が始まるのが少し遅かったので、古い端末では瞬時に移動するだけ、

77
00:05:53.378 --> 00:05:57.413
と割り切ると安全です。

78
00:05:57.413 --> 00:06:02.684
対応していない環境でも、リンクの移動そのものは問題なく動きます。

79
00:06:02.684 --> 00:06:06.472
なお、ここでの対応はプロパティ自体のものです。

80
00:06:06.472 --> 00:06:14.872
組み合わせる他の指定まで含めて確認したい場合は、エムディーエヌの個別ページもあわせて参照してください。

81
00:06:14.872 --> 00:06:16.334
練習とまとめです。

82
00:06:16.334 --> 00:06:21.696
まず、スムースとオートの違いを、自分の言葉で説明してみてください。

83
00:06:21.696 --> 00:06:26.570
次に、実例の値だけを切り替えて、移動の見え方を比べましょう。

84
00:06:26.570 --> 00:06:33.313
関連するプロパティとして、移動先の見出しが固定ヘッダーに隠れないよう調整する、

85
00:06:33.313 --> 00:06:40.056
スクロール・パディング・トップと、スクロール・マージン・トップが、次回以降のテーマです。

86
00:06:40.056 --> 00:06:41.843
今回のポイントは三つ。

87
00:06:41.843 --> 00:06:47.693
スクロール・ビヘイビアはスクロールする要素に書くこと、値はスムースとオートの二択であること、

88
00:06:47.693 --> 00:06:53.542
そして、動きを減らす設定への配慮を忘れないことです。

89
00:06:53.542 --> 00:06:55.004
お疲れさまでした。