WEBVTT

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

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

3
00:00:03.956 --> 00:00:06.264
今回のテーマは、トップです。

4
00:00:06.264 --> 00:00:13.681
これは、配置した箱の上端が、基準となる親の上端からどれだけ離れるかを決めるプロパティです。

5
00:00:13.681 --> 00:00:19.285
たとえば、部屋の天井から少し下へ離して箱を置く、というイメージです。

6
00:00:19.285 --> 00:00:24.560
トップに二レムを指定すると、箱は上端から二レムだけ下へ離れます。

7
00:00:24.560 --> 00:00:33.131
この動画では、二レムを指定した場合と、ゼロを指定した場合を比べて、上側の間隔がどう変わるかを確認します。

8
00:00:33.131 --> 00:00:37.087
基本の書き方、値の読み方、効くための条件、実例、そして効かないときの確認まで、

9
00:00:37.087 --> 00:00:41.043
順番に解説します。

10
00:00:41.043 --> 00:00:45.988
上の距離は、値が大きくなるほど箱が下へ寄る点がポイントです。

11
00:00:45.988 --> 00:00:47.738
まず基本の書き方です。

12
00:00:47.738 --> 00:00:52.671
セレクターのあとに、トップ、コロン、値、セミコロンを書きます。

13
00:00:52.671 --> 00:00:58.399
スライドの例では、デモというクラスを持つ要素に、二レムを指定しています。

14
00:00:58.399 --> 00:01:04.286
意味は、基準の上端から二レム離れた位置に、箱の上端を置く、ということです。

15
00:01:04.286 --> 00:01:08.423
プロパティ名のあとにコロン、値の最後にセミコロンを書く、という宣言の基本は、

16
00:01:08.423 --> 00:01:12.560
ほかのプロパティと同じです。

17
00:01:12.560 --> 00:01:17.811
ただし、この一行だけを書いても、すぐに位置が変わるとは限りません。

18
00:01:17.811 --> 00:01:21.948
要素の配置方法など、効くための条件が関係してきます。

19
00:01:21.948 --> 00:01:25.449
その条件は後のセクションで丁寧に確認します。

20
00:01:25.449 --> 00:01:32.768
クラス名のつづりがエイチティーエムエル側と一致しているかも、あわせて確認しておくと安心です。

21
00:01:32.768 --> 00:01:35.473
指定できる値の読み方を確認します。

22
00:01:35.473 --> 00:01:39.451
代表的なのは、長さ、割合、そしてオートの三つです。

23
00:01:39.451 --> 00:01:44.702
長さは、レムやピクセルなどで、上端からの距離をそのまま指定します。

24
00:01:44.702 --> 00:01:51.067
割合はパーセントで書く方法で、基準となる親の高さに対する割合で距離が決まります。

25
00:01:51.067 --> 00:01:57.272
たとえば親の高さが大きくなれば、同じパーセントでも実際の距離は大きくなります。

26
00:01:57.272 --> 00:02:03.160
オートは、距離を自動に任せるという意味で、指定しない場合の初期の状態です。

27
00:02:03.160 --> 00:02:07.138
まずは長さで感覚をつかみ、親の高さに連動させたいときに割合を検討すると、

28
00:02:07.138 --> 00:02:11.116
使い分けがしやすくなります。

29
00:02:11.116 --> 00:02:18.276
負の値を指定すると、基準より上へはみ出す配置も可能ですが、見切れや重なりに注意が必要です。

30
00:02:18.276 --> 00:02:20.229
初期値と継承を確認します。

31
00:02:20.229 --> 00:02:25.487
トップの初期値はオートで、上側からの距離は指定しない、という意味です。

32
00:02:25.487 --> 00:02:31.346
通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。

33
00:02:31.346 --> 00:02:34.501
位置を決めたい要素ごとに指定してください。

34
00:02:34.501 --> 00:02:42.313
また、共通値として、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値であるオートに戻す値です。

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

36
00:02:47.721 --> 00:02:50.876
リバートなどはカスケードを巻き戻す値です。

37
00:02:50.876 --> 00:02:55.984
まずは、初期値オートと、継承しないという二点をはっきり覚えましょう。

38
00:02:55.984 --> 00:02:58.297
トップが効く条件を整理します。

39
00:02:58.297 --> 00:03:00.610
ここが一番間違えやすい点です。

40
00:03:00.610 --> 00:03:06.316
ポジションがスタティックの要素では、トップを指定しても位置は変わりません。

41
00:03:06.316 --> 00:03:13.101
スタティックは通常の流れに置く初期の配置で、上からの距離という考え方が働かないからです。

42
00:03:13.101 --> 00:03:21.736
リラティブ、アブソリュート、フィックスド、スティッキーといった、位置をずらせる配置と組み合わせて使ってください。

43
00:03:21.736 --> 00:03:29.292
リラティブなら元の場所を基準に下へずれ、アブソリュートなら基準となる親の上端を基準に配置されます。

44
00:03:29.292 --> 00:03:33.764
効かないと感じたら、まず対象のポジションを確認しましょう。

45
00:03:33.764 --> 00:03:36.922
距離の基準について、もう少し詳しく見ます。

46
00:03:36.922 --> 00:03:44.140
アブソリュートの場合は、ポジションが指定された最も近い親が基準になり、その親の上端から数えます。

47
00:03:44.140 --> 00:03:48.651
親に基準がないと、もっと外側の要素が基準になってしまいます。

48
00:03:48.651 --> 00:03:53.915
リラティブの場合は、今いる元の場所が基準で、そこから下へずれる形です。

49
00:03:53.915 --> 00:03:59.930
その間、元の場所の占有は残るので、後ろの要素が詰めて寄ってくることはありません。

