VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

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

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