SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:27動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、パディングです。
  4. 0:06これは、枠線の内側にある余白のことで、内容と枠線の間にどれだけ空間を開けるかを決めるプロパティです。
  5. 0:14箱の中の文章が枠にぴったりくっついていると、窮屈で読みにくく感じます。
  6. 0:20そこにパディングでゆとりを作ると、見た目がぐっと整います。
  7. 0:25この動画では、基本の書き方、値を一つから四つ書いたときの違い、使える値と使えない値、
  8. 0:30そして効かないときの確認方法までを順番に見ていきます。
  9. 0:36記事の実例に沿って、広い余白と狭い余白を比べて、違いを目で確かめましょう。
  10. 0:42まず基本の書き方です。
  11. 0:44クラスを指定したら、パディングと書き、コロンのあとに値を並べ、最後にセミコロンを付けます。
  12. 0:50スライドの例では、上下が一・五レム、左右が二レムという指定です。
  13. 0:54レムは文字サイズを基準にした単位で、画面に合わせて余白を考えやすいのが特徴です。
  14. 1:00この一行だけで、四辺の内側の余白をまとめて決められます。
  15. 1:04エイチティーエムエル側では、クラス、デモを持つ要素が対象になるので、セレクターとクラス名が一致しているかを最初に確認してください。
  16. 1:13まずはこの形をそのまま書いて、ブラウザーで確かめることから始めましょう。
  17. 1:18パディングで大切なのが、値の個数による割り当てです。
  18. 1:22値を一つだけ書くと、四辺すべてが同じ余白になります。
  19. 1:27二つ書くと、一つ目が上下、二つ目が左右を担当します。
  20. 1:31三つ書くと、上、左右、下の順です。
  21. 1:34四つ書くと、上、右、下、左と、時計回りに割り当てられます。
  22. 1:39記事の例で使う、二つの値の書き方が一番よく登場します。
  23. 1:44上下と左右で余白を変えたいときに便利だからです。
  24. 1:48個数を間違えると、思っていたのと違う辺が広がってしまうので、書いたあとは、
  25. 1:54どの値がどの辺に対応しているかを指で追いながら確認すると安心です。
  26. 2:00四辺を別々に書く方法もあります。
  27. 2:03上の余白はパディングトップ、右はパディングライト、下はパディングボトム、
  28. 2:07左はパディングレフトという個別のプロパティが担当しています。
  29. 2:12パディングは、この四つをまとめて書ける一括指定です。
  30. 2:15普段は一行で済ませて問題ありませんが、下だけ広げたいといった部分的な調整では、
  31. 2:19個別の指定が役立ちます。
  32. 2:23なお、仕様上の初期値はゼロで、パディングは親から通常は継承しません。
  33. 2:27親に余白があっても、子には自動では伝わらない点も覚えておきましょう。
  34. 2:32継承させたい場合は、インヘリットという値を明示的に書く必要があります。
  35. 2:37次に、指定できる値を確認します。
  36. 2:40ピクセルやレムなどの長さのほか、パーセントで割合も書けます。
  37. 2:45パーセントの場合は、親要素の幅を基準に計算される点に注意してください。
  38. 2:51縦の余白でも、基準は高さではなく幅です。
  39. 2:55一方で、使えない値もあります。
  40. 2:57自動調整を意味するオートは、パディングでは使えません。
  41. 3:02また、マイナスの値も指定できません。
  42. 3:05外側の余白であるマージンとは違い、内側の余白をマイナスにして内容を枠の外へはみ出させることはできない、
  43. 3:11と理解しておきましょう。
  44. 3:16無効な値を書くと、その宣言自体が効かなくなります。
  45. 3:21余白の位置を、ボックスモデルで整理しましょう。
  46. 3:24要素は内側から、内容、パディング、枠線、マージンという層でできています。
  47. 3:30パディングは内容のすぐ外側、枠線のすぐ内側です。
  48. 3:34ここでもう一つ大事なのが、背景の広がり方です。
  49. 3:37背景色や背景画像は、パディングの領域まで描画されます。
  50. 3:41だから余白を広げると、色の付いた範囲も一緒に広がります。
  51. 3:46反対に、枠の外側の余白であるマージンには背景は広がりません。
  52. 3:50クリックできる範囲を広げたいボタンなどでは、背景も含めて広がるパディングが向いています。
  53. 3:57内側か外側かで、役割がはっきり分かれるのです。
  54. 4:01サイズ計算との関係も押さえておきましょう。
  55. 4:04初期状態に近いコンテントボックスでは、幅の指定は内容だけの幅を意味します。
  56. 4:10そこにパディングと枠線が外側へ加わるため、実際の表示幅は指定より大きくなります。
  57. 4:17記事もこの点を、間違えやすいポイントとして挙げています。
  58. 4:22一方、ボーダーボックスを指定すると、パディングと枠線は幅の中に含まれるので、
  59. 4:26実際の幅は指定どおりに収まります。
  60. 4:31記事の実例でも、全体にボーダーボックスを指定してから比較しています。
  61. 4:36横幅が計算と合わないときは、まずボックスサイジングとパディングの合計を確認してください。
  62. 4:43ここからは記事の実例です。
  63. 4:45エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  64. 4:52中には少し長めの文章を入れて、折り返したときの見え方も確認できるようにしています。
  65. 4:58頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  66. 5:03今回比べたいのは文章の内容ではなく、枠線と文章の間の距離そのものです。
  67. 5:08土台を固定してから余白だけを差し替えると、距離の変化だけを純粋に観察できます。
  68. 5:14この考え方は、ほかのプロパティを学ぶときにも役立つ比較の基本です。
  69. 5:19土台のシーエスエスです。
  70. 5:21全体にボックスサイジングを指定し、ステージには幅の上限と余白、点線の枠と薄い背景を付けます。
  71. 5:29デモの箱には濃い緑の枠線と薄い緑の背景を用意し、最後の行でパディングに、
  72. 5:33上下一・五レム、左右二レムを指定します。
  73. 5:38これがゆったりした状態です。
  74. 5:40次に、最後の行だけを、四辺すべて〇・五レムへ置き換えて再読み込みします。
  75. 5:46すると枠線と文章がぐっと近付き、同じ文章でも窮屈な印象に変わります。
  76. 5:52変えたのは余白の一行だけです。
  77. 5:55保存と再読み込みを繰り返して、広い場合と狭い場合を見比べてください。
  78. 6:00効かないときの確認です。
  79. 6:02まず疑いたいのは、値の間違いです。
  80. 6:05オートやマイナスの値を混ぜると、宣言が無効扱いになり、余白が付かないことがあります。
  81. 6:12次に、同じ要素へ後から別のパディングが書かれていないかを確認しましょう。
  82. 6:18詳細度が同じなら、後に書いた宣言が優先されます。
  83. 6:22記事の手順では、ネットワークでスタイルシートが取得できているか、要素のクラスとセレクターが一致しているか、
  84. 6:30スタイルズで打ち消し線が付いていないかを順に調べ、最後にコンピューテッドで最終的な値を確認します。
  85. 6:38狭い画面幅や文字拡大でも読みにくくならないかも合わせて見てください。
  86. 6:44最後に互換性とまとめです。
  87. 6:46記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
  88. 6:53ファイアフォックス一以降、サファリ一以降などで対応が示されていて、古くから安心して使えるプロパティです。
  89. 6:59まとめます。
  90. 7:00パディングは枠線の内側の余白で、値は一つから四つまで書け、通常は継承せず、
  91. 7:05オートと負の値は使えませんでした。
  92. 7:09練習として、上下一・五レム左右二レムと、四辺〇・五レムの違いを言葉で説明し、
  93. 7:14値を一つずつだけ変えて結果を比べてみてください。
  94. 7:18関連するマージンやボーダーも学ぶと、余白と枠線の調整が一通りできるようになります。
  95. 7:25お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

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

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