VIDEO LESSON

CSSのpadding-blockの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:46動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、パディングブロックです。
0:06これは、ブロック方向の内側の余白、つまりパディングをまとめて指定するプロパティです。
0:13ふだんの横書きでは、ブロック方向は上から下へ進む方向なので、対象になるのは要素の上側と下側の余白です。
0:21この動画では、基本の書き方から、論理プロパティという考え方、値が一つと二つの違い、
0:26そして効かないときの確認方法までを順番に見ていきます。
0:31二レムという広い余白と、〇点五レムという狭い余白を比べることで、上下の間隔だけが変わる様子をはっきり確認しましょう。
0:40余白は読みやすさを左右する大切な要素なので、仕組みからしっかり理解していきましょう。
0:47まず基本の書き方です。
0:48スライドのように、対象のクラスにパディングブロックと書き、値として長さを一つ書きます。
0:55プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
1:01この一文で、ブロック方向の始まり側と終わり側、横書きなら上と下の両方に、
1:05同じ大きさの内側余白が付きます。
1:09余白は枠線の内側、文字と枠の間に生まれる空間です。
1:13仕様上の初期値はゼロで、通常は親から子へ継承しません。
1:18余白が欲しい要素ごとに、自分で指定してください。
1:21セレクターはドットから始めるクラス指定で、エイチティーエムエルのクラス属性と名前をそろえることが大切です。
1:30ここで、論理プロパティという考え方を押さえましょう。
1:34従来のトップやボトムは、画面の上や下という物理的な位置で指定していました。
1:40これに対してブロックやインラインは、文章の流れを基準にした論理的な方向です。
1:47ブロックは段落が積み重なる方向、インラインは文字が進む方向を表します。
1:53横書きではブロックは上下ですが、縦書きに切り替えると、ブロック方向は右から左へ進む向きに変わり、
1:58対象は左右の余白になります。
2:03同じ指定でも書字方向に応じて余白の付く辺が自動で切り替わるのが、論理プロパティの大きな利点です。
2:11値の個数による違いを見てみましょう。
2:14値を一つだけ書くと、始まり側と終わり側に同じ余白が付きます。
2:18例えば二レムなら、上も下も二レムです。
2:21値を半角スペースで区切って二つ書くと、最初が始まり側、二番目が終わり側になります。
2:27例えば二レムと〇点五レムなら、横書きでは上が広く、下が狭くなります。
2:32値にはピクセルやレムなどの長さのほか、割合も使えます。
2:36ただし割合は、包含ブロックのインライン方向の大きさを基準に計算される点に注意してください。
2:43マイナスの値は使えません。
2:45迷ったときは、まず一つでそろえてから、必要な側だけ二つ目で調整すると分かりやすくなります。
2:52両側をまとめるのではなく、片側だけ余白を調整したい場面もよくあります。
2:57そのときは、始まり側だけのパディングブロックスタートと、終わり側だけのパディングブロックエンドを使います。
3:06横書きで見出しの下だけ余白を広げたいなら、終わり側であるエンドを指定すれば十分です。
3:12逆に上だけ欲しい場合はスタートを選びます。
3:16まとめて指定するパディングブロックと、片側ずつのスタート、エンドを使い分けることで、
3:22不要な余白を付けずに済み、指定の意図も読み取りやすくなります。
3:27ここからは実例です。
3:29エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
3:36中には少し長めの文章を入れて、文字が複数行に折り返したときにも、上下の余白が保たれる様子を確認できるようにしています。
3:44頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
3:49シーエスエスでは、ステージに幅の上限と余白と点線の枠を付けて舞台を用意します。
3:55この土台は変えずに、最後のパディングブロックの行だけを切り替えて比べるのが、
3:58この実例の進め方です。
4:02親のステージがあることで、箱の外側と内側のどちらが変わったのかを比べやすくなります。
4:08土台のシーエスエスの続きです。
4:11デモの箱には、四方向すべてに一レムの内側余白と、緑色の三ピクセルの枠と、
4:16薄い緑の背景、そして文字色を指定します。
4:20この準備があることで、後から上下だけを変えたときの違いがはっきり見えるようになります。
4:28続く別のルールで、デモに対してパディングブロックを指定します。
4:33同じクラスが複数回登場する場合、通常は後ろの同じ詳しさの宣言が優先されます。
4:39ですから左右の余白は土台のまま残り、上下だけが新しい指定に置き換わります。
4:46土台と変更行を分けて書くのが、原因を追いやすくするコツです。
4:51背景色が余白の部分まで広がる様子も、あわせて確認しておくと理解が深まります。
4:57では比較です。
4:58最初は二レムを指定します。
5:01ファイルを保存してブラウザーを再読み込みすると、箱の中で文章の上と下に広い余白が生まれ、
5:06箱の高さも大きくなります。
5:11次に、最後の行の値だけを〇点五レムに置き換えてみましょう。
5:16他の指定はすべて同じです。
5:18今度は上下の余白がぐっと狭くなり、文字が枠に近づいて、箱も低くなります。
5:24変わったのは上下だけ、左右の間隔は一レムのまま、という点にぜひ注目してください。
5:31値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、大切な確かめ方です。
5:39色々な場面で役立つ共通値も知っておきましょう。
5:42インヘリットは親要素の計算された値を使う指定、イニシャルは仕様の初期値であるゼロに戻す指定です。
5:49アンセットは、継承するプロパティならインヘリット、そうでなければイニシャルとして扱われます。
5:56パディングブロックは通常継承しないので、アンセットはイニシャルと同じ結果になります。
6:02あわせて注意したいのが、固定の高さと組み合わせるときです。
6:07ボックスサイジングがボーダーボックスでないと、余白の分だけ箱全体が大きくなります。
6:13高さが想定と違うときは、この点も確認してください。
6:17効かないと感じたときは、順番に確認しましょう。
6:20まず、余白は内側の空間なので、背景色は余白の部分まで広がりますが、外側の隣の要素との間隔は変わりません。
6:28外側を空けたいならマージンの担当です。
6:31次に、縦書きでは対象が左右に変わる、という書字方向の違いも考えられます。
6:37続いて開発者ツールで確認します。
6:39ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
6:45スタイルズで宣言が上書きされていないかを見てください。
6:51最後にコンピューテッドで上下の最終的な値を確認し、三百二十ピクセル程度の画面幅でも読めるかチェックします。
6:59最後に互換性とまとめです。
7:01パディングブロックは、クローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、
7:08サファリ十四点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。
7:14まとめます。
7:15パディングブロックはブロック方向の始まりと終わりの内側余白をまとめる省略記法で、
7:21横書きでは上下、縦書きでは左右が対象になり、値は一つでも二つでも書けました。
7:27片側だけならスタートとエンドも使えます。
7:31練習として、二レムと〇点五レムの違いを言葉で説明してみてください。
7:36関連するパディングインラインやマージンブロックの記事もあわせて読むと、論理プロパティへの理解が深まります。
7:44お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

padding-blockの役割と主な指定値を解説。横書きでは文章と上下の枠の間隔が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのpadding-blockの使い方：指定値・実例・効かない原因とブラウザー互換性 →