WEBVTT

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

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

3
00:00:03.180 --> 00:00:05.963
今回のテーマは、パディングインラインです。

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

5
00:00:11.661 --> 00:00:18.684
ふだんの横書きでは、インライン方向は文字が進む左右の方向なので、対象になるのは要素の左側と右側の余白です。

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

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

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

9
00:00:35.380 --> 00:00:37.119
まず基本の書き方です。

10
00:00:37.119 --> 00:00:44.073
スライドのように、対象のクラスにパディングインラインと書き、値として長さを一つ書きます。

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

12
00:00:50.396 --> 00:00:54.585
この一文で、インライン方向の始まり側と終わり側、横書きなら左と右の両方に、

13
00:00:54.585 --> 00:00:58.773
同じ大きさの内側余白が付きます。

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

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

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

17
00:01:10.786 --> 00:01:16.160
セレクターとエイチティーエムエルのクラス名をそろえることが大切です。

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

19
00:01:20.474 --> 00:01:26.612
従来のレフトやライトは、画面の左や右という物理的な位置で指定していました。

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

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

22
00:01:38.724 --> 00:01:43.535
横書きではインラインは左右ですが、縦書きに切り替えると、文字は上から下へ進むため、

23
00:01:43.535 --> 00:01:48.346
インライン方向は上下に変わります。

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

25
00:01:56.310 --> 00:01:59.628
多言語や縦書きにも対応しやすくなります。

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

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

28
00:02:06.084 --> 00:02:08.639
例えば二レムなら、左も右も二レムです。

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

30
00:02:14.153 --> 00:02:17.179
例えば二レムと〇点五レムなら、横書きで左から右へ書く言語では、左が広く、

31
00:02:17.179 --> 00:02:20.206
右が狭くなります。

32
00:02:20.206 --> 00:02:24.644
右から左へ書く言語では、始まり側が右になる点にも注目してください。

33
00:02:24.644 --> 00:02:29.217
値には長さのほか割合も使えますが、マイナスの値とオートは使えません。

34
00:02:29.217 --> 00:02:32.848
まず一つでそろえてから調整すると分かりやすくなります。

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

36
00:02:38.583 --> 00:02:47.595
そのときは、始まり側だけのパディングインラインスタートと、終わり側だけのパディングインラインエンドを使います。

37
00:02:47.595 --> 00:02:55.624
横書きで左から右へ書く場合、左だけ余白を広げたいなら、始まり側であるスタートを指定すれば十分です。

38
00:02:55.624 --> 00:02:58.901
逆に右だけ欲しい場合はエンドを選びます。

39
00:02:58.901 --> 00:03:04.964
まとめて指定するパディングインラインと、片側ずつのスタート、エンドを使い分けることで、

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

41
00:03:11.027 --> 00:03:14.468
アイコンと文字の間隔調整などにも便利です。

42
00:03:14.468 --> 00:03:15.897
ここからは実例です。

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

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

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

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

47
00:03:41.481 --> 00:03:45.054
この土台は変えずに、最後のパディングインラインの行だけを切り替えて比べるのが、

48
00:03:45.054 --> 00:03:48.627
この実例の進め方です。

49
00:03:48.627 --> 00:03:52.200
親があることで、内側の変化を見分けやすくなります。

50
00:03:52.200 --> 00:03:54.647
土台のシーエスエスの続きです。

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

52
00:03:59.215 --> 00:04:03.783
薄い緑の背景、そして文字色を指定します。

53
00:04:03.783 --> 00:04:10.798
この準備があることで、後から左右だけを変えたときの違いがはっきり見えるようになります。

54
00:04:10.798 --> 00:04:16.018
続く別のルールで、デモに対してパディングインラインを指定します。

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

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

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

58
00:04:33.148 --> 00:04:34.395
では比較です。

59
00:04:34.395 --> 00:04:36.712
最初は二レムを指定します。

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

61
00:04:42.147 --> 00:04:47.582
文章が表示される幅は狭くなります。

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

63
00:04:52.749 --> 00:04:55.066
他の指定はすべて同じです。

64
00:04:55.066 --> 00:05:02.550
今度は左右の余白がぐっと狭くなり、文字が枠に近づいて、一行に収まる文字数も増えます。

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

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

67
00:05:17.696 --> 00:05:21.808
使える値の注意点と、共通値も知っておきましょう。

68
00:05:21.808 --> 00:05:26.948
パディングインラインでは、マイナスの値とオートは使えません。

69
00:05:26.948 --> 00:05:31.403
書いても無効な宣言として扱われ、余白は変わりません。

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

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

72
00:05:47.509 --> 00:05:54.877
パディングインラインは通常継承しないので、アンセットはイニシャルと同じ結果になります。

73
00:05:54.877 --> 00:06:03.444
割合を指定した場合は、包含ブロックのインライン方向の大きさを基準に計算される点も覚えておきましょう。

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

75
00:06:07.230 --> 00:06:15.130
まず多いのが、パディングレフトやパディングライトといった左右固定の指定と混在しているケースです。

76
00:06:15.130 --> 00:06:21.221
後から書かれた宣言が優先され、意図しない側だけ上書きされることがあります。

77
00:06:21.221 --> 00:06:24.677
どちらかに統一できないか見直してください。

78
00:06:24.677 --> 00:06:30.603
次に、縦書きでは対象が上下に変わる、という書字方向の違いも考えられます。

79
00:06:30.603 --> 00:06:33.236
続いて開発者ツールで確認します。

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

81
00:06:41.466 --> 00:06:49.696
スタイルズで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで左右の最終値を確認します。

82
00:06:49.696 --> 00:06:51.524
最後に互換性とまとめです。

83
00:06:51.524 --> 00:06:57.782
パディングインラインは、クローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、

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

85
00:07:04.039 --> 00:07:04.883
まとめます。

86
00:07:04.883 --> 00:07:10.508
パディングインラインはインライン方向の始まりと終わりの内側余白をまとめる省略記法で、

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

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

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

90
00:07:23.586 --> 00:07:29.210
関連するパディングブロックやマージンインラインもあわせて学ぶと理解が深まります。

91
00:07:29.210 --> 00:07:30.476
お疲れさまでした。