スタイルシートの道具箱
当サイトについて リンク集
基礎編1
基礎編2
色リファレンス
小技集		 テキスト
フォント
背景		 配置
ボーダー
ボックス		 リスト
テーブル
フィルタ
その他
　初心者による初心者の為のスタイルシート・リファレンス！ 基礎から応用までの解説とサンプルを是非あなたのホームページ作りに生かして下さい！
■背景 トップページ
背景：目次

■背景色

▲ページTOPへ

background-color:

要素の背景色を指定します。
スタイルシートの利便性は何と言ってもタグの種類を考えず指定出来る事です。
特に色といった一般的な設定は、テキストだろうがテーブルや段落、ページ全体など
スタイルシートなら同じ設定を使えるからです。

設定値はRGB値、キーワード、又はtransparentです。詳細は色リファレンスをご覧下さい。

サンプル


これはdivで背景色を指定した場合
<div style="background-color:#cc99ff">これはdivで背景色を指定した場合</div>


spanを使えば文章の中の一部分をマーカーのようにする事も出来ます。
spanを使えば<span style="background-color:#ffff99;">文章の中の一部分</span>をマーカーのようにする事も出来ます。


borderと併用すればこういったパターンや、 またこんなパターンも作れますね。
borderと併用すれば
<span style="background-color:#ccffff;border:1px dashed blue">こういったパターン</span>や、
<span style="background-color:#ffccff;border-bottom:3px double red;">こんなパターン</span>
も作れますね。


このように テーブルであっても
セル毎に 色設定が出来ます
<table border=1><tr>
<td style="background-color:#ff6600">このように</td>
<td style="background-color:yellow">テーブルでも</td></tr><tr>
<td style="background-color:#CCCC00;">セル毎に</td>
<td style="background-color:#66FF66;">色設定出来ます</td></tr>
</table>

