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

CSSのpadding-rightで要素の右側の余白（パディング）を指定する方法

CSSの padding-right プロパティは、要素の右側のパディング（内側の余白）を指定するために使用します。境界線や背景色と組み合わせることで、テキストと枠線の間に適切な間隔を作り、読みやすいレイアウトを実現できます。

padding-rightで指定できる値

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

  • 長さ（length）：px、em、rem などの絶対値・相対値で余白を指定します。
  • パーセンテージ（%）：親要素の幅に対する割合で余白を指定します。レスポンシブデザインに便利です。

使用例

次の例では、1つ目の段落に「20px」、2つ目の段落に「20%」の右パディングを設定し、青い枠線で余白の違いを視覚的に確認できるようにしています。

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

表示結果のポイント

ブラウザでこのコードを表示すると、どちらの段落もテキストと青い枠線の右側に余白が空いていることがわかります。

  • 1つ目の段落は固定値の 20px が適用されるため、画面サイズに関係なく常に同じ幅の余白になります。
  • 2つ目の段落は 20% が適用されるため、親要素の幅に応じて余白の大きさが変化します。ウィンドウのサイズを変更して確認してみてください。

このように、padding-right を使いこなすことで、要素ごとの余白を柔軟にコントロールできます。上下左右すべてのパディングを一括で指定したい場合は、ショートハンドプロパティの padding を利用すると、より簡潔にスタイルを記述できます。

  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%」、正方