WEBVTT

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

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

3
00:00:04.362 --> 00:00:06.907
今回のテーマは、ボトムです。

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

5
00:00:15.086 --> 00:00:21.266
たとえば、机の下側から少し上へ浮かせて箱を置く、というイメージです。

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

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

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

9
00:00:40.897 --> 00:00:45.259
順番に解説します。

10
00:00:45.259 --> 00:00:52.348
下からの距離は直感と逆に感じることもあるので、基準を意識しながら進めましょう。

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

12
00:00:54.052 --> 00:00:58.853
セレクターのあとに、ボトム、コロン、値、セミコロンを書きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31
00:02:21.296 --> 00:02:26.905
ボトムの初期値はオートで、下側からの距離は指定しない、という意味です。

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

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

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

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

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

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

38
00:02:59.440 --> 00:03:01.515
ボトムが効く条件を整理します。

39
00:03:01.515 --> 00:03:03.590
ここが一番間違えやすい点です。

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

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

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

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

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

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

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

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

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

49
00:03:54.022 --> 00:04:01.742
なお、ボトムとトップ、それに高さをすべて指定すると、自動計算の都合で一方が無視されることがあります。

50
00:04:01.742 --> 00:04:08.536
特にトップと高さとボトムを同時に固定すると、ボトムが効かないように見える場合があります。

51
00:04:08.536 --> 00:04:14.712
画面に固定する操作ボタンでは、本文を覆わないよう、下に余白を残す配慮も必要です。

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

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

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

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

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

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

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

59
00:04:44.517 --> 00:04:48.581
中身は変えず、ボトムの値だけを比べる準備をしましょう。

60
00:04:48.581 --> 00:04:51.742
下の間隔だけが変わる点に注目してください。

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

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

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

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

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

66
00:05:16.006 --> 00:05:18.652
そして主役が、ボトム、二レムです。

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

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

69
00:05:27.447 --> 00:05:32.350
そしてボトムの一行に注目してください。

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

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

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

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

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

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

76
00:06:02.562 --> 00:06:07.115
ボトムの変更だけで、箱の縦位置だけが変わることが分かります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

93
00:07:26.605 --> 00:07:27.528
まとめます。

94
00:07:27.528 --> 00:07:30.914
ボトムは基準の下端から箱の下端までの距離を決める指定で、初期値はオート、

95
00:07:30.914 --> 00:07:34.300
継承はしません。

96
00:07:34.300 --> 00:07:38.764
ポジションがスタティックでは効かない点が最大の注意点です。

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

98
00:07:45.998 --> 00:07:52.155
関連するトップ、レフト、ライト、インセットもあわせて確認すると理解が深まります。

99
00:07:52.155 --> 00:07:53.540
お疲れさまでした。