WEBVTT

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

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

3
00:00:04.221 --> 00:00:07.562
今回のテーマは、トランスフォームです。

4
00:00:07.562 --> 00:00:13.365
前回は、変形の基準点を決めるトランスフォーム・オリジンを見ました。

5
00:00:13.365 --> 00:00:19.521
今回は、その変形そのものを指定するトランスフォーム本体を取り上げます。

6
00:00:19.521 --> 00:00:27.610
トランスフォームは、要素を移動させたり、回したり、大きくしたり、傾けたりするための指定です。

7
00:00:27.610 --> 00:00:34.996
大きな特徴は、見た目だけが変わって、レイアウト上の占有領域は元のまま、という点です。

8
00:00:34.996 --> 00:00:40.360
このあと、主な関数の書き方、組み合わせる順番の注意、実例での比較、そして効かないときの調べ方まで、

9
00:00:40.360 --> 00:00:45.724
順番に確認していきます。

10
00:00:45.724 --> 00:00:47.352
書き方を確認します。

11
00:00:47.352 --> 00:00:52.561
トランスフォームには、行いたい変形を「関数」という形で書きます。

12
00:00:52.561 --> 00:00:59.724
関数は、変形の種類と量をセットにした書き方で、半角スペースで区切れば複数を並べられます。

13
00:00:59.724 --> 00:01:06.236
たとえば、トランスレイト・ワイにマイナス、ゼロ点五レム、ローテートにマイナス三度と書くと、

14
00:01:06.236 --> 00:01:12.747
「少し上へ移動して、三度傾ける」という二つの変形が一度に適用されます。

15
00:01:12.747 --> 00:01:20.398
プロパティ名の後ろにコロン、値の最後にセミコロンを書く、という宣言の基本はこれまでと同じです。

16
00:01:20.398 --> 00:01:26.096
変形は、前回学んだトランスフォーム・オリジンの基準点を軸に行われます。

17
00:01:26.096 --> 00:01:29.472
主な関数を、移動と回転から見ていきます。

18
00:01:29.472 --> 00:01:31.666
移動はトランスレイトです。

19
00:01:31.666 --> 00:01:36.561
トランスレイト・エックスは横方向、トランスレイト・ワイは縦方向への移動で、

20
00:01:36.561 --> 00:01:41.455
ピクセルやレムなどの長さで量を指定します。

21
00:01:41.455 --> 00:01:46.856
トランスレイトに二つの値を書けば、横と縦をまとめて指定できます。

22
00:01:46.856 --> 00:01:51.582
マイナスの値を書くと、左や上といった反対方向へ動きます。

23
00:01:51.582 --> 00:01:57.321
パーセントで指定した場合は、要素自身の大きさに対する割合になります。

24
00:01:57.321 --> 00:02:01.203
回転はローテートで、単位はデグ、つまり度です。

25
00:02:01.203 --> 00:02:05.760
プラスの値で時計回り、マイナスで反時計回りに回ります。

26
00:02:05.760 --> 00:02:13.524
ホバーでカードを少し浮かせたり、バッジを少し傾けたりする演出で、よく使われる組み合わせです。

27
00:02:13.524 --> 00:02:15.558
次に、拡大と傾けです。

28
00:02:15.558 --> 00:02:20.737
拡大縮小はスケールで、単位のない数値で倍率を指定します。

29
00:02:20.737 --> 00:02:27.580
一なら元の大きさ、一・二なら一・二倍への拡大、ゼロ・八なら少しの縮小です。

30
00:02:27.580 --> 00:02:34.978
スケール・エックス、スケール・ワイを使えば、横と縦を別々に変えることもできます。

31
00:02:34.978 --> 00:02:41.451
傾けはスキューで、角度を指定して要素を平行四辺形のようにゆがませます。

32
00:02:41.451 --> 00:02:46.075
見出しの装飾で斜めの帯を作るときなどに使われます。

33
00:02:46.075 --> 00:02:52.085
これらの関数は自由に組み合わせられますが、何種類も重ねると意図しない形になりやすいので、

34
00:02:52.085 --> 00:02:58.096
最初は一つか二つから試すのがおすすめです。

35
00:02:58.096 --> 00:02:59.977
初期値と継承を確認します。

36
00:02:59.977 --> 00:03:04.753
トランスフォームの初期値はノーンで、「変形しない」という意味です。

37
00:03:04.753 --> 00:03:09.674
あとで見る実例でも、ノーンに書き換えると要素は通常の表示に戻ります。

38
00:03:09.674 --> 00:03:13.147
そして、このプロパティは親から子へ継承しません。

39
00:03:13.147 --> 00:03:18.068
親に変形を設定しても、子が自動的に同じ変形を受けることはありません。

40
00:03:18.068 --> 00:03:22.844
ただし見た目の上では、親が動けば、その中身も一緒に動いて見えます。

41
00:03:22.844 --> 00:03:27.620
あくまで「指定が伝わるわけではない」という区別を押さえてください。

42
00:03:27.620 --> 00:03:32.396
変形をやめたいときは、宣言自体を消すか、ノーンに戻すのが確実です。

43
00:03:32.396 --> 00:03:36.260
ここからは、ブラウザーで比べられる実例で確認します。

44
00:03:36.260 --> 00:03:42.353
エイチティーエムエルでは、ステージという親要素の中に、デモという箱を一つ置きます。

45
00:03:42.353 --> 00:03:43.839
文章が入った箱です。

46
00:03:43.839 --> 00:03:46.811
スタイルシートでは、まず土台を整えます。

47
00:03:46.811 --> 00:03:53.202
ステージに最大幅と余白を持たせ、デモには内側の余白、緑色の枠線、薄い背景色を付けます。

