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

HTML DOM スタイルの backgroundSize プロパティとは？使い方と設定値をわかりやすく解説

HTML DOM の backgroundSize プロパティは、要素の背景画像のサイズを取得または設定するために使用されます。JavaScript から動的に背景画像の大きさを制御したい場合に便利なプロパティです。

構文

backgroundSize プロパティの設定

object.style.backgroundSize = "auto|length|cover|contain|initial|inherit";

指定できる値（プロパティ値）

backgroundSize プロパティに指定できる主な値とその説明は以下の通りです。

番号値と説明
1auto
背景画像を本来のサイズで表示します。デフォルト値です。
2length（長さ）
背景画像の幅と高さを px などの単位で指定します。1つ目の値が幅、2つ目の値が高さに対応します。値を1つだけ指定した場合、省略されたもう片方は auto として扱われます。
3percentage（パーセント）
背景画像の幅と高さをパーセンテージで指定します。パーセントは親要素の幅と高さを基準に計算されます。1つ目の値が幅、2つ目の値が高さに対応し、値を1つだけ指定した場合は auto が適用されます。
4cover
背景領域全体を完全に覆えるよう、背景画像を拡大縮小します。画像の一部が切り取られる場合があります。
5contain
背景画像全体がコンテンツ領域内に収まるように拡大縮小します。縦横比は維持されます。
6initial
このプロパティを初期値（デフォルト値）に設定します。
7inherit
親要素のプロパティ値を継承します。

サンプルコード

HTML DOM の backgroundSize プロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、div 要素の背景画像サイズが変更される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        box-shadow: 0 2px 0 4px mintcream;
        padding: 45px;
        background: url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
        background-size: 150px 150px;
    }
</style>
<script>
    function changeBackSize(){
        document.getElementById("DIV1").style.backgroundSize="100px 100px";
        document.getElementById("Sample").innerHTML="背景画像のサイズを縮小しました";
    }
</script>
</head>
<body>
<h2>PL/SQL チュートリアル</h2>
<div id="DIV1"></div>
<p>下のボタンをクリックして、上の div 要素の背景画像サイズを変更してみましょう</p>
<button onclick="changeBackSize()">サイズを変更</button>
<p id="Sample"></p>
</body>
</html>

実行結果

上記のコードを実行すると、次のような表示になります。

HTML DOM スタイルの backgroundSize プロパティとは？使い方と設定値をわかりやすく解説

「サイズを変更」ボタンをクリックすると、以下のように背景画像のサイズが 150px × 150px から 100px × 100px へと縮小され、メッセージも表示されます。

HTML DOM スタイルの backgroundSize プロパティとは？使い方と設定値をわかりやすく解説

まとめ

backgroundSize プロパティを使えば、CSS だけでなく JavaScript 経由でも背景画像のサイズを柔軟に制御できます。特に cover や contain を活用することで、レスポンシブ対応の背景画像表示が容易になり、ユーザーの操作に応じた動的なデザイン変更にも役立ちます。

  1. HTML DOM スタイルの counterIncrement プロパティの使い方を徹底解説

    HTML DOM の counterIncrement プロパティは、1つ以上の CSS カウンターの値を増加または減少させるために使用されます。通常は counterReset プロパティや content プロパティと組み合わせて使われます。 counterIncrement プロパティの構文 counterIncrement プロパティを設定する際の基本的な構文は以下の通りです。 object.style.counterIncrement = none|id|initial|inherit; プロパティ値の一覧 設定できる各プロパティ値の意味は次の通りです。 値説明 no

  2. HTML DOM valueプロパティとは？属性値の取得方法とサンプルコードを解説

    HTML DOMのvalueプロパティは、要素が持つ属性（attribute）の値に対応する文字列を返すプロパティです。JavaScriptからHTML要素の属性値を読み取りたい場合に活用できます。基本構文valueプロパティの基本的な書き方は以下の通りです。elementAttribute.value対象となる属性オブジェクトに対して.valueを指定することで、その属性が保持している値を文字列として取得できます。実装例ここでは、画像タグ（<img>）のsrc属性の値をボタンクリック時に取得して画面に表示するサンプルを紹介します。<!DOCTYPE html> <