Home/Menu

スタイルなCSSの基礎講座

文字色と背景

◆ はじめに

まず、文字色と背景関係のプロパティをお勉強いたしましょう。背景あっての文字色(前景)です。

従来、文字色はfont要素、背景関係はbody要素でやっていましたが、これからは、スタイルシートでやりましょう。時代は、スタイルシートです!

◆ colorとbackground-colorプロパティ

colorプロパティ

colorプロパティは、要素内の文字色(前景色)を設定するプロパティです。

適用要素初期値継承対応ブラウザ
全要素ブラウザ次第yesNN6.0,NN6.2,IE5.5,IE6.0,OP6.0

background-colorプロパティ

background-colorプロパティは、要素内の背景色を設定するプロパティです。
設定値は、色, transparent(背景を透明)。

適用要素初期値継承対応ブラウザ
全要素transparentnoNN6.0,NN6.2,IE5.5,IE6.0,OP6.0

サンプル

ちゃいちゃんは「一生懸命生きること」実践したよ!
また、ちゃいちゃんは「人の良いところ」をどんどん見つけたよ!

----------CSS2 ソース------------------------------------------------
p.sample {
    color: Navy;
    border: solid 1px #4444aa;
    padding: 1.2em;
    text-align: center;
}
.level1 {
    color: rgb(0,128,0);
    background-color: #aaffaa;
}
.level2 {
    color: #ff6600;
    background-color: #ffffff;
}
---------- HTML4.01 ソース -----------------------------------------
<p class="sample">
ちゃいちゃんは<em class="level1">「一生懸命生きること」</em>実践したよ!<br>
また、ちゃいちゃんは<em class="level2">「人の良いところ」</em>をどんどん見つけたよ! 
<p>

補足

各プロパティの値、Navy、rgb(0,128,0)、#ff6600等は、単位と色を参照してください。

◆ background-image系のプロパティ

background-imageプロパティ

background-imageプロパティは、要素内の背景画像を設定するプロパティです。
値には、url()関数にて、画像URIを指定します。

適用要素初期値継承対応ブラウザ
全要素nonenoNN6.0,NN6.2,IE5.5,IE6.0,OP6.0

background-repeatプロパティ

background-repeatプロパティは、要素内の背景画像の並び方を設定するプロパティです。
値には、repeat(全面),repeat-x(横方向),repeat-y(縦方向),no-repeat(一つのみ)があります。

適用要素初期値継承対応ブラウザ
全要素repeatnoNN6.0,NN6.2,IE5.5,IE6.0,OP6.0

background-positionプロパティ

background-positionプロパティは、要素内の背景画像の表示位置を設定するプロパティです。
xy座標の値を順にスペースで区切って指定します。値は、実数値+単位、%値、left,right,top,bottom,center等を指定できます。

適用要素初期値継承対応ブラウザ
block-level and replaced elements0% 0%noNN6.0,NN6.2,IE5.5,IE6.0,OP6.0

background-attachmentプロパティ

background-attachmentプロパティは、要素内の背景画像の固定配置を設定するプロパティです。
値には、fixed(位置を固定)、scroll(他の内容と共にスクロール)があります。

適用要素初期値継承対応ブラウザ
全要素scrollnoNN6.0,NN6.2,IE5.5,IE6.0,OP6.0

サンプル

h1要素

table要素
名前ニックネーム
沙友里ちゃいちゃん
康友やちゅ〜
成憲まちゃ


----------CSS2 ソース------------------------------------------------
div.sample {
    background-image: url("../img/chaichan_bana.gif");
    background-repeat: repeat-y; 
    background-position: right top; 
    color: Navy;
    border: solid 1px #4444aa;
    padding: 1.2em;
    text-align: center;
    margin: 10px 1% 10px 1%;
}
h1 {
    background-image: url("../img/V0.gif");
}
table {
    background-image: url("../img/V1.gif");
    text-align:left;
}
textarea {
    background-image: url("../img/V2.gif");
}
---------- HTML4.01 ソース -----------------------------------------
<div class="sample">
<h1>h1要素</h1>
<table border="1">
<caption>table要素</caption>
<tr><th>名前</th><th>ニックネーム</th></th>
<tr><td>沙友里</td><td>ちゃいちゃん</td></th>
<tr><td>康友</td><td>やちゅ〜</td></th>
<tr><td>成憲</td><td>まちゃ</td></th>
</table>
<br><br>
<textarea rows="4" cols="40">
textarea要素
</textarea>
</div>
注意

IE系では、テーブル要素の text-align は自分より親要素の方が優先されました。(バグかな)

OP6.0では、textarea要素の background-image は未対応のようです。

backgroundプロパティ

尚、backgroundプロパティで上記説明プロパティを一括に指定することができます。必要な値を任意の順にスペースで区切って指定します。

適用要素初期値継承対応ブラウザ
全要素not definednoNN6,IE5.5(NN6,IE5.5のみテスト)
body {
    background: white url("../img/V1.gif") center repeat-y
}

Home/Menu/スタイルシート概説リファレンス