WEBVTT

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

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

3
00:00:03.704 --> 00:00:06.790
今回のテーマは、パディングブロックです。

4
00:00:06.790 --> 00:00:13.272
これは、ブロック方向の内側の余白、つまりパディングをまとめて指定するプロパティです。

5
00:00:13.272 --> 00:00:21.142
ふだんの横書きでは、ブロック方向は上から下へ進む方向なので、対象になるのは要素の上側と下側の余白です。

6
00:00:21.142 --> 00:00:26.389
この動画では、基本の書き方から、論理プロパティという考え方、値が一つと二つの違い、

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

8
00:00:31.636 --> 00:00:40.587
二レムという広い余白と、〇点五レムという狭い余白を比べることで、上下の間隔だけが変わる様子をはっきり確認しましょう。

9
00:00:40.587 --> 00:00:47.068
余白は読みやすさを左右する大切な要素なので、仕組みからしっかり理解していきましょう。

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

11
00:00:48.793 --> 00:00:55.538
スライドのように、対象のクラスにパディングブロックと書き、値として長さを一つ書きます。

12
00:00:55.538 --> 00:01:01.811
プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。

13
00:01:01.811 --> 00:01:05.889
この一文で、ブロック方向の始まり側と終わり側、横書きなら上と下の両方に、

14
00:01:05.889 --> 00:01:09.967
同じ大きさの内側余白が付きます。

15
00:01:09.967 --> 00:01:13.888
余白は枠線の内側、文字と枠の間に生まれる空間です。

16
00:01:13.888 --> 00:01:18.123
仕様上の初期値はゼロで、通常は親から子へ継承しません。

17
00:01:18.123 --> 00:01:21.887
余白が欲しい要素ごとに、自分で指定してください。

18
00:01:21.887 --> 00:01:30.200
セレクターはドットから始めるクラス指定で、エイチティーエムエルのクラス属性と名前をそろえることが大切です。

19
00:01:30.200 --> 00:01:34.581
ここで、論理プロパティという考え方を押さえましょう。

20
00:01:34.581 --> 00:01:40.816
従来のトップやボトムは、画面の上や下という物理的な位置で指定していました。

21
00:01:40.816 --> 00:01:47.219
これに対してブロックやインラインは、文章の流れを基準にした論理的な方向です。

22
00:01:47.219 --> 00:01:53.117
ブロックは段落が積み重なる方向、インラインは文字が進む方向を表します。

23
00:01:53.117 --> 00:01:58.340
横書きではブロックは上下ですが、縦書きに切り替えると、ブロック方向は右から左へ進む向きに変わり、

24
00:01:58.340 --> 00:02:03.564
対象は左右の余白になります。

25
00:02:03.564 --> 00:02:11.652
同じ指定でも書字方向に応じて余白の付く辺が自動で切り替わるのが、論理プロパティの大きな利点です。

26
00:02:11.652 --> 00:02:14.332
値の個数による違いを見てみましょう。

27
00:02:14.332 --> 00:02:18.798
値を一つだけ書くと、始まり側と終わり側に同じ余白が付きます。

28
00:02:18.798 --> 00:02:21.626
例えば二レムなら、上も下も二レムです。

29
00:02:21.626 --> 00:02:27.730
値を半角スペースで区切って二つ書くと、最初が始まり側、二番目が終わり側になります。

30
00:02:27.730 --> 00:02:32.791
例えば二レムと〇点五レムなら、横書きでは上が広く、下が狭くなります。

31
00:02:32.791 --> 00:02:36.811
値にはピクセルやレムなどの長さのほか、割合も使えます。

32
00:02:36.811 --> 00:02:43.510
ただし割合は、包含ブロックのインライン方向の大きさを基準に計算される点に注意してください。

33
00:02:43.510 --> 00:02:45.445
マイナスの値は使えません。

34
00:02:45.445 --> 00:02:52.144
迷ったときは、まず一つでそろえてから、必要な側だけ二つ目で調整すると分かりやすくなります。

35
00:02:52.144 --> 00:02:57.721
両側をまとめるのではなく、片側だけ余白を調整したい場面もよくあります。

36
00:02:57.721 --> 00:03:06.166
そのときは、始まり側だけのパディングブロックスタートと、終わり側だけのパディングブロックエンドを使います。

37
00:03:06.166 --> 00:03:12.858
横書きで見出しの下だけ余白を広げたいなら、終わり側であるエンドを指定すれば十分です。

38
00:03:12.858 --> 00:03:16.204
逆に上だけ欲しい場合はスタートを選びます。

39
00:03:16.204 --> 00:03:22.020
まとめて指定するパディングブロックと、片側ずつのスタート、エンドを使い分けることで、

40
00:03:22.020 --> 00:03:27.836
不要な余白を付けずに済み、指定の意図も読み取りやすくなります。

41
00:03:27.836 --> 00:03:29.295
ここからは実例です。

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

43
00:03:36.006 --> 00:03:44.615
中には少し長めの文章を入れて、文字が複数行に折り返したときにも、上下の余白が保たれる様子を確認できるようにしています。

44
00:03:44.615 --> 00:03:49.721
頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。

45
00:03:49.721 --> 00:03:55.411
シーエスエスでは、ステージに幅の上限と余白と点線の枠を付けて舞台を用意します。

