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

CSSのbackground-originプロパティでpadding-box値を設定する方法

CSSのbackground-originプロパティとは

CSSのbackground-originプロパティは、背景画像の描画開始位置（基準となる領域）を指定するためのプロパティです。このプロパティの値としてpadding-boxを設定すると、背景画像はパディング領域の左上隅から表示されます。

background-originには主に以下の3つの値を指定でき、それぞれ背景画像の基準位置が異なります。

  • padding-box：パディング領域を基準に背景画像を配置します（初期値）。
  • border-box：ボーダー（枠線）領域まで含めて背景画像を配置します。
  • content-box：コンテンツ領域のみを基準に背景画像を配置します。

padding-box値の実装例

次のコードでは、同じ背景画像に対してpadding-box・border-box・content-boxの3つの値をそれぞれ設定し、表示位置の違いを比較できるようにしています。実際にブラウザで実行して、背景画像の開始位置がどのように変化するか確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #value1 {
            border: 3px solid blue;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: padding-box;
         }
         #value2 {
            border: 3px solid orange;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: border-box;
         }
         #value3 {
            border: 3px dashed yellow;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: content-box;
         }
      </style>
   </head>
   <body>
      <h1>padding-box の値</h1>
      <div id = "value1">
         <h2>見出し2</h2>
         <p>これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。</p>
         <h3>見出し3</h3>
         <p>これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。</p>
      </div>
      <h1>border-box の値</h1>
      <div id = "value2">
         <h2>見出し2</h2>
         <p>これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。</p>
         <h3>見出し3</h3>
         <p>これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。</p>
      </div>
      <h1>content-box の値</h1>
      <div id = "value3">
         <h2>見出し2</h2>
         <p>これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。</p>
         <h3>見出し3</h3>
         <p>これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。これはデモ用テキストです。</p>
      </div>
   </body>
</html>

表示結果のポイント

  • padding-boxを指定した要素では、背景画像がボーダーの内側（パディング領域）の左上から始まります。
  • border-boxを指定すると、背景画像はボーダー領域の左上から始まるため、枠線の下にも画像が表示されます。
  • content-boxを指定すると、パディングを除いたコンテンツ領域の左上が基準となり、最も内側から画像が表示されます。

このようにbackground-originを使い分けることで、背景画像とボックスモデル（border・padding・content）の関係を柔軟に制御できます。デザインに応じて適切な値を選択しましょう。

  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    テキストのインデント（字下げ）を行うには、CSSの text-indent プロパティを使用します。このプロパティは、段落の最初の行だけをインデントするためのもので、文章の読みやすさやデザイン性を高めたい場合に便利です。text-indentプロパティの基本text-indent には、px（ピクセル）、em、% などの単位を指定できます。値が大きいほど、最初の行が右側に大きくずれます。例1：pxでインデントを指定するまずは、30px を指定した基本的な例を見てみましょう。<!DOCTYPE html> <html> <head> <style>