a:hoverと組み合わせてもよい感じです。⇒ここをクリック！
※ヘッダ情報の中で以下のように記述
<style type="text/css">
a:hover{
background-color:yellow;
</style>

■背景に画像

▲ページTOPへ

background-image: url(●)

要素の背景に画像を貼りたい時に使います。
単に模様などの背景をつける時だけでなく写真等を効果的に利用すれば
印象的でクールな演出が出来ます。使い方はアイデア次第。

●には画像のURLを入れてファイルを画像ファイルを指定します。
HTMLファイルと同じ階層に位置するのならファイル名だけでOKです。

サンプル



こうやってdivやpのタグに対して自由に背景画像を設定する事が出来ます。


<div style="background-image:url(bg4.jpg);width:300px;" align="center"><br>
<p style="background-image:url(bg1.jpg);width:180px;margin-left:10px;padding:5px;border:1px blue solid;">
こうやってdivやpのタグに対して自由に背景画像を設定する事が出来ます。
</p><br></div>


テーブルのセルにも利用出来ます
・大項目１
・大項目２
・大項目３		 ・小項目１
・小項目２
・小項目３
<table cellspacing="0" border="1">
<tr><td colspan="2" style="background-image:url(bg2.gif);padding:5px;">
テーブルのセルにも利用出来ます</td></tr>
<tr><td width="50%" style="background-image:url(bg3.gif)">
・大項目１<br>
・大項目２<br>
・大項目３</td>
<td style="background-image:url(bg6.gif)">
・小項目１<br>
・小項目２<br>
・小項目３</td>
</tr></table>


写真を背景に設定
<table><tr><td style="
width:305;
height:66;
background-image:url(bg5.jpg);
border:1px black solid;
text-align:center;
vertical-align:middle;
color:red;
font-weight:bold;
font-size:15px;">写真を背景に設定</td>
</tr></table>
※文字を重ねる場合はdivやp,spanよりもtableを利用した方が操作しやすい

■背景画像の繰り返し方法

▲ページTOPへ

background-repeat: (キーワード）

background-imageで背景画像を設定した場合の、画像の繰り返し方法を指定します。
通常は要素内いっぱいに敷き詰められますが、それ以外の配列方法を指定出来ます。

以下のキーワードで指定します。
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
 縦横いっぱいに繰り返し（初期状態）
横方向のみに繰り返し
縦方向のみに繰り返し
繰り返し無し

サンプル


オリジナル画像⇒
■repeatの場合（初期状態）
<div style="
background-image:url(bg7.gif);
background-repeat:repeat;
border:1px solid black"></div>
■repeat-xの場合
<div style="
background-image:url(bg7.gif);
background-repeat:repeat-x;
border:1px solid black"></div>
■repeat-yの場合
<div style="
background-image:url(bg7.gif);
background-repeat:repeat-y;
border:1px solid black"></div>
■no-repeatの場合
<div style="
background-image:url(bg7.gif);
background-repeat:no-repeat;
border:1px solid black"></div>

■背景画像の固定

▲ページTOPへ

background-attachment:

背景に画像を設定した場合、通常は画像もスクロールに合わせて移動しますが、
この設定により背景画像はスクロールに関係無く固定されます。

つまり画面をスクロールするとテキスト部分のみが移動し、ちょっとした立体感を作れます。
スクロール可能な要素でないと意味が無いので、bodyタグに用いられるのがポピュラーです。

設定値は以下の通りです。
  • fixed
  • scroll
 背景を固定する
スクロールに合わせて移動（初期状態）

サンプル


■scroll（初期状態）の場合 bodyタグへ以下のように設定をする。（もしくは何も設定しない）
<body style="
background-image:url(bg8.gif);
background-attachment:scroll;">
■fixedの場合 bodyタグへ以下のように設定をする。
<body style="
background-image:url(bg8.gif);
background-attachment:fixed;">

■背景画像の位置

▲ページTOPへ

background-position:●　●

background-position-x:●

background-position-y:●

背景画像の位置を設定します。
指定方法は、要素の左上を基点として、水平方向、垂直方向の位置を指定します。

background-positionの場合は水平方向、垂直方向の順に指定、
設定値が一つの場合は垂直方向の指定が50%（真ん中）となります。
background-position-xなら水平方向、background-position-yは垂直方向のみ指定します。

設定値は以下の通り。
  • 数値＋単位
  • 数値＋％
  • キーワード
 サイズを示す数値で指定します。
親要素に対する％で指定します
次のキーワードで、上下左右・中央の指定をします
top(上端)、center（中央）、bottom（下端）、left（左）、right（右）

サンプル

※わかりやすくするため「background-repeat:no-repeat」により画像を一枚だけ表示しています。この設定が無い場合は、指定した位置を基準に画像が敷き詰められます。

<div style="
background-position:top center;
background-image:url(bg7.gif);
background-repeat:no-repeat;></div>
<div style="
background-position:right bottom;
background-image:url(bg7.gif);
background-repeat:no-repeat;></div>
<div style="
background-position:20% 80%;
background-image:url(bg7.gif);
background-repeat:no-repeat;></div>
<div style="
background-position:100px 30px;
background-image:url(bg7.gif);
background-repeat:no-repeat;></div>
<div style="
background-position:0px;
background-image:url(bg7.gif);
background-repeat:no-repeat;></div>
※指定値が一つの場合、縦方向は真ん中になります
<div style="
background-position-x:right;
background-image:url(bg7.gif);
background-repeat:no-repeat;></div>
※x,y個別にした場合、未指定の軸は初期値0となります

■背景の一括設定

▲ページTOPへ

background:

上記で紹介してきた背景の設定を全て一括で指定します。つまり
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
 背景色
背景画像
画像の繰り返し方法
画像の固定
画像の位置
の設定値を羅列して設定出来ます。

順不同、省略も可能です。
つまりbackground関係の他のプロパティは使わず、このプロパティで必要な設定だけ入れたほうが
ソースの量を減らせるし、入力もかなり楽です。
要は背景設定に関してはこのプロパティだけで十分って事ですな^^;

サンプル


<div style=" background:#ccff99 url(bg7.gif) repeat-x fixed center;"></div>
▲ページTOPへ