50
00:03:59.930 --> 00:04:05.193
なお、トップとボトム、それに高さをすべて指定すると、制約が競合します。

51
00:04:05.193 --> 00:04:13.464
どの寸法を自動にするかを決めてから指定しないと、一方が無視されて、トップが効かないように見える場合があります。

52
00:04:13.464 --> 00:04:14.873
実例を見ていきます。

53
00:04:14.873 --> 00:04:17.408
まずエイチティーエムエルの用意です。

54
00:04:17.408 --> 00:04:22.901
ステージという外側の箱の中に、今回の対象であるデモという箱が一つ入っています。

55
00:04:22.901 --> 00:04:29.803
デモの中には、ハロー、シーエスエスという文章が入っていて、折り返しも確認できるようになっています。

56
00:04:29.803 --> 00:04:34.592
頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。

57
00:04:34.592 --> 00:04:37.127
親と子の構造そのものが例の一部です。

58
00:04:37.127 --> 00:04:41.353
親が距離の基準になり、子が上端から距離を取って配置されます。

59
00:04:41.353 --> 00:04:45.156
中身は変えず、トップの値だけを比べる準備をしましょう。

60
00:04:45.156 --> 00:04:48.255
上側の間隔だけが変わる点に注目してください。

61
00:04:48.255 --> 00:04:53.044
文章の量はそのままにしておくと、位置の違いだけを純粋に比べられます。

62
00:04:53.044 --> 00:04:57.925
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

63
00:04:57.925 --> 00:05:02.097
ステージは幅の上限や余白、枠線に加えて、リラティブと高さ十四レムが指定され、

64
00:05:02.097 --> 00:05:06.269
絶対配置の基準になっています。

65
00:05:06.269 --> 00:05:12.409
対象のデモはアブソリュートで配置され、幅十レム、高さ六レムの箱になっています。

66
00:05:12.409 --> 00:05:15.085
そして主役が、トップ、二レムです。

67
00:05:15.085 --> 00:05:19.021
親の上端から二レム下側に、箱の上端が配置されます。

68
00:05:19.021 --> 00:05:23.980
土台の指定は違いを見やすくするためのものなので、親のリラティブと、対象のアブソリュート、

69
00:05:23.980 --> 00:05:28.940
そしてトップの一行に注目してください。

70
00:05:28.940 --> 00:05:35.552
この土台があるからこそ、トップの数値を変えたときの上下の移動がはっきり見えるのです。

71
00:05:35.552 --> 00:05:37.753
値を変えて比べてみましょう。

72
00:05:37.753 --> 00:05:41.998
最後のトップの値だけを、二レムからゼロへ置き換えます。

73
00:05:41.998 --> 00:05:49.073
ゼロは単位を付けない書き方で、距離なし、つまり親の上端にぴったりくっつく位置を意味します。

74
00:05:49.073 --> 00:05:55.519
二レムのときは上側に隙間ができていた箱が、ゼロでは上端まで寄ることが確認できます。

75
00:05:55.519 --> 00:05:59.922
エイチティーエムエルや、ほかの指定は一切変えていません。

76
00:05:59.922 --> 00:06:04.638
トップの変更だけで、箱の縦位置だけが変わることが分かります。

77
00:06:04.638 --> 00:06:08.412
比較のコツは、変える値を一つだけにすることです。

78
00:06:08.412 --> 00:06:13.128
まず二レムとゼロの違いを、自分の言葉で説明してみてください。

79
00:06:13.128 --> 00:06:19.260
数値を大きくすれば、その分だけ箱はさらに下へ移動することも試してみてください。

80
00:06:19.260 --> 00:06:21.390
効かないときの確認手順です。

81
00:06:21.390 --> 00:06:27.323
まず、対象のポジションがスタティックのままになっていないかを確認してください。

82
00:06:27.323 --> 00:06:29.148
これが最も多い原因です。

83
00:06:29.148 --> 00:06:36.602
次に、親にリラティブなどの基準があるか、トップとボトムや高さの指定が競合していないかも見ましょう。

84
00:06:36.602 --> 00:06:39.188
そのうえで開発者ツールを使います。

85
00:06:39.188 --> 00:06:45.350
ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、

86
00:06:45.350 --> 00:06:51.511
スタイルズで宣言が無効や上書きになっていないかを確認してください。

87
00:06:51.511 --> 00:06:59.269
コンピューテッドで最終的な値を確認し、三百二十ピクセル程度の画面幅でも内容が読めるかもチェックします。

88
00:06:59.269 --> 00:07:02.920
一つずつ原因を切り分けることが、近道になります。

89
00:07:02.920 --> 00:07:04.933
最後に互換性とまとめです。

90
00:07:04.933 --> 00:07:10.893
トップは、クローム一以降、エッジ十二以降、ファイアフォックス一以降、サファリ一以降で対応すると紹介されており、

91
00:07:10.893 --> 00:07:16.854
非常に古くから使える基本的なプロパティです。

92
00:07:16.854 --> 00:07:20.105
現在の主要ブラウザーでは安心して使えます。

93
00:07:20.105 --> 00:07:21.034
まとめます。

94
00:07:21.034 --> 00:07:24.440
トップは基準の上端から箱の上端までの距離を決める指定で、初期値はオート、

95
00:07:24.440 --> 00:07:27.846
継承はしません。

96
00:07:27.846 --> 00:07:33.729
ポジションがスタティックでは効かない点と、ボトムと高さとの競合が注意点です。

97
00:07:33.729 --> 00:07:41.005
練習として、二レムとゼロで何が変わるかを説明し、親の高さだけを変えて結果を比べてみてください。

98
00:07:41.005 --> 00:07:46.579
関連するポジション、ライト、ボトムもあわせて確認すると理解が深まります。

99
00:07:46.579 --> 00:07:47.972
お疲れさまでした。