WEBVTT

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

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

3
00:00:03.933 --> 00:00:06.554
今回のテーマは、パディングです。

4
00:00:06.554 --> 00:00:14.748
これは、枠線の内側にある余白のことで、内容と枠線の間にどれだけ空間を開けるかを決めるプロパティです。

5
00:00:14.748 --> 00:00:20.483
箱の中の文章が枠にぴったりくっついていると、窮屈で読みにくく感じます。

6
00:00:20.483 --> 00:00:25.235
そこにパディングでゆとりを作ると、見た目がぐっと整います。

7
00:00:25.235 --> 00:00:30.888
この動画では、基本の書き方、値を一つから四つ書いたときの違い、使える値と使えない値、

8
00:00:30.888 --> 00:00:36.541
そして効かないときの確認方法までを順番に見ていきます。

9
00:00:36.541 --> 00:00:42.604
記事の実例に沿って、広い余白と狭い余白を比べて、違いを目で確かめましょう。

10
00:00:42.604 --> 00:00:44.134
まず基本の書き方です。

11
00:00:44.134 --> 00:00:50.392
クラスを指定したら、パディングと書き、コロンのあとに値を並べ、最後にセミコロンを付けます。

12
00:00:50.392 --> 00:00:54.842
スライドの例では、上下が一・五レム、左右が二レムという指定です。

13
00:00:54.842 --> 00:01:00.404
レムは文字サイズを基準にした単位で、画面に合わせて余白を考えやすいのが特徴です。

14
00:01:00.404 --> 00:01:04.298
この一行だけで、四辺の内側の余白をまとめて決められます。

15
00:01:04.298 --> 00:01:13.338
エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。

16
00:01:13.338 --> 00:01:18.344
まずはこの形をそのまま書いて、ブラウザーで確かめることから始めましょう。

17
00:01:18.344 --> 00:01:22.850
パディングで大切なのが、値の個数による割り当てです。

18
00:01:22.850 --> 00:01:27.356
値を一つだけ書くと、四辺すべてが同じ余白になります。

19
00:01:27.356 --> 00:01:31.862
二つ書くと、一つ目が上下、二つ目が左右を担当します。

20
00:01:31.862 --> 00:01:34.808
三つ書くと、上、左右、下の順です。

21
00:01:34.808 --> 00:01:39.834
四つ書くと、上、右、下、左と、時計回りに割り当てられます。

22
00:01:39.834 --> 00:01:44.513
記事の例で使う、二つの値の書き方が一番よく登場します。

23
00:01:44.513 --> 00:01:48.673
上下と左右で余白を変えたいときに便利だからです。

24
00:01:48.673 --> 00:01:54.738
個数を間違えると、思っていたのと違う辺が広がってしまうので、書いたあとは、

25
00:01:54.738 --> 00:02:00.804
どの値がどの辺に対応しているかを指で追いながら確認すると安心です。

26
00:02:00.804 --> 00:02:03.038
四辺を別々に書く方法もあります。

27
00:02:03.038 --> 00:02:07.645
上の余白はパディングトップ、右はパディングライト、下はパディングボトム、

28
00:02:07.645 --> 00:02:12.253
左はパディングレフトという個別のプロパティが担当しています。

29
00:02:12.253 --> 00:02:15.883
パディングは、この四つをまとめて書ける一括指定です。

30
00:02:15.883 --> 00:02:19.443
普段は一行で済ませて問題ありませんが、下だけ広げたいといった部分的な調整では、

31
00:02:19.443 --> 00:02:23.003
個別の指定が役立ちます。

32
00:02:23.003 --> 00:02:27.750
なお、仕様上の初期値はゼロで、パディングは親から通常は継承しません。

33
00:02:27.750 --> 00:02:32.497
親に余白があっても、子には自動では伝わらない点も覚えておきましょう。

34
00:02:32.497 --> 00:02:37.384
継承させたい場合は、インヘリットという値を明示的に書く必要があります。

35
00:02:37.384 --> 00:02:40.206
次に、指定できる値を確認します。

36
00:02:40.206 --> 00:02:45.498
ピクセルやレムなどの長さのほか、パーセントで割合も書けます。

37
00:02:45.498 --> 00:02:51.673
パーセントの場合は、親要素の幅を基準に計算される点に注意してください。

38
00:02:51.673 --> 00:02:55.201
縦の余白でも、基準は高さではなく幅です。

39
00:02:55.201 --> 00:02:57.847
一方で、使えない値もあります。

40
00:02:57.847 --> 00:03:02.609
自動調整を意味するオートは、パディングでは使えません。

41
00:03:02.609 --> 00:03:05.785
また、マイナスの値も指定できません。

42
00:03:05.785 --> 00:03:11.341
外側の余白であるマージンとは違い、内側の余白をマイナスにして内容を枠の外へはみ出させることはできない、

43
00:03:11.341 --> 00:03:16.898
と理解しておきましょう。

44
00:03:16.898 --> 00:03:21.308
無効な値を書くと、その宣言自体が効かなくなります。

45
00:03:21.308 --> 00:03:24.875
余白の位置を、ボックスモデルで整理しましょう。

46
00:03:24.875 --> 00:03:30.458
要素は内側から、内容、パディング、枠線、マージンという層でできています。

47
00:03:30.458 --> 00:03:34.180
パディングは内容のすぐ外側、枠線のすぐ内側です。

48
00:03:34.180 --> 00:03:37.747
ここでもう一つ大事なのが、背景の広がり方です。

