背景と色彩プロパティー
- 色彩（Color）
- 背景色彩（Background Color）
- 背景画像（Background Image）
- 背景反復（Background Repeat）
- 背景飾り（Background Attachment）
- 背景位置（Background Position）
- 背景（Background）
HTMLでのカラー指定でカラーネームを使う場合は、ブラウザのバージョンなどで、使用できない色があります。またJAVA等で使用する場合も、JAVAのバージョンで使えない色があります。
同一のページで色を使う場合には、極力同じ系統の色を使うことにより、表示を軽くしたりできます。
Windowsでは、基本の16色から216色で配色するのが最も効果的と言われています。
ＲＧＢ hexとは、HTMLでの色の指定はＲＧＢ値でしていします。数値は16進数で00からＦＦまでです。00の次は01となり、09の次は0Ａです。0Ｆの次は1Fのようになります。
 |
Ｒ | Ｇ | Ｂ | |
| ＃ | 00〜FF | 00〜FF | 00〜FF | |
| 例 | #66CC00 | |||
RGB Dec Codeとは
RGB値を0から255の10進数で指定します。(256では無いので注意）
赤は255,0,0 です。
RGB% Codeとは
ＲＧＢ値をそれぞれ％で指定します
(100%,0%,0%)
HSL Code とは
色相（Hue）、彩度（Saturation）、明度（Lightness）
左の色相環を365度で色を指定します。0〜364
明度とは明るさの違いのことで、最も明るい色は白、最も暗い色は黒となっております。
通常明度を表す場合は明るい色のことを「明るい」「明度が高い」というような表現をします
色の明るさを0〜100％で表現数値が高いほど明るくなります
彩度とは彩度とは色の鮮やかさを表す属性です。彩度も明度と同じように「高い」「低い」でその度合いを表します。彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。
色の鮮やかさを0〜100％で指定し数値が高くなるほど色の鮮やかさが濃くなります
color色彩
colorとは、文字の色、または要素の前景色を指定するためのプロパティです。
RGB値やキーワードで任意の色を指定することができます。
| 書式 | color:<color> |
|---|---|
| 初期値 | ブラウザによって決められている |
| 適用要素 | 全ての要素 |
| 継承性 | 可能 |
colorプロパティーで、制作者が要素の色を特定できます。
色彩値の説明は単位セクションを見てください。
色彩規則の例です
<h4 style="color:#ff0000">赤いh4</h4>
↓
赤いh4
H2 { color: #000080 }
H3 { color: #0c0 }
初期の頃のスタイル・シートユーザーとの衝突を回避するために、
backgroundと colorプロパティーは必ず一緒に特定すべきです。
background-color背景色
background-colorとは、背景色を指定するためのプロパティです。
初期値はtransparent（透明色）であり、親ボックスの背景色が透けて表示されるようになります。
RGB値やキーワードで指定すると、ボックス要素におけるコンテンツ、パディング、ボーダーの範囲で、指定した背景色が表示されます。
| 書式 | background-color: <value:値> |
|---|---|
| 値 | <color> | transparent |
| 初期値 | transparent |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
background-colorプロパティーは要素の背景の色を設定します。
<span style="background-color: #FFFF ">蛍光効果</span>
H1 { background-color: #000080 }
ユーザーのスタイル・シートとの衝突を回避する手助けとして、background-imageは、
background-colorが使われる時はいつも、特定されるべきです。
多くの場合background-image: noneが適しています。
制作者はまた短縮型であるbackgroundプロパティーを使い、
これは background-colorプロパティよりも現在ではよくサポートされています。
background-image背景画像
background-imageとは、背景画像を指定するためのプロパティです。
初期値はnone（背景画像を表示させない値）ですが、表示させる場合には値に画像ファイルのURIを指定します。
描画領域にはボックス要素におけるコンテンツ、パディング、ボーダーが範囲に含まれます。
| 書式 | background-image: <value:値> |
|---|---|
| 値 | <url> | none |
| 初期値 | 無し |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
background-imageプロパティは要素の背景画像を設定します。
<p style=background-image: url(/images/foo.gif) >この段落の背景に画像を使ってみました。
文章の背景に使う画像には模様や色合い濃さに注意が必要です。
P { background-image: url(http://www.htmlhelp.com/bg.png) }
背景画像が定義される場合、同じbackground colorも、画像を読み込まないときのために、
定義されるべきです。
<p
style="background-image: url(../images/Wb6_25_4.gif)";
color:#f0f0ff>
制作者は短縮型であるbackgroundプロパティーも使い、このほうが現在では
background-imageよりよくサポートされています。
例
- css/ex/background-image.htmlタイル表示
- css/ex/background-image2.html左側一列に縦にタイルする
- css/ex/background-image3.html上側一列に縦にタイルする
- css/ex/background-image4.html画面の中央に１個だけ表示
- css/ex/background-image5.html左上に１個だけ表示スクロール
- css/ex/background-image6.html中央に１個表示し画面固定
background-repeat背景の反復
background-repeatとは、背景画像の並べ方を指定するためのプロパティです。
初期値はrepeatで、縦と横の両方向に繰り返してならべられます。
繰り返しの方向に横方向のみを指定する場合にはrepeat-x、縦方向のみを指定する場合はrepeat-y、繰り返させない（一つだけ表示）場合にはno-repeatを値に指定します。
| 書式 | background-repeat: <value:値> |
|---|---|
| 値 | repeat | repeat-x | repeat-y | no-repeat |
| 初期値 | repeat |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
background-repeatプロパティーは、特定されたbackground imageが
どの様に繰り返されるか決めます。
repeat-x値は画像を水平方向に繰り返し、
一方 repeat-y値は画像を垂直方向に繰り返します。
background-repeat: repeat-x }
上の例で、画像は水平方向にだけ引き詰められています。
制作者は短縮型であるbackgroundプロパティーも使うかもしれませんし、
これは background-repeatよりも現在ではよくサポートされています。
<p
style="background:
white url(../images/refkap.gif);
background-repeat:repeat-x ">
background-attachment背景飾り
background-attachmentとは、背景画像のウィンドウに対する位置を指定するためのプロパティです。
初期値はscrollであり、背景画像はウィンドウ上の他の内容とともにスクロールします。
値にfixedを指定した場合、背景画像の位置はウィンドウに対し固定され、スクロールすることはなくなります。
| 書式 | background-attachment: <value:値> |
|---|---|
| 値 | scroll | fixed |
| 初期値 | scroll |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
background-attachmentプロパティーは、特定されたbackground
imageが
内容とともにスクロールするか画面に関して固定されているかを決めます。
例えば、
以下のものは固定された背景画像を特定しています：
background: white url(candybar.gif);
background-attachment: fixed }
制作者は短縮型であるbackgroundプロパティーを使うかもしれませんし、このほうが現在では
background-attachmentよりよくサポートされています。
background-position背景位置
background-positionとは、背景画像の表示位置を指定するためのプロパティです。
横方向と縦方向それぞれについての値を順にスペースで区切って指定します。
初期値は0% 0%で、パディング領域の左上隅を起点に描画されます。
値が一つだけだった場合には横方向への指定として解釈され、縦方向の値には50%が用いられます。
値には実数値と単位の組み合わせのほかにleftやtopなどのキーワードを用いることもできますが、両者を組み合わせて指定することはできません。
| 書式 | background-position: <value:値> |
|---|---|
| 値 | [<percentage> |<length>] {1,2} | [top | center | bottom] || [left | center | right] |
| 初期値 | 0% 0% |
| 適用要素 | ブロック−レベルとそれに代る要素 |
| 継承性 | 不可 |
background-positionプロパティーは、特定されたbackground imageの初期の位置を与えます。
プロパティーはブロック−レベル要素とそれに代る要素にだけ適用されます（おき代えられる要素は内部次元のみが知っているものの一つです：HTMLでおき代えられる要素にはIMG・INPUT・TEXTAREA・ SELECTそしてOBJECTがあります）。
背景位置を割り当てる一番やさしい方法は、キーワードです
- 水平キーワード（ left・ center・ right）
- 垂直キーワード（ top・ center・ bottom）
Percentagesとlengthsも、背景画像の位置を割り当てるのに使われます。
パーセンテージは要素のサイズに対して相対的なものです。
長さも許されますが、これらは異なる画面解像度の取り扱いの際継承性が弱いので推奨できません。
パーセンテージや長さを使う場合水平方向の位置が真っ先に特定され、続いて垂直方向の位置がとくていされます。
20% 65%といった値は、画像の20%以上65%以下の点が要素の20%以上65%以下の点に置かれることを特定します。
5px10pxといった値は、画像の左上角が要素の右から5ピクセルそして上左から10ピクセル下に配置されることを特定します。
水平方向の値のみがあたえられた場合垂直位置は50%になります。
長さとパーセンテーギの組み合わせはマイナス位置であるようにできます。
例えば、10%-2cmは許されます。
しかし、パーセンテージと長さはキーワードと組み合わすことはできません。
キーワードはいかの様に解釈されます：
- top left = left top = 0% 0%
- top = top center = center top = 50% 0%
- right top = top right = 100% 0%
- left = left center = center left = 0% 50%
- center = center center = 50% 50%
- right = right center = center right = 100% 50%
- bottom left = left bottom = 0% 100%
- bottom = bottom center = center bottom = 50% 100%
- bottom right = right bottom = 100% 100%
背景画像はキャンバス画面に対して固定(fixed)されている場合画像は要素にでなくキャンバス画面に相対的に配置されます。
制作者は短縮型であるbackgroundプロパティーも使え、これは現在ではbackground-positionプロパティーよりよくサポートされています。
background背景
backgroundとは、背景に関する設定を一括して指定するためのプロパティです。
具体的には、background-attachment、background-color、background-image、
background-position、background-repeatで指定する値を任意の順序でスペースで区切って指定します。
| 書式 | background: <value:値> |
|---|---|
| 値 | <background-color> ||<background-image>
| |<background-repeat> <background-attachment> ||<background-position> |
| 初期値 | 未定義 |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
backgroundプロパティーは、より特殊な背景関連プロパティ−の短縮型です。
background宣言の例を以下にあげます：
background: white url(http://www.htmlhelp.com/foo.gif)
}
BLOCKQUOTE {
background: #7fffd4
}
P {
background: url(../backgrounds/pawn.png) #f0f8ff fixed
}
TABLE {
background: #0c0 url(leaves.jpg) no-repeat bottom right
}
特定化されていない値は、その初期値を受け取ります。
例えば上のはじめから三つの規則では、background-positionプロパティーは 0% 0%に設定されます。
ユーザーのスタイル・シートとの衝突を避ける手助けとして、backgroundとcolorは必ず一緒に特定されるべきです。
目的別属性
広告
