WEBVTT

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

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

3
00:00:04.009 --> 00:00:06.682
今回のテーマは、インセットです。

4
00:00:06.682 --> 00:00:14.868
これは、トップ、ライト、ボトム、レフトという、四つの位置指定を一度にまとめて書けるプロパティです。

5
00:00:14.868 --> 00:00:18.878
額縁の中に絵を収める場面を思い浮かべてください。

6
00:00:18.878 --> 00:00:25.226
四辺からどれだけ内側に置くかを決めると、絵の位置と大きさが同時に決まります。

7
00:00:25.226 --> 00:00:29.570
インセットも同じで、親の四辺からの距離を指定します。

8
00:00:29.570 --> 00:00:34.582
この動画では、一レムを指定した場合と、二レム、三レムを指定した場合を比べて、

9
00:00:34.582 --> 00:00:39.594
箱の位置とサイズがどう変わるかを確認します。

10
00:00:39.594 --> 00:00:46.276
基本の書き方、値の読み方、実例、そして効かないときの確認まで、順番に解説します。

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

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

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

14
00:00:59.234 --> 00:01:05.874
意味は、親の上、右、下、左、すべての辺から、一レムずつ内側に置く、ということです。

15
00:01:05.874 --> 00:01:10.409
本来ならトップ、ライト、ボトム、レフトと四行書くところを、一行で済ませられるのが、

16
00:01:10.409 --> 00:01:14.945
このプロパティの便利な点です。

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

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

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

20
00:01:28.064 --> 00:01:31.211
指定できる値の読み方を確認します。

21
00:01:31.211 --> 00:01:36.025
インセットには、一つから四つまでの値を並べられます。

22
00:01:36.025 --> 00:01:42.690
並び順は、上から時計回り、つまりトップ、ライト、ボトム、レフトの順です。

23
00:01:42.690 --> 00:01:47.134
一つだけ書けば、四辺すべてが同じ距離になります。

24
00:01:47.134 --> 00:01:51.763
二つ書いた場合は、最初が上下、次が左右を表します。

25
00:01:51.763 --> 00:01:57.317
たとえば二レム、三レムなら、上下が二レム、左右が三レムです。

26
00:01:57.317 --> 00:02:04.352
三つの場合は上、左右、下の順、四つの場合は辺ごとにすべて個別に指定できます。

27
00:02:04.352 --> 00:02:09.722
この省略のルールは、マージンやパディングと同じ考え方です。

28
00:02:09.722 --> 00:02:15.276
値にはレムやピクセルなどの長さのほか、パーセントも使えます。

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

30
00:02:17.460 --> 00:02:22.921
インセット自体に一つの初期値があるのではなく、構成するトップ、ライト、ボトム、

31
00:02:22.921 --> 00:02:28.381
レフト、それぞれの初期値を参照する形になっています。

32
00:02:28.381 --> 00:02:34.262
四つの辺の初期値はいずれもオートで、距離を指定しない、という意味です。

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

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

35
00:02:44.343 --> 00:02:50.895
また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。

36
00:02:50.895 --> 00:02:59.464
アンセットやリバートなどの共通値もありますが、まずは各辺オートと、継承しない点をはっきり覚えましょう。

37
00:02:59.464 --> 00:03:02.164
インセットが効く条件を整理します。

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

39
00:03:04.547 --> 00:03:11.536
ポジションがスタティックの要素では、インセットを指定しても、想定する配置には使えません。

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

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

42
00:03:27.580 --> 00:03:32.504
今回の実例でも、対象の箱にはアブソリュートが指定されています。

43
00:03:32.504 --> 00:03:36.634
効かないと感じたら、まず対象のポジションを確認する。

44
00:03:36.634 --> 00:03:38.699
これが最初のチェックです。

45
00:03:38.699 --> 00:03:41.876
親側の準備も次のセクションで確認します。

46
00:03:41.876 --> 00:03:47.422
インセットの面白い点は、位置だけでなく、箱のサイズまで決まることです。

47
00:03:47.422 --> 00:03:52.414
絶対配置の要素で、幅と高さをオートにしておくと、左右の距離から残りの幅が、

48
00:03:52.414 --> 00:03:57.406
高さは上下の距離から残りの高さが、自動で決まります。

49
00:03:57.406 --> 00:04:05.329
たとえば親いっぱいに広げたい場合は、インセット、ゼロと書くだけで、四辺ぴったりに重なる箱になります。

50
00:04:05.329 --> 00:04:09.608
逆に、幅や高さを固定値で指定してしまうと、すべての距離を同時に満たせなくなり、

51
00:04:09.608 --> 00:04:13.887
一部の指定が効かなくなります。

