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

CSSのpadding-leftプロパティで要素の左パディングを指定する方法

CSSのpadding-leftプロパティは、要素の左側に設けるパディング（内側の余白）を指定するためのプロパティです。境界線や背景色の内側にスペースを作り、テキストなどのコンテンツが左端に密着しないように調整できます。

padding-leftで指定できる値

padding-leftには、以下の2種類の値を指定できます。

  • 長さ（length）：px、em、remなどの単位で固定値を指定します。例：padding-left: 20px;
  • パーセンテージ（%）：親要素（包含ブロック）の幅に対する割合で指定します。例：padding-left: 20%;

コード例

次の例では、1つ目の段落に「20px」、2つ目の段落に「20%」の左パディングを設定し、青色の枠線で余白の違いをわかりやすく表示しています。

<html>
   <head>
   </head>
   <body>
      <p style = "padding-left: 20px; border:2px solid blue;">
         これはデモ用のコンテンツです。
      </p>
      <p style = "padding-left: 20%; border:2px solid blue;">
         これは別のデモ用コンテンツです。
      </p>
   </body>
</html>

実行結果のポイント

どちらの段落も左側に余白ができ、テキストが枠線から離れて表示されます。「20px」を指定した段落は常に固定の余白になりますが、「20%」を指定した段落はブラウザのウィンドウ幅（親要素の幅）に応じて余白の大きさが変化します。レスポンシブデザインではパーセンテージ指定が有効です。

  1. CSSでキャレット（カーソル）の色を指定する方法｜caret-colorプロパティの使い方

    テキスト入力時に表示されるキャレット（挿入位置を示す縦棒カーソル）の色を変更したい場合は、CSSの caret-color プロパティを使用します。このプロパティを使えば、<input> や <textarea> などの編集可能な要素におけるカーソルの色を自由にカスタマイズできます。 caret-colorプロパティの基本的な使い方 caret-color プロパティには、キーワード・16進数・RGB・HSLなど、任意のCSSカラー値を指定できます。以下は、入力欄のキャレットを青色に設定するシンプルな例です。 サンプルコード <!DOCTYPE html>

  2. CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説

    Web制作において、画像・動画・カード型レイアウトなどで要素の縦横比（アスペクト比）を固定したい場面は非常に多くあります。ウィンドウサイズが変わってもレイアウトが崩れないようにするには、CSSの工夫が必要です。 基本の考え方：padding-topを使った手法 最も広く知られているのが「padding-top」を活用したテクニックです。paddingのパーセント指定は親要素の幅を基準に計算されるため、これを利用して高さを幅に連動させることができます。 例えば4:3の比率を維持したい場合は、padding-topに「75%」（3÷4×100）を指定します。同様に16:9なら「56.25%」、正方