WEBVTT

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

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

3
00:00:03.669 --> 00:00:07.337
今回のテーマは、トランスフォーム・オリジンです。

4
00:00:07.337 --> 00:00:11.312
前回まででトランジションの四つの担当を見てきました。

5
00:00:11.312 --> 00:00:15.134
今回からは変形、トランスフォームの仲間に入ります。

6
00:00:15.134 --> 00:00:22.471
トランスフォーム・オリジンは、要素を回転させたり拡大したりするときの「基準点」を決める指定です。

7
00:00:22.471 --> 00:00:26.140
紙を画鋲で留めて回す場面を思い浮かべてください。

8
00:00:26.140 --> 00:00:31.031
画鋲の位置が違えば、同じだけ回しても紙の向きと位置は変わります。

9
00:00:31.031 --> 00:00:35.159
その画鋲の位置を決めるのが、このプロパティの役割です。

10
00:00:35.159 --> 00:00:40.585
このあと、書き方、キーワードやパーセントでの指定のしかた、実際の回転での見え方の違い、

11
00:00:40.585 --> 00:00:46.012
そして効かないときの調べ方まで、順番に確認していきます。

12
00:00:46.012 --> 00:00:47.549
書き方を確認します。

13
00:00:47.549 --> 00:00:54.005
トランスフォーム・オリジンは、変形させたい要素に、トランスフォームと並べて書きます。

14
00:00:54.005 --> 00:00:55.696
値には位置を書きます。

15
00:00:55.696 --> 00:01:00.615
たとえば、レフト・トップと書けば、要素の左上が基準点になります。

16
00:01:00.615 --> 00:01:05.073
位置は原則として、横方向、縦方向の順に二つ並べて表します。

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

18
00:01:12.297 --> 00:01:15.679
なお、基準点だけを書いても要素は動きません。

19
00:01:15.679 --> 00:01:20.444
回転や拡大といった変形そのものは、トランスフォームの担当です。

20
00:01:20.444 --> 00:01:23.672
この二つは、いつもセットで考えてください。

21
00:01:23.672 --> 00:01:25.676
初期値と継承を確認します。

22
00:01:25.676 --> 00:01:29.068
このプロパティの初期値は、フィフティー・パーセント、フィフティー・パーセント、

23
00:01:29.068 --> 00:01:32.460
ゼロです。

24
00:01:32.460 --> 00:01:39.090
パーセントは要素自身の幅と高さに対する割合なので、これは要素のちょうど中心を指します。

25
00:01:39.090 --> 00:01:45.257
つまり、トランスフォーム・オリジンを書かなければ、変形は中心を基準に行われます。

26
00:01:45.257 --> 00:01:48.957
そして、このプロパティは親から子へ継承しません。

27
00:01:48.957 --> 00:01:56.203
親に基準点を設定しても、子の変形には影響しないので、変形させる要素ごとに指定するのが基本です。

28
00:01:56.203 --> 00:02:01.908
回転が思いと違う位置で起きたら、まずこの初期値のことを思い出してください。

29
00:02:01.908 --> 00:02:04.219
位置の書き方を見ていきます。

30
00:02:04.219 --> 00:02:07.519
いちばん分かりやすいのはキーワードです。

31
00:02:07.519 --> 00:02:10.655
横方向には、レフト、センター、ライト。

32
00:02:10.655 --> 00:02:14.616
縦方向には、トップ、センター、ボトムが使えます。

33
00:02:14.616 --> 00:02:19.732
ライト・ボトムなら右下、レフト・トップなら左上という具合です。

34
00:02:19.732 --> 00:02:24.849
値を一つだけ書いた場合は、もう一方はセンターとして扱われます。

35
00:02:24.849 --> 00:02:29.140
たとえば、トップだけなら「上辺の中央」が基準点です。

36
00:02:29.140 --> 00:02:37.557
キーワードは、要素の端や角を基準にしたいときに便利で、コードを読む人にも意図が伝わりやすい書き方です。

37
00:02:37.557 --> 00:02:41.848
まずはこのキーワードから使い始めるのがおすすめです。

38
00:02:41.848 --> 00:02:46.488
キーワードの代わりに、パーセントや長さでも指定できます。

39
00:02:46.488 --> 00:02:50.631
パーセントは、要素の幅と高さを基準にした割合です。

40
00:02:50.631 --> 00:02:55.852
ゼロパーセント、ゼロパーセントは左上、つまりレフト・トップと同じ位置で、

41
00:02:55.852 --> 00:03:01.072
百パーセント、百パーセントは右下と同じ位置になります。

42
00:03:01.072 --> 00:03:08.033
二十五パーセント、七十五パーセントのように、角や中心以外の位置も細かく指定できます。

43
00:03:08.033 --> 00:03:14.496
また、ピクセルなどの長さで、左上からどれだけずらすか、という書き方もできます。

44
00:03:14.496 --> 00:03:21.788
要素の大きさが変わるデザインでは、割合で書くほうが意図した位置関係を保ちやすいでしょう。

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

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

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

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

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

50
00:03:47.598 --> 00:03:51.421
主役は、このあとデモに追加する回転と基準点です。