52
00:04:13.887 --> 00:04:19.750
また、距離の基準になるのは、ポジションがリラティブなどに設定された親です。

53
00:04:19.750 --> 00:04:24.504
親に基準がないと、もっと外側の要素が基準になってしまいます。

54
00:04:24.504 --> 00:04:25.876
実例を見ていきます。

55
00:04:25.876 --> 00:04:28.346
まずエイチティーエムエルの用意です。

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

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

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

59
00:04:45.086 --> 00:04:47.556
親と子の構造そのものが例の一部です。

60
00:04:47.556 --> 00:04:51.672
親が距離の基準になり、子が四辺から距離を取って配置されます。

61
00:04:51.672 --> 00:04:55.651
中身は変えず、インセットの値だけを比べる準備をしましょう。

62
00:04:55.651 --> 00:04:59.356
距離が変わると箱の大きさも変わる点に注目してください。

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

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

65
00:05:08.808 --> 00:05:13.164
絶対配置の基準になっています。

66
00:05:13.164 --> 00:05:19.739
対象のデモはアブソリュートで配置され、幅と高さは最終的にオートに直されています。

67
00:05:19.739 --> 00:05:24.178
これで四辺からの距離でサイズが決まる状態になりました。

68
00:05:24.178 --> 00:05:27.301
そして主役が、インセット、一レムです。

69
00:05:27.301 --> 00:05:31.411
親の四辺すべてから一レム内側に、箱が配置されます。

70
00:05:31.411 --> 00:05:36.013
土台の指定は違いを見やすくするためのものなので、インセットの一行と、幅、

71
00:05:36.013 --> 00:05:40.616
高さがオートである点に注目してください。

72
00:05:40.616 --> 00:05:43.349
値を変えて比べてみましょう。

73
00:05:43.349 --> 00:05:50.183
最後のインセットの値だけを、一レムから、二レム、三レムへ置き換えます。

74
00:05:50.183 --> 00:05:54.869
二つの値なので、最初が上下、次が左右を表します。

75
00:05:54.869 --> 00:05:59.750
つまり上下は二レム、左右は三レムの距離になります。

76
00:05:59.750 --> 00:06:05.314
ファイルを保存してブラウザーを再読み込みすると、箱は上下にも左右にも内側へ寄り、

77
00:06:05.314 --> 00:06:10.879
その分、幅も高さも小さくなります。

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

79
00:06:16.346 --> 00:06:22.593
距離の変更だけで、位置とサイズの両方が変わることが確認できます。

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

81
00:06:27.279 --> 00:06:34.308
まず一レムと、二レム、三レムの違いを、自分の言葉で説明してみてください。

82
00:06:34.308 --> 00:06:36.275
効かないときの確認手順です。

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

84
00:06:41.754 --> 00:06:48.357
次に、サイズが思うように変わらない場合は、幅と高さが固定値のままになっていないかを見ましょう。

85
00:06:48.357 --> 00:06:53.554
幅と高さがオートでないと、四辺の距離からサイズを決める仕組みが働きません。

86
00:06:53.554 --> 00:06:56.645
親にリラティブなどの基準があるかも大切です。

87
00:06:56.645 --> 00:06:59.033
そのうえで開発者ツールを使います。

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

89
00:07:04.302 --> 00:07:09.570
スタイルズで宣言が上書きされていないかを見てください。

90
00:07:09.570 --> 00:07:12.520
コンピューテッドで最終的な値を確認します。

91
00:07:12.520 --> 00:07:14.500
最後に互換性とまとめです。

92
00:07:14.500 --> 00:07:19.831
インセットは、記事ではクローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、

93
00:07:19.831 --> 00:07:25.162
サファリ十四点一以降で対応すると紹介されています。

94
00:07:25.162 --> 00:07:28.513
現在の主要ブラウザーでは広く使える指定です。

95
00:07:28.513 --> 00:07:29.427
まとめます。

96
00:07:29.427 --> 00:07:33.234
インセットはトップ、ライト、ボトム、レフトの一括指定で、値は一つから四つ、

97
00:07:33.234 --> 00:07:37.042
上から時計回りに読みます。

98
00:07:37.042 --> 00:07:39.784
初期値は各辺オート、継承はしません。

99
00:07:39.784 --> 00:07:45.876
ポジションとの組み合わせが前提で、幅と高さをオートにするとサイズまで決まります。

100
00:07:45.876 --> 00:07:47.247
お疲れさまでした。

101
00:07:47.247 --> 00:07:53.492
関連するレフトやボトムなどの個別プロパティも、あわせて確認すると理解が深まります。