WEBVTT

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

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

3
00:00:03.461 --> 00:00:06.777
今回のテーマは、トランジション・ディレイです。

4
00:00:06.777 --> 00:00:11.391
前回は、変化を滑らかにするトランジションの一括指定を学びました。

5
00:00:11.391 --> 00:00:17.591
今回はその仲間で、「変化が始まるまでの待ち時間」を決める個別プロパティを取り上げます。

6
00:00:17.591 --> 00:00:23.936
マウスを乗せても、色が変わり始めるのが少しだけ遅れる、そんな様子を思い浮かべてください。

7
00:00:23.936 --> 00:00:29.415
なぜわざわざ遅らせるのか、どう書けばよいのか、効かないときはどこを見るのか。

8
00:00:29.415 --> 00:00:31.434
順番に整理していきましょう。

9
00:00:31.434 --> 00:00:35.255
前回のトランジションの考え方が土台になるので、不安な方は先にそちらを振り返っておくと、

10
00:00:35.255 --> 00:00:39.076
理解がスムーズです。

11
00:00:39.076 --> 00:00:42.280
まず、全体の中での位置づけを確認します。

12
00:00:42.280 --> 00:00:47.461
トランジションには、対象を決めるプロパティ、変化にかける時間を決めるデュレーション、

13
00:00:47.461 --> 00:00:52.641
進み方を決めるタイミング・ファンクション、そして今回の遅延を決めるディレイという、

14
00:00:52.641 --> 00:00:57.822
四つの個別の指定があります。

15
00:00:57.822 --> 00:01:04.711
一括指定で時間を二つ書くと、一つ目が変化にかける時間、二つ目が遅延になる決まりでした。

16
00:01:04.711 --> 00:01:11.120
画面の例では、四百ミリ秒かけて変化し、始まるまで三百ミリ秒待つ、という意味です。

17
00:01:11.120 --> 00:01:17.048
遅延だけを後から変えたいときは、この個別プロパティで指定するのが確実です。

18
00:01:17.048 --> 00:01:18.877
書き方を見てみましょう。

19
00:01:18.877 --> 00:01:24.517
セレクターで要素を選び、トランジション・ディレイに時間を指定するだけです。

20
00:01:24.517 --> 00:01:29.547
単位は、ミリ秒を表すエムエスか、秒を表すエスのどちらかを使います。

21
00:01:29.547 --> 00:01:32.138
三百ミリ秒は、〇点三秒のことです。

22
00:01:32.138 --> 00:01:36.864
記事の比較例でも、この三百ミリ秒という値が基準になっています。

23
00:01:36.864 --> 00:01:41.436
大切なのは、この指定だけでは変化が滑らかにはならない点です。

24
00:01:41.436 --> 00:01:46.162
ディレイはあくまで開始のタイミングをずらす役割で、滑らかな変化そのものは、

25
00:01:46.162 --> 00:01:50.887
トランジション本体の指定があって初めて生まれます。

26
00:01:50.887 --> 00:01:54.088
本体とセットで書くことを意識してください。

27
00:01:54.088 --> 00:01:58.356
秒単位で書くなら、ゼロ点三エスという小数表記も使えます。

28
00:01:58.356 --> 00:02:00.292
値の読み方を整理します。

29
00:02:00.292 --> 00:02:07.551
正の値を書くと、ホバーなどの状態変化が起きてから、指定した時間だけ待って変化が始まります。

30
00:02:07.551 --> 00:02:13.682
反対に負の値を書くと、変化が途中まで進んだ状態から始まったように扱われます。

31
00:02:13.682 --> 00:02:18.763
たとえば変化全体が四百ミリ秒で遅延がマイナス百ミリ秒なら、最初の百ミリ秒分を飛ばして、

32
00:02:18.763 --> 00:02:23.845
残り三百ミリ秒の部分から始まる計算です。

33
00:02:23.845 --> 00:02:27.717
仕様上の初期値はゼロ秒、つまり待ち時間なしです。

34
00:02:27.717 --> 00:02:30.620
また、このプロパティは継承しません。

35
00:02:30.620 --> 00:02:35.944
親に書いても子には効かないので、対象の要素自身に指定してください。

36
00:02:35.944 --> 00:02:39.008
意外な落とし穴が、戻るときの動きです。

37
00:02:39.008 --> 00:02:44.491
通常状態のルールにディレイを書くと、その待ち時間は、ホバーして変化するときだけでなく、

38
00:02:44.491 --> 00:02:49.975
マウスを離して元に戻るときにも同じように付きます。

39
00:02:49.975 --> 00:02:57.877
ホバーを外したのに一拍遅れて戻り始めると、利用者は操作がもたついているように感じるかもしれません。

40
00:02:57.877 --> 00:03:04.973
記事でも、クリックやフォーカスの反応まで遅らせると操作しづらくなる、と注意されています。

41
00:03:04.973 --> 00:03:11.747
遅延を入れるときは、行きの動きだけでなく、帰りの動きも含めて確認することが大切です。

42
00:03:11.747 --> 00:03:19.004
なお、状態側のルールにだけ書いた場合は、戻るときには遅延が付かないという違いも生まれます。

43
00:03:19.004 --> 00:03:22.485
記事の活用例を、まとめた形で見てみましょう。

44
00:03:22.485 --> 00:03:30.080
薄い緑色のボタンが用意され、背景色と位置の変化に、四百ミリ秒のトランジションが指定されています。

45
00:03:30.080 --> 00:03:34.273
ホバー、またはキーボードのフォーカスが当たると、背景がオレンジ寄りの色になり、

46
00:03:34.273 --> 00:03:38.466
ボタンが少し上へ移動します。

