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

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

CSSのbackground-originプロパティを使用すると、背景画像の描画開始位置（基準領域）を指定できます。この記事では、その値の一つであるborder-boxに焦点を当てて解説します。

border-box値とは？

background-originプロパティにborder-boxを指定すると、背景画像はボーダー（枠線）の左上隅から描画が始まります。つまり、要素の境界線の下にも背景画像が表示されることになります。

参考までに、background-originプロパティには以下の3つの主要な値があります。

  • padding-box：パディング領域の左上隅を基準にする（初期値）
  • border-box：ボーダー領域の左上隅を基準にする
  • content-box：コンテンツ領域の左上隅を基準にする

実装例：border-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 value</h1>
    <div id = "value1">
      <h2>Heading 2</h2>
      <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
      <h3>Heading 3</h3>
      This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
    </div>
    <h1>border-box value</h1>
    <div id = "value2">
      <h2>Heading 2</h2>
      <p>This is demo text. This is demo text. This is demo text.
        This is demo text. This is demo text. This is demo text.
        This is demo text. This is demo text. This is demo text.
      <h3>Heading 3</h3>
        This is demo text. This is demo text. This is demo text.
        This is demo text. This is demo text. This is demo text.
        This is demo text.
      </p>
    </div>
    <h1>content-box value</h1>
    <div id = "value3">
      <h2>Heading 2</h2>
      <p>This is demo text. This is demo text. This is demo text.
        This is demo text. This is demo text. This is demo text.
        This is demo text. This is demo text. This is demo text.
      <h3>Heading 3</h3>
        This is demo text. This is demo text. This is demo text.
        This is demo text. This is demo text. This is demo text.
        This is demo text.
      </p>
    </div>
  </body>
</html>

各値の違いのポイント

このサンプルを実行すると、次のような違いが確認できます。

  • #value1（padding-box）：青いボーダーの内側、パディング領域の左上から背景画像が始まります。
  • #value2（border-box）：オレンジ色のボーダーの左上隅から背景画像が始まり、ボーダーの下にも画像が回り込みます。
  • #value3（content-box）：黄色い破線ボーダーとパディングを除いたコンテンツ領域の左上から背景画像が始まります。

border-boxを指定すると、背景画像がボーダー領域まで及ぶため、半透明のボーダーや装飾的な枠線と組み合わせると、より立体的なデザイン表現が可能になります。用途に応じて3つの値を使い分けてみてください。

  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>