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

JavaScriptで背景画像の位置決め基準エリアを設定する方法

JavaScriptで背景画像の位置決め（ポジショニング）基準となるエリアを設定するには、backgroundOrigin プロパティを使用します。このプロパティは、CSSの background-origin に相当し、背景画像をどのボックス領域を基準に配置するかを動的に変更できます。

backgroundOriginで指定できる値

backgroundOrigin プロパティには、以下の3つの値を指定できます。

  • border-box：ボーダー（枠線）の外側を含む領域を基準に配置します（デフォルト値）。
  • padding-box：パディング（内側の余白）を含む領域を基準に配置します。
  • content-box：コンテンツそのものが表示される領域のみを基準に配置します。

サンプルコード

次のコードでは、ボタンをクリックすると背景画像の位置決めエリアが「content-box」に変更されます。パディング領域には背景画像が表示されなくなるため、挙動の違いがひと目で確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px dashed yellow;
            padding: 35px;
            width: 600px;
            height: 400px;
            background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
         }
      </style>
   </head>
   <body>
      <button onclick="display()">背景画像のエリアを設定</button>
      <div id="box">
         これはデモテキストです！これはデモテキストです！
         これはデモテキストです！これはデモテキストです！
      </div>
      <script>
         function display() {
            document.getElementById("box").style.backgroundOrigin = "content-box";
         }
      </script>
   </body>
</html>

ポイントまとめ

  • backgroundOrigin は要素の style オブジェクトから直接設定・取得できます。
  • 背景画像を繰り返さない設定（no-repeat）にすると、各値による表示範囲の違いが分かりやすくなります。
  • 背景のクリップ範囲を制御したい場合は、あわせて backgroundClip プロパティも活用すると効果的です。
  1. JavaScriptでフォントをスモールキャピタル（小型大文字）で表示する方法

    テキストをスモールキャピタル（小型大文字）で表示したい場合は、JavaScriptの fontVariant プロパティを使用します。このプロパティに「small-caps」を設定することで、英字テキストが小型の大文字で表示されるようになります。スモールキャピタルとはスモールキャピタル（small-caps）とは、小文字の部分を通常より小さなサイズの大文字で表示する文字スタイルです。見出しや装飾的なテキストなど、デザインにアクセントを加えたい場面でよく利用されます。サンプルコード以下のコードを実行し、ボタンをクリックすると、指定した段落のフォントファミリーとスモールキャピタル表示が設定されます

  2. JavaScriptでリスト項目のマーカーに画像を設定する方法

    リスト項目（li要素）のマーカーに画像を設定したい場合は、JavaScriptの listStyleImage プロパティを使用します。このプロパティはCSSの list-style-image に対応しており、通常の黒丸（・）や白丸の代わりに、好きな画像を箇条書きの記号として表示できます。 使い方のポイント listStyleImage プロパティには、url(画像のURL) の形式で値を指定します。対象となるのは ul や ol などのリスト要素です。 サンプルコード 以下のコードでは、ボタンをクリックすると listStyleImage プロパティによって、順序付きリストのマーカーが指定