47
00:03:38.466 --> 00:03:45.111
そこへ最後の行、トランジション・ディレイ三百ミリ秒が加わるのが、今回のポイントです。

48
00:03:45.111 --> 00:03:52.548
状態が変わってから三百ミリ秒の間は見た目がそのままで、その後に四百ミリ秒かけて変化が進みます。

49
00:03:52.548 --> 00:03:57.453
時間の流れを分けて読むと、コードの意味がつかみやすくなります。

50
00:03:57.453 --> 00:04:03.624
この例では、背景色と位置の両方に、同じ三百ミリ秒の遅延がまとめて効いています。

51
00:04:03.624 --> 00:04:06.556
違いを確かめるには、記事の比較方法が手軽です。

52
00:04:06.556 --> 00:04:10.254
最後のディレイの行だけを、ゼロ秒に書き替えてみてください。

53
00:04:10.254 --> 00:04:16.883
ホバーした瞬間に変化が始まるようになり、三百ミリ秒のときの、ワンテンポ遅れる感じとの差がはっきりします。

54
00:04:16.883 --> 00:04:22.748
記事の練習でも勧められているように、まずはこの二つの違いを、自分の言葉で説明してみましょう。

55
00:04:22.748 --> 00:04:27.975
複数の値を一度に書き換えず、一つずつ変えて比べることが、原因と結果を追うコツです。

56
00:04:27.975 --> 00:04:32.692
書き替えたらファイルを保存して、ブラウザーを再読み込みする流れも忘れずに。

57
00:04:32.692 --> 00:04:36.168
応用として、対象ごとに違う遅延も設定できます。

58
00:04:36.168 --> 00:04:40.022
値をカンマで区切って並べると、トランジション・プロパティで指定した対象の並び順に、

59
00:04:40.022 --> 00:04:43.876
それぞれ対応します。

60
00:04:43.876 --> 00:04:49.922
画面の例では、背景色は待ち時間なしで、位置の変化は百五十ミリ秒遅れて始まります。

61
00:04:49.922 --> 00:04:54.910
複数の対象に時間差を付けると、順番に動き出すような演出が作れます。

62
00:04:54.910 --> 00:04:59.973
ただし、数が増えるほど対応関係が読み取りにくくなるので、並び順をそろえて書くことと、

63
00:04:59.973 --> 00:05:05.036
意図が伝わる最小限の指定にとどめることが大切です。

64
00:05:05.036 --> 00:05:11.384
値の数が対象より少ない場合は、先頭から繰り返して対応付けられる決まりになっています。

65
00:05:11.384 --> 00:05:13.296
使いどころを考えましょう。

66
00:05:13.296 --> 00:05:19.033
ディレイが生きるのは、カードを順番に出現させたい、といった意図のある演出です。

67
00:05:19.033 --> 00:05:24.035
逆に、クリックやフォーカスへの反応を遅らせるのは避けたいところです。

68
00:05:24.035 --> 00:05:29.477
反応が遅いと、利用者は効いていないのかと不安になり、操作しづらくなります。

69
00:05:29.477 --> 00:05:34.038
記事も、遅延が必要な理由を決めてから指定するよう勧めています。

70
00:05:34.038 --> 00:05:38.745
あわせて、端末の「動きを減らす」設定が有効な人には、メディアクエリでトランジション自体を止める配慮も、

71
00:05:38.745 --> 00:05:43.452
記事の例に含まれています。

72
00:05:43.452 --> 00:05:44.868
効かないときの確認です。

73
00:05:44.868 --> 00:05:47.581
ディレイで多い勘違いは、本体が無いケースです。

74
00:05:47.581 --> 00:05:50.943
トランジションの対象や、変化にかける時間が指定されていなければ、遅らせたくても、

75
00:05:50.943 --> 00:05:54.305
そもそも滑らかな変化が起きません。

76
00:05:54.305 --> 00:05:56.192
まず本体があるかを見てください。

77
00:05:56.192 --> 00:05:58.315
次に、開発者ツールでの切り分けです。

78
00:05:58.315 --> 00:06:02.326
ネットワークでスタイルシートが読み込まれているか、エレメンツでクラスとセレクターが一致しているか、

79
00:06:02.326 --> 00:06:06.337
スタイルズで宣言が打ち消されていないか、コンピューテッドで最終的な値がどうなっているか、

80
00:06:06.337 --> 00:06:10.348
の順に確認します。

81
00:06:10.348 --> 00:06:15.184
小さい画面幅やキーボード操作で使えるかの確認も、記事の観点として挙げられています。

82
00:06:15.184 --> 00:06:19.881
ブラウザー互換性は良好で、クローム、エッジ、ファイアフォックス、サファリのいずれも、

83
00:06:19.881 --> 00:06:24.577
かなり前のバージョンから接頭辞なしで使えます。

84
00:06:24.577 --> 00:06:28.046
安心して基本の使い方に集中できるプロパティです。

85
00:06:28.046 --> 00:06:33.248
まとめると、トランジション・ディレイは、変化が始まるまでの待ち時間です。

86
00:06:33.248 --> 00:06:35.705
初期値はゼロ秒で、継承はしません。

87
00:06:35.705 --> 00:06:41.775
練習として、記事の例で三百ミリ秒とゼロ秒を見比べ、違いを言葉で説明してみてください。

88
00:06:41.775 --> 00:06:48.133
次回は、変化の進み方を決める、トランジション・タイミング・ファンクションを取り上げます。

89
00:06:48.133 --> 00:06:49.434
お疲れさまでした。

90
00:06:49.434 --> 00:06:53.119
時間の指定は短すぎると効果が分かりにくいので、最初は三百ミリ秒前後で試すと、

91
00:06:53.119 --> 00:06:56.804
違いが見えやすくなります。