CSS Reference_________ |
背景(画)に対するスタイル指定 |
背景色を指定する。指定は「カラーコード」で行う。
<body style="background-color: #eeeeee;
color: #000000">
<table style="background-color: #eeeeee; color: #000000"> 背景色の指定はボディ全体からテーブルの内部色まで、あらゆる場所で指定することができる。ちなみに初期状態の背景は一見白のように見えるが、透過状態になっており、これはスタイルシートでは「background-color: transparent」と指定する。また、「background-color」を指定した場合は、同時に前面色である「color」を指定しておくことが推奨される。 |
background-image: url('画像のパスとファイル名')
背景画像を指定する。書式は「url("画像のパスと画像ファイル名")」で指定する。
<td style="background-image: url('top/navbar.gif')"> 背景画像の指定もボディ全体からテーブルの内部色まで、あらゆる場所で指定することができる。通常、width(幅)とheight(高さ)を同時に指定する。また、「background-image」を指定した場合は、同時に「background-color」と「color」も指定しておくことが推奨される。 |
背景画像を固定する。初期状態はscroll、つまり画面をスクロールすると画像も一緒にスクロールする状態となっている。
<body style="background-attachment: fixed">
と指定した場合、画像が固定された状態となり、画面をスクロールするとあたかも文字だけが動いているように見える。 |
背景画像の位置を指定する。指定には「pt」、「em」、「in(inch)」等の算術指定、「%(パーセンテージ)」指定の他、「top」、「center」、「bottom」 と「left」、「center」、「right」を組み合わせて使うこともできる。
background-position: right top
と指定すると、画像は右端最上段に位置されることになる。 |
背景画像を繰り返す。つまりタイルのように敷き詰める。「background-repeat」は「background-image」とセットで使う。
<body style="background-image: url('top/navbar.gif'); background-repeat:repeat">
尚、「background-repeat」は「body」以外の場所を指定した場合、表示が大きく崩れる場合があるので注意が必要。また、反対に画像を繰り返させない場合は、「background-repeat:no-repeat」と指定する。 |
「background-color」、「background-image」、「background-repeat」、「background-attachment」、「background-position」をまとめて指定する。
<body style="background: url("top/navbar.gif") blue 20% repeat fixed">
背景画像に対して複数の指定をする場合に「background」を使って簡略化することができる。 |
CopyRight (C) 2000-2013 by T.Shiraishi All right reserved 無断転載禁止/リンクフリー |