WEBVTT

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

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

3
00:00:04.001 --> 00:00:06.334
今回のテーマは、ライトです。

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

5
00:00:13.835 --> 00:00:19.836
たとえば、部屋の右の壁から少し内側へ離して箱を置く、というイメージです。

6
00:00:19.836 --> 00:00:25.170
ライトに二レムを指定すると、箱は右端から二レムだけ左へ離れます。

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

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

9
00:00:37.838 --> 00:00:41.839
順番に解説します。

10
00:00:41.839 --> 00:00:47.173
右からの距離は、値が大きくなるほど箱が左へ寄る点がポイントです。

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

12
00:00:48.955 --> 00:00:53.976
セレクターのあとに、ライト、コロン、値、セミコロンを書きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27
00:02:08.006 --> 00:02:16.616
まずは長さで感覚をつかみ、親の幅に連動させたいときに割合を検討すると、使い分けがしやすくなります。

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

29
00:02:24.524 --> 00:02:26.506
初期値と継承を確認します。

30
00:02:26.506 --> 00:02:31.841
ライトの初期値はオートで、右側からの距離は指定しない、という意味です。

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

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

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

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

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

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

37
00:03:02.784 --> 00:03:04.925
ライトが効く条件を整理します。

38
00:03:04.925 --> 00:03:07.066
ここが一番間違えやすい点です。

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

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

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

42
00:03:26.622 --> 00:03:33.616
リラティブなら元の場所を基準に左へずれ、アブソリュートなら基準となる親の右端を基準に配置されます。

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

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

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

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

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

48
00:03:59.793 --> 00:04:05.385
なお、ライトとレフト、それに幅をすべて指定すると、制約が競合します。

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

50
00:04:14.430 --> 00:04:21.008
右上に寄せる閉じるボタンなどでは、本文と重ならないよう余白を残す配慮も必要です。

51
00:04:21.008 --> 00:04:22.543
実例を見ていきます。

52
00:04:22.543 --> 00:04:25.307
まずエイチティーエムエルの用意です。

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

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

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

56
00:04:44.039 --> 00:04:46.803
親と子の構造そのものが例の一部です。

57
00:04:46.803 --> 00:04:51.409
親が距離の基準になり、子が右端から距離を取って配置されます。

58
00:04:51.409 --> 00:04:55.555
中身は変えず、ライトの値だけを比べる準備をしましょう。

59
00:04:55.555 --> 00:04:58.933
右側の間隔だけが変わる点に注目してください。

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

61
00:05:04.153 --> 00:05:09.666
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

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

63
00:05:14.379 --> 00:05:19.092
絶対配置の基準になっています。

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

65
00:05:26.028 --> 00:05:29.052
そして主役が、ライト、二レムです。

66
00:05:29.052 --> 00:05:33.498
親の右端から二レム左側に、箱の右端が配置されます。

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

68
00:05:39.100 --> 00:05:44.702
そしてライトの一行に注目してください。

69
00:05:44.702 --> 00:05:52.172
この土台があるからこそ、ライトの数値を変えたときの左右の移動がはっきり見えるのです。

70
00:05:52.172 --> 00:05:54.326
値を変えて比べてみましょう。

71
00:05:54.326 --> 00:05:58.479
最後のライトの値だけを、二レムからゼロへ置き換えます。

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

73
00:06:05.402 --> 00:06:11.709
二レムのときは右側に隙間ができていた箱が、ゼロでは右端まで寄ることが確認できます。

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

75
00:06:16.017 --> 00:06:20.632
ライトの変更だけで、箱の横位置だけが変わることが分かります。

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

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

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

79
00:06:34.939 --> 00:06:36.829
効かないときの確認手順です。

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

81
00:06:42.096 --> 00:06:43.716
これが最も多い原因です。

82
00:06:43.716 --> 00:06:50.198
次に、親にリラティブなどの基準があるか、ライトとレフトや幅の指定が競合していないかも見ましょう。

83
00:06:50.198 --> 00:06:52.494
そのうえで開発者ツールを使います。

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

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

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

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

88
00:07:13.559 --> 00:07:15.526
最後に互換性とまとめです。

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

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

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

92
00:07:30.354 --> 00:07:31.262
まとめます。

93
00:07:31.262 --> 00:07:34.590
ライトは基準の右端から箱の右端までの距離を決める指定で、初期値はオート、

94
00:07:34.590 --> 00:07:37.919
継承はしません。

95
00:07:37.919 --> 00:07:43.517
ポジションがスタティックでは効かない点と、レフトと幅との競合が注意点です。

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

97
00:07:50.477 --> 00:07:56.529
関連するトップ、ボトム、レフト、ポジションもあわせて確認すると理解が深まります。

98
00:07:56.529 --> 00:07:57.891
お疲れさまでした。