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

CSSのcontent-box値とは？background-originプロパティで背景画像の表示位置を制御する方法

CSSでは、background-originプロパティにcontent-box値を指定することで、背景画像の表示開始位置をコンテンツ領域の左上隅に設定できます。

background-originプロパティは、背景画像をどの領域を基準に配置するかを決めるためのプロパティです。指定できる主な値は以下の3つです。

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

特にcontent-boxを指定した場合、要素にパディングやボーダーがあっても、背景画像はそれらを無視してテキストなどの実際のコンテンツが始まる位置（左上）から表示されます。

実装例：3つの値の違いを比較するサンプルコード

以下のコードでは、同じ背景画像に対して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>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
      <h3>見出し3</h3>
      これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。</p>
    </div>

    <h1>border-box値の例</h1>
    <div id = "value2">
      <h2>見出し2</h2>
      <p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
      <h3>見出し3</h3>
      これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。</p>
    </div>

    <h1>content-box値の例</h1>
    <div id = "value3">
      <h2>見出し2</h2>
      <p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
      <h3>見出し3</h3>
      これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。</p>
    </div>
  </body>
</html>

まとめ

background-origin: content-boxを使うことで、背景画像をコンテンツ領域の左上から正確に表示させることができます。パディングやボーダーの影響を受けたくないデザインの場合に特に有効です。各値の違いは、実際にサンプルコードを実行して視覚的に確認すると理解しやすくなります。

  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>