46
00:03:55.411 --> 00:03:58.986
この土台は変えずに、最後のパディングブロックの行だけを切り替えて比べるのが、

47
00:03:58.986 --> 00:04:02.560
この実例の進め方です。

48
00:04:02.560 --> 00:04:08.688
親のステージがあることで、箱の外側と内側のどちらが変わったのかを比べやすくなります。

49
00:04:08.688 --> 00:04:11.243
土台のシーエスエスの続きです。

50
00:04:11.243 --> 00:04:16.013
デモの箱には、四方向すべてに一レムの内側余白と、緑色の三ピクセルの枠と、

51
00:04:16.013 --> 00:04:20.783
薄い緑の背景、そして文字色を指定します。

52
00:04:20.783 --> 00:04:28.108
この準備があることで、後から上下だけを変えたときの違いがはっきり見えるようになります。

53
00:04:28.108 --> 00:04:33.388
続く別のルールで、デモに対してパディングブロックを指定します。

54
00:04:33.388 --> 00:04:39.862
同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されます。

55
00:04:39.862 --> 00:04:46.164
ですから左右の余白は土台のまま残り、上下だけが新しい指定に置き換わります。

56
00:04:46.164 --> 00:04:51.275
土台と変更行を分けて書くのが、原因を追いやすくするコツです。

57
00:04:51.275 --> 00:04:57.748
背景色が余白の部分まで広がる様子も、あわせて確認しておくと理解が深まります。

58
00:04:57.748 --> 00:04:58.954
では比較です。

59
00:04:58.954 --> 00:05:01.192
最初は二レムを指定します。

60
00:05:01.192 --> 00:05:06.101
ファイルを保存してブラウザーを再読み込みすると、箱の中で文章の上と下に広い余白が生まれ、

61
00:05:06.101 --> 00:05:11.009
箱の高さも大きくなります。

62
00:05:11.009 --> 00:05:16.003
次に、最後の行の値だけを〇点五レムに置き換えてみましょう。

63
00:05:16.003 --> 00:05:18.242
他の指定はすべて同じです。

64
00:05:18.242 --> 00:05:24.442
今度は上下の余白がぐっと狭くなり、文字が枠に近づいて、箱も低くなります。

65
00:05:24.442 --> 00:05:31.330
変わったのは上下だけ、左右の間隔は一レムのまま、という点にぜひ注目してください。

66
00:05:31.330 --> 00:05:39.080
値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。

67
00:05:39.080 --> 00:05:42.538
色々な場面で役立つ共通値も知っておきましょう。

68
00:05:42.538 --> 00:05:49.755
インヘリットは親要素の計算された値を使う指定、イニシャルは仕様の初期値であるゼロに戻す指定です。

69
00:05:49.755 --> 00:05:56.671
アンセットは、継承するプロパティならインヘリット、そうでなければイニシャルとして扱われます。

70
00:05:56.671 --> 00:06:02.985
パディングブロックは通常継承しないので、アンセットはイニシャルと同じ結果になります。

71
00:06:02.985 --> 00:06:07.345
あわせて注意したいのが、固定の高さと組み合わせるときです。

72
00:06:07.345 --> 00:06:13.509
ボックスサイジングがボーダーボックスでないと、余白の分だけ箱全体が大きくなります。

73
00:06:13.509 --> 00:06:17.268
高さが想定と違うときは、この点も確認してください。

74
00:06:17.268 --> 00:06:20.786
効かないと感じたときは、順番に確認しましょう。

75
00:06:20.786 --> 00:06:28.739
まず、余白は内側の空間なので、背景色は余白の部分まで広がりますが、外側の隣の要素との間隔は変わりません。

76
00:06:28.739 --> 00:06:31.645
外側を空けたいならマージンの担当です。

77
00:06:31.645 --> 00:06:37.151
次に、縦書きでは対象が左右に変わる、という書字方向の違いも考えられます。

78
00:06:37.151 --> 00:06:39.599
続いて開発者ツールで確認します。

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

80
00:06:45.334 --> 00:06:51.070
スタイルズで宣言が上書きされていないかを見てください。

81
00:06:51.070 --> 00:06:59.176
最後にコンピューテッドで上下の最終的な値を確認し、三百二十ピクセル程度の画面幅でも読めるかチェックします。

82
00:06:59.176 --> 00:07:01.200
最後に互換性とまとめです。

83
00:07:01.200 --> 00:07:08.051
パディングブロックは、クローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、

84
00:07:08.051 --> 00:07:14.901
サファリ十四点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。

85
00:07:14.901 --> 00:07:15.835
まとめます。

86
00:07:15.835 --> 00:07:21.907
パディングブロックはブロック方向の始まりと終わりの内側余白をまとめる省略記法で、

87
00:07:21.907 --> 00:07:27.979
横書きでは上下、縦書きでは左右が対象になり、値は一つでも二つでも書けました。

88
00:07:27.979 --> 00:07:31.093
片側だけならスタートとエンドも使えます。

89
00:07:31.093 --> 00:07:36.231
練習として、二レムと〇点五レムの違いを言葉で説明してみてください。

90
00:07:36.231 --> 00:07:44.483
関連するパディングインラインやマージンブロックの記事もあわせて読むと、論理プロパティへの理解が深まります。

91
00:07:44.483 --> 00:07:45.884
お疲れさまでした。