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

CSSのbackgroundプロパティの使い方：背景画像・位置・繰り返しを一括指定する方法

CSSの background プロパティは、背景画像・表示位置・繰り返し方法など、背景に関する複数の設定をまとめて指定できるショートハンド（一括指定）プロパティです。個別のプロパティを何行にも分けて書く必要がなく、コードをすっきりさせられる便利な書き方です。

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

backgroundプロパティでは、以下のような個別プロパティの値をスペースで区切って1行で記述できます。

  • background-image：背景画像のURL（url() 関数で指定）
  • background-position：背景画像の表示位置（center、top left など）
  • background-repeat：画像の繰り返し方法（repeat、no-repeat など）
  • background-attachment：スクロール時の挙動（fixed、scroll など）
  • background-color：背景色

使用例

次のサンプルでは、背景画像「pattern1.gif」に対して「繰り返しあり（repeat）」と「スクロールしても背景を固定（fixed）」という設定を一括で指定しています。

<html>
   <head>
   </head>
   <body>
      <p style = "background:url(/images/pattern1.gif) repeat fixed;">
         この段落には、繰り返し表示される固定の背景画像が設定されています。
      </p>
   </body>
</html>

このコードのポイントは次のとおりです。
まず url() で使用する背景画像を指定します。続く repeat により画像がタイル状に繰り返し表示され、最後の fixed によってページをスクロールしても背景画像が動かないよう固定されます。各値はスペースで区切って並べるだけでよく、記述順序は比較的自由です。

注意点

backgroundショートハンドを使う場合、省略した項目には自動的に初期値が適用されるため、意図せず以前の設定が上書きされることがあります。一部の値だけ調整したい場合は、background-image や background-position などの個別プロパティを使った方が意図が明確になります。用途に応じて両者を使い分けるとよいでしょう。

  1. CSSのborder-top-widthプロパティの使い方を解説

    CSSのborder-top-widthプロパティは、要素の上側の境界線（ボーダー）の太さを指定するためのプロパティです。境界線の見た目を細かくコントロールしたい場合に活用できます。border-top-widthプロパティの基本このプロパティで指定できる主な値は以下のとおりです。thin / medium / thick … キーワードによる指定（細い・標準・太い）px や em などの長さ単位 … 数値で正確に太さを指定注意点：border-styleとの併用が必要border-top-widthだけを設定しても、境界線のスタイルが未指定の場合は線が表示されません。border-style

  2. CSSのborder-right-widthプロパティの使い方とサンプルコード

    CSSのborder-right-widthプロパティは、要素の右側の境界線（ボーダー）の太さを個別に指定するためのプロパティです。上下左右すべてではなく右側のみ太さを変更できるため、アクセントをつけたいデザインやレイアウトの調整に便利です。 border-right-widthプロパティの基本 このプロパティを使用する際は、必ずborder-styleプロパティで境界線のスタイル（solid、dashed など）を一緒に設定してください。border-styleの初期値は「none」であるため、スタイルを指定しないままでは幅を設定しても境界線は表示されません。 指定できる主な値 thin