CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのpadding-leftプロパティとは？使い方とサンプルコードを解説

CSSの padding-left プロパティは、要素の左側に内側の余白（パディング）を設定するために使用します。要素の内容と左側の境界線との間隔を調整でき、値には「px」や「em」などの長さの単位、または親要素に対する割合（%）を指定できます。

padding-leftプロパティの基本構文

selector {
    padding-left: 値;
}

指定できる主な値は以下の通りです。

  • length：px、em、rem などの絶対・相対単位で余白を指定します。
  • %：親要素の幅に対する割合で余白を指定します。
  • inherit：親要素の padding-left の値を継承します。

使用例

以下の例では、1つ目の段落にピクセル単位で、2つ目の段落にパーセント単位で左パディングを指定しています。

<html>
   <head>
   </head>
   <body>
      <p style = "padding-left: 10px; border:1px solid blue;">
         左パディングを指定した段落です
      </p>
      <p style = "padding-left: 10%; border:1px solid blue;">
         パーセントで左パディングを指定した別の段落です
      </p>
   </body>
</html>

実行結果のポイント

このコードをブラウザで表示すると、青い境界線を持つ2つの段落が表示され、それぞれのテキストが左側から指定した分だけ内側にずれて表示されます。パーセント指定の場合は、ブラウザの幅や親要素の幅に応じて余白が変化する点に注意してください。

まとめ

padding-left プロパティを使うことで、要素内のコンテンツと左端の間隔を柔軟に制御できます。レイアウトの微調整や可読性の向上に役立つ基本的なプロパティなので、他のパディング関連プロパティ（padding-top、padding-right、padding-bottom）とあわせて覚えておくと便利です。

  1. CSSでpadding（パディング）プロパティをアニメーションさせる方法

    CSSでpaddingプロパティをアニメーション化するには CSSでは、要素の内側の余白を指定するpaddingプロパティも、アニメーションの対象にすることができます。@keyframesルールと組み合わせることで、パディングの幅を滑らかに変化させ、動きのある演出を実現できます。 基本的な流れは以下のとおりです。 @keyframesでアニメーションの各段階におけるpaddingの値を定義する 対象の要素にanimationプロパティを設定し、名前・再生時間・繰り返し回数を指定する サンプルコード 次のコードでは、3秒周期で無限に繰り返されるアニメーションにより、div要素のパディングが変

  2. CSSのpaddingプロパティ（省略形・ショートハンド）の使い方

    CSSのpaddingプロパティは、padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）の4つの値をまとめて指定できる省略形（ショートハンド）プロパティです。1行で記述できるため、コードがすっきりし、可読性も向上します。 省略形の基本的な書き方 まずは基本となる例を見てみましょう。 padding: 10px 5px 7px 10px; この場合、各辺のパディングは次のように適用されます。 上（top）のパディング：10px 右（right）のパディング：5px 下（bottom）のパディング：7px 左（left）