WEBVTT

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

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

3
00:00:04.254 --> 00:00:06.736
今回のテーマは、レフトです。

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

5
00:00:14.713 --> 00:00:20.208
たとえば、棚の左端から少し内側に箱を置く、というイメージです。

6
00:00:20.208 --> 00:00:25.171
レフトに二レムを指定すると、その分だけ箱が右へ寄ります。

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

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

9
00:00:38.644 --> 00:00:42.898
順番に解説します。

10
00:00:42.898 --> 00:00:51.052
左や右といった方向の指定は、慣れるまでは迷いやすいので、図で基準を確認しながら進めましょう。

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

12
00:00:52.607 --> 00:00:56.987
セレクターのあとに、レフト、コロン、値、セミコロンを書きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30
00:02:21.370 --> 00:02:27.049
レフトの初期値はオートで、左側からの距離は指定しない、という意味です。

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

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

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

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

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

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

37
00:02:59.992 --> 00:03:02.110
レフトが効く条件を整理します。

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

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

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

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

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

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

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

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

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

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

48
00:03:57.258 --> 00:04:02.504
なお、レフトとライトを両方指定して幅が固定されていると、状況によっては一方が優先され、

49
00:04:02.504 --> 00:04:07.750
もう一方が効かなくなることがあります。

50
00:04:07.750 --> 00:04:16.720
また、文字方向に合わせたい場合は、インセット・インライン・スタートなどの論理プロパティも検討してください。

51
00:04:16.720 --> 00:04:21.120
位置調整で文書の順序の問題を隠さないことも大切です。

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

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

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

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

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

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

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

59
00:04:52.452 --> 00:04:56.725
中身は変えず、レフトの値だけを比べる準備をしましょう。

60
00:04:56.725 --> 00:05:00.048
左の間隔だけが変わる点に注目してください。

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

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

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

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

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

66
00:05:26.898 --> 00:05:29.865
そして主役が、レフト、二レムです。

67
00:05:29.865 --> 00:05:34.229
親の左端から二レム内側に、箱の左端が配置されます。

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

69
00:05:39.728 --> 00:05:45.226
そしてレフトの一行に注目してください。

70
00:05:45.226 --> 00:05:52.208
この土台があるからこそ、レフトの数値を変えたときの横移動がはっきり見えるのです。

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

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

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

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

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

76
00:06:14.771 --> 00:06:19.138
レフトの変更だけで、箱の横位置だけが変わることが分かります。

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

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

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

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

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

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

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

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

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

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

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

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

89
00:07:16.930 --> 00:07:19.096
焦らず順番に確認しましょう。

90
00:07:19.096 --> 00:07:20.923
最後に互換性とまとめです。

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

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

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

94
00:07:34.698 --> 00:07:35.542
まとめます。

95
00:07:35.542 --> 00:07:38.634
レフトは基準の左端から箱の左端までの距離を決める指定で、初期値はオート、

96
00:07:38.634 --> 00:07:41.726
継承はしません。

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

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

99
00:07:52.268 --> 00:07:57.891
関連するトップ、ライト、ボトム、インセットもあわせて確認すると理解が深まります。

100
00:07:57.891 --> 00:07:59.156
お疲れさまでした。