49
00:03:37.747 --> 00:03:41.934
背景色や背景画像は、パディングの領域まで描画されます。

50
00:03:41.934 --> 00:03:46.277
だから余白を広げると、色の付いた範囲も一緒に広がります。

51
00:03:46.277 --> 00:03:50.929
反対に、枠の外側の余白であるマージンには背景は広がりません。

52
00:03:50.929 --> 00:03:57.753
クリックできる範囲を広げたいボタンなどでは、背景も含めて広がるパディングが向いています。

53
00:03:57.753 --> 00:04:01.320
内側か外側かで、役割がはっきり分かれるのです。

54
00:04:01.320 --> 00:04:04.767
サイズ計算との関係も押さえておきましょう。

55
00:04:04.767 --> 00:04:10.839
初期状態に近いコンテントボックスでは、幅の指定は内容だけの幅を意味します。

56
00:04:10.839 --> 00:04:17.404
そこにパディングと枠線が外側へ加わるため、実際の表示幅は指定より大きくなります。

57
00:04:17.404 --> 00:04:22.000
記事もこの点を、間違えやすいポイントとして挙げています。

58
00:04:22.000 --> 00:04:26.513
一方、ボーダーボックスを指定すると、パディングと枠線は幅の中に含まれるので、

59
00:04:26.513 --> 00:04:31.026
実際の幅は指定どおりに収まります。

60
00:04:31.026 --> 00:04:36.607
記事の実例でも、全体にボーダーボックスを指定してから比較しています。

61
00:04:36.607 --> 00:04:43.828
横幅が計算と合わないときは、まずボックスサイジングとパディングの合計を確認してください。

62
00:04:43.828 --> 00:04:45.745
ここからは記事の実例です。

63
00:04:45.745 --> 00:04:52.530
エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。

64
00:04:52.530 --> 00:04:58.577
中には少し長めの文章を入れて、折り返したときの見え方も確認できるようにしています。

65
00:04:58.577 --> 00:05:03.739
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

66
00:05:03.739 --> 00:05:08.901
今回比べたいのは文章の内容ではなく、枠線と文章の間の距離そのものです。

67
00:05:08.901 --> 00:05:14.653
土台を固定してから余白だけを差し替えると、距離の変化だけを純粋に観察できます。

68
00:05:14.653 --> 00:05:19.520
この考え方は、ほかのプロパティを学ぶときにも役立つ比較の基本です。

69
00:05:19.520 --> 00:05:21.527
土台のシーエスエスです。

70
00:05:21.527 --> 00:05:29.220
全体にボックスサイジングを指定し、ステージには幅の上限と余白、点線の枠と薄い背景を付けます。

71
00:05:29.220 --> 00:05:33.903
デモの箱には濃い緑の枠線と薄い緑の背景を用意し、最後の行でパディングに、

72
00:05:33.903 --> 00:05:38.585
上下一・五レム、左右二レムを指定します。

73
00:05:38.585 --> 00:05:40.927
これがゆったりした状態です。

74
00:05:40.927 --> 00:05:46.947
次に、最後の行だけを、四辺すべて〇・五レムへ置き換えて再読み込みします。

75
00:05:46.947 --> 00:05:52.633
すると枠線と文章がぐっと近付き、同じ文章でも窮屈な印象に変わります。

76
00:05:52.633 --> 00:05:55.142
変えたのは余白の一行だけです。

77
00:05:55.142 --> 00:06:00.828
保存と再読み込みを繰り返して、広い場合と狭い場合を見比べてください。

78
00:06:00.828 --> 00:06:02.776
効かないときの確認です。

79
00:06:02.776 --> 00:06:05.536
まず疑いたいのは、値の間違いです。

80
00:06:05.536 --> 00:06:12.355
オートやマイナスの値を混ぜると、宣言が無効扱いになり、余白が付かないことがあります。

81
00:06:12.355 --> 00:06:18.200
次に、同じ要素へ後から別のパディングが書かれていないかを確認しましょう。

82
00:06:18.200 --> 00:06:22.096
詳細度が同じなら、後に書いた宣言が優先されます。

83
00:06:22.096 --> 00:06:30.376
記事の手順では、ネットワークでスタイルシートが取得できているか、要素のクラスとセレクターが一致しているか、

84
00:06:30.376 --> 00:06:38.656
スタイルズで打ち消し線が付いていないかを順に調べ、最後にコンピューテッドで最終的な値を確認します。

85
00:06:38.656 --> 00:06:44.176
狭い画面幅や文字拡大でも読みにくくならないかも合わせて見てください。

86
00:06:44.176 --> 00:06:46.204
最後に互換性とまとめです。

87
00:06:46.204 --> 00:06:53.066
記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、

88
00:06:53.066 --> 00:06:59.929
ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。

89
00:06:59.929 --> 00:07:00.865
まとめます。

90
00:07:00.865 --> 00:07:05.076
パディングは枠線の内側の余白で、値は一つから四つまで書け、通常は継承せず、

91
00:07:05.076 --> 00:07:09.287
オートと負の値は使えませんでした。

92
00:07:09.287 --> 00:07:14.122
練習として、上下一・五レム左右二レムと、四辺〇・五レムの違いを言葉で説明し、

93
00:07:14.122 --> 00:07:18.957
値を一つずつだけ変えて結果を比べてみてください。

94
00:07:18.957 --> 00:07:25.352
関連するマージンやボーダーも学ぶと、余白と枠線の調整が一通りできるようになります。

95
00:07:25.352 --> 00:07:26.756
お疲れさまでした。