51
00:03:51.421 --> 00:03:56.997
同じ箱、同じ回転で、基準点だけを変えたときの違いを比べていきましょう。

52
00:03:56.997 --> 00:04:05.760
エイチティーエムエルと土台ができたら、ファイルを保存して、ブラウザーで一度表示を確認してから次へ進みましょう。

53
00:04:05.760 --> 00:04:08.468
まず、基準点を左上にした場合です。

54
00:04:08.468 --> 00:04:15.954
デモに、ローテートで八度の回転を付け、トランスフォーム・オリジンにレフト・トップを指定します。

55
00:04:15.954 --> 00:04:19.140
すると、箱は左上の角を軸にして回ります。

56
00:04:19.140 --> 00:04:25.033
軸から遠い右下側ほど大きく位置が変わり、軸のある左上はほとんど動きません。

57
00:04:25.033 --> 00:04:28.219
ドアが蝶番を軸に開く様子に近い動きです。

58
00:04:28.219 --> 00:04:33.395
パネルが隅から開くような表現や、角を支点に倒れる動きを作りたいときは、このように端や角を基準点にすると、

59
00:04:33.395 --> 00:04:38.572
意図した動きに近づきます。

60
00:04:38.572 --> 00:04:43.384
次に、基準点の値だけをセンターに変えて比べてみます。

61
00:04:43.384 --> 00:04:52.268
回転の角度は同じ八度ですが、軸が箱の中心になるため、箱全体がその場で回るような見た目になります。

62
00:04:52.268 --> 00:04:58.191
左上を基準にしたときのような、片側へ倒れ込む動きはなくなります。

63
00:04:58.191 --> 00:05:02.633
基準点の違いは、回転だけでなく拡大でも現れます。

64
00:05:02.633 --> 00:05:08.741
スケールで要素を大きくすると、基準点を中心にして四方へ広がります。

65
00:05:08.741 --> 00:05:16.515
ホバーで少し拡大するカードなどは、中心を基準にしたほうが自然に見えることが多いです。

66
00:05:16.515 --> 00:05:21.512
変形の種類ごとに、どの基準点が合うか考えてみましょう。

67
00:05:21.512 --> 00:05:23.954
効かないときの確認方法です。

68
00:05:23.954 --> 00:05:28.925
このプロパティでいちばん多い勘違いは、トランスフォーム・オリジンだけを書いて、

69
00:05:28.925 --> 00:05:33.897
トランスフォーム本体がない状態です。

70
00:05:33.897 --> 00:05:39.304
変形自体がなければ、基準点を変えても見た目は一切変わりません。

71
00:05:39.304 --> 00:05:44.537
まず、ローテートなどの変形が付いているかを確かめてください。

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

73
00:05:47.503 --> 00:05:53.695
スタイルズで宣言に打ち消し線が付いていないか、コンピューテッドで最終的に採用された値は何か、

74
00:05:53.695 --> 00:05:59.887
セレクターとクラス名が一致しているかを確認します。

75
00:05:59.887 --> 00:06:03.202
一つずつ原因を切り分けるのが近道です。

76
00:06:03.202 --> 00:06:08.260
なお、指定したつもりでも、クラス名の綴りがエイチティーエムエルとシーエスエスでずれていると、

77
00:06:08.260 --> 00:06:13.319
宣言ごと適用されません。

78
00:06:13.319 --> 00:06:16.284
綴りの確認も忘れずに行いましょう。

79
00:06:16.284 --> 00:06:18.365
ブラウザー互換性を確認します。

80
00:06:18.365 --> 00:06:23.569
トランスフォーム・オリジンは、クローム三十六以降、エッジ十二以降、ファイアーフォックス十六以降、

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

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

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

84
00:06:39.596 --> 00:06:45.285
ただし、プロパティが使えることと、すべての値や構文が同じように使えることは別です。

85
00:06:45.285 --> 00:06:51.807
三次元変形で奥行き方向の基準を指定するような応用では、対象ブラウザーで改めて確認してください。

86
00:06:51.807 --> 00:06:56.871
値の種類によって対応の時期が違うこともあり、このプロパティでもセンターという値自体は、

87
00:06:56.871 --> 00:07:01.936
さらに古いブラウザーから使えていた、というデータがあります。

88
00:07:01.936 --> 00:07:03.993
最後に練習とまとめです。

89
00:07:03.993 --> 00:07:12.050
まず、レフト・トップとセンターで、回転の見え方がどう違うかを自分の言葉で説明してみてください。

90
00:07:12.050 --> 00:07:18.221
次に、基準点の値を一つずつ変えて、結果がどう変わるかを比べてみましょう。

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

92
00:07:24.392 --> 00:07:30.134
今日のポイントは、トランスフォーム・オリジンは変形の基準点であること、初期値は中心であること、

93
00:07:30.134 --> 00:07:35.877
変形本体とセットで使うこと、の三つです。

94
00:07:35.877 --> 00:07:43.762
次回は、いよいよトランスフォーム本体を取り上げ、移動や回転、拡大そのものの書き方を学びます。

95
00:07:43.762 --> 00:07:45.476
おつかれさまでした。