48
00:03:53.202 --> 00:03:57.957
これは違いを見やすくするための準備で、今回の主役ではありません。

49
00:03:57.957 --> 00:04:01.821
主役は、このあとデモに追加するトランスフォームです。

50
00:04:01.821 --> 00:04:05.685
同じ箱で、変形ありと変形なしを見比べていきましょう。

51
00:04:05.685 --> 00:04:11.184
ファイルを保存して、ブラウザーで一度表示を確認してから次へ進んでください。

52
00:04:11.184 --> 00:04:12.436
実例の本題です。

53
00:04:12.436 --> 00:04:16.425
デモに、トランスレイト・ワイでマイナス、ゼロ点五レム、ローテートでマイナス三度、

54
00:04:16.425 --> 00:04:20.414
という指定を書きます。

55
00:04:20.414 --> 00:04:26.828
ブラウザーで見ると、箱が少し上へ浮き上がり、反時計回りに三度傾いた状態になります。

56
00:04:26.828 --> 00:04:30.582
ここで注目してほしいのは、箱の「元の場所」です。

57
00:04:30.582 --> 00:04:33.398
まわりの要素の配置は一切動きません。

58
00:04:33.398 --> 00:04:39.812
トランスフォームは占有領域を元のまま保つので、見た目だけがはみ出した形になります。

59
00:04:39.812 --> 00:04:45.914
カードにホバーしたとき少し浮かせる、といった演出に向いているのはこのためです。

60
00:04:45.914 --> 00:04:51.076
逆に、変形で隣と重なってしまう場合があることも覚えておきましょう。

61
00:04:51.076 --> 00:04:54.364
次に、値をノーンに置き換えて比較します。

62
00:04:54.364 --> 00:04:58.804
箱は傾きも浮き上がりもなくなり、通常の表示に戻ります。

63
00:04:58.804 --> 00:05:07.189
変形前と変形後を並べることで、トランスフォームが「見た目だけを変える指定」であることがはっきりします。

64
00:05:07.189 --> 00:05:10.806
もう一つ試してほしいのが、関数の並び順です。

65
00:05:10.806 --> 00:05:17.218
移動してから回す書き方と、回してから移動する書き方では、結果が少し変わります。

66
00:05:17.218 --> 00:05:21.822
回転したあとの移動は、傾いた軸に沿って行われるためです。

67
00:05:21.822 --> 00:05:27.248
思った位置に来ないときは、量だけでなく順番も見直してみてください。

68
00:05:27.248 --> 00:05:29.585
効かないときの確認方法です。

69
00:05:29.585 --> 00:05:34.258
いちばん多い原因は、対象がインライン要素であることです。

70
00:05:34.258 --> 00:05:40.767
スパンやエー要素のようなインライン要素には、トランスフォームが適用されません。

71
00:05:40.767 --> 00:05:47.443
ディスプレイをブロック、またはインライン・ブロックに変えると効くようになります。

72
00:05:47.443 --> 00:05:50.280
次に開発者ツールで順番に調べます。

73
00:05:50.280 --> 00:05:55.538
スタイルズで宣言に打ち消し線が付いていないか、別の宣言に上書きされていないかを見て、

74
00:05:55.538 --> 00:06:00.795
コンピューテッドで最終的な値を確認します。

75
00:06:00.795 --> 00:06:09.641
また、占有領域は元のままなので、変形した要素が隣と重なったり、重なりの順序が変わったりすることがあります。

76
00:06:09.641 --> 00:06:13.980
見た目が崩れたときは、この性質も疑ってみてください。

77
00:06:13.980 --> 00:06:16.195
ブラウザー互換性を確認します。

78
00:06:16.195 --> 00:06:21.362
トランスフォームは、クローム三十六以降、エッジ十二以降、ファイアーフォックス十六以降、

79
00:06:21.362 --> 00:06:26.530
サファリ九以降と、主要なブラウザーで古くから使えます。

80
00:06:26.530 --> 00:06:33.912
この記事が参照しているエムディーエヌの互換性データでも、接頭辞なしの標準の指定が広くそろっています。

81
00:06:33.912 --> 00:06:38.046
日常の制作で互換性を心配する必要は、ほとんどありません。

82
00:06:38.046 --> 00:06:43.362
ただし、プロパティが使えることと、すべての値や構文が使えることは別です。

83
00:06:43.362 --> 00:06:49.858
三次元方向の変形など新しい書き方を使う場合は、対象のブラウザーで改めて確認してください。

84
00:06:49.858 --> 00:06:53.992
値の種類によって対応の始まった時期が違うこともあります。

85
00:06:53.992 --> 00:06:56.047
最後に練習とまとめです。

86
00:06:56.047 --> 00:07:04.437
まず、トランスレイト・ワイとローテートの指定と、ノーンの違いを、自分の言葉で説明してみてください。

87
00:07:04.437 --> 00:07:10.773
次に、角度や移動量を一つずつ変えて、結果がどう変わるかを比べてみましょう。

88
00:07:10.773 --> 00:07:16.937
一度に複数を変えるより、一つずつのほうが原因と結果を追いやすくなります。

89
00:07:16.937 --> 00:07:24.642
応用として、以前学んだトランジションと組み合わせると、変形が滑らかにアニメーションします。

90
00:07:24.642 --> 00:07:30.378
今日のポイントは、トランスフォームは見た目だけを変えること、関数の順番で結果が変わること、

91
00:07:30.378 --> 00:07:36.115
インライン要素には効かないこと、の三つです。

92
00:07:36.115 --> 00:07:42.108
次回は、スクロールの動きを整えるスクロール・ビヘイビアを取り上げます。

93
00:07:42.108 --> 00:07:43.820
おつかれさまでした。