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

CSSで要素の背景をスタイリングする方法｜backgroundプロパティの使い方を解説

CSSでは、backgroundプロパティを使用することで、要素の背景に関するさまざまなスタイルをまとめて指定できます。単一の宣言で複数の背景関連の値を設定できるため、コードを簡潔に保ちながら柔軟なデザインを実現できます。

backgroundプロパティで指定できる値

backgroundプロパティには、以下の8つのサブプロパティに対応する値を指定できます。

  • background-color … 背景色の指定
  • background-image … 背景画像の指定
  • background-repeat … 背景画像の繰り返し方法の指定
  • background-position … 背景画像の表示位置の指定
  • background-clip … 背景の描画範囲の指定
  • background-size … 背景画像のサイズの指定
  • background-origin … 背景画像の基準位置の指定
  • background-attachment … スクロール時の背景の挙動（固定など）の指定

構文（シンタックス）

CSSのbackgroundプロパティの基本構文は以下のとおりです。

セレクタ {
    background: /* 値 */;
}

記述例1：背景色と背景画像の組み合わせ

次の例では、body要素に対してグレーの背景色と背景画像を同時に指定し、画像の繰り返しを無効化しています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: gray url("https://www.tutorialspoint.com/pytorch/images/pytorch.jpg") no-repeat;
    font-size: 1.2em;
    color: black;
}
h2 {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px black;
}
p {
    box-shadow: 0 0 5px 5px black;
}
</style>
</head>
<body>
<h2><i>PYTORCH Tutorial</i></h2>
<p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。</p>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
</ul>
</body>
</html>

出力結果

上記のコードは、次のような表示結果になります。

CSSで要素の背景をスタイリングする方法｜backgroundプロパティの使い方を解説

このように、backgroundプロパティ1行だけで「背景色＋背景画像＋繰り返しの無効化」を同時に指定できていることがわかります。

記述例2：background-colorのみを指定する場合

背景色だけを個別に指定したい場合は、background-colorプロパティを使用します。次の例では、見出しにビスケット色、div要素にオレンジ色の背景を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    background-color: bisque;
}
div {
    margin: auto;
    background-color: orange;
    width: 40%;
}
</style>
</head>
<body>
<h2>デモテキスト</h2>
<div>デモ デモ デモ デモ</div>
</body>
</html>

出力結果

上記のコードは、次のような表示結果になります。

CSSで要素の背景をスタイリングする方法｜backgroundプロパティの使い方を解説

まとめ

backgroundプロパティを使えば、背景色・背景画像・繰り返し・位置などを1つの宣言でまとめて制御できます。個別に細かく設定したい場合はbackground-colorなどのサブプロパティを、簡潔に一括指定したい場合は省略形のbackgroundプロパティを使い分けると、保守性の高いCSSを書くことができます。

  1. CSSで要素の背景をスタイリングする方法｜background-positionとbackground-repeatの基本

    Webページ上の要素の背景をスタイリングするには、背景画像（background-image）や背景の表示位置（background-position）を設定します。さらに、background-repeatプロパティを組み合わせれば、画像を水平方向・垂直方向に繰り返し表示させることも可能です。 background-position（背景位置）とは background-positionは、背景画像の表示開始位置を指定するためのプロパティです。「left（左）」「center（中央）」「right（右）」「top（上）」「bottom（下）」などのキーワードのほか、pxや%といった具体的な数

  2. CSSのz-indexプロパティを使って要素を重ねて表示する方法

    CSSのz-indexプロパティとは CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。 注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効