CSS properties reference.

文字色と背景関連の属性値

color, background に関する属性値

目次

文字色の属性値

color:

背景関連の属性値

background-color: background-image: background-repeat: background-attachment: background-position: background:

属性値

[背景目次][属性値目次]

color:

文字色を設定します。

• 値：<color> (| inherit)
• 初期値：ブラウザ固有
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎

N4.xは、システムカラーを指定すると謎の色で表示されます。

[背景目次][属性値目次]

background-color:

背景色を設定します。

• 値：<color> | transparent (| inherit)
• 初期値：transparent
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎

N4.xでは、borderを指定していないブロックレベル要素に指定しても文字のある範囲しか背景色が反映されません。また、transparentを指定すると背景が黒になります。

[背景目次][属性値目次]

background-image:

背景の画像を設定します。

• 値：<url> | none (| inherit)
• 初期値：none
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ◎；N4.x ○；N6.x ○；M1.0 ○；O6.0 ○

画像が表示されないことも考えて、同時に背景色も指定しておくことが推奨されています。

N4.x：インライン要素に指定するとブロック要素扱いになります。
I5.5；N6.x；M1.0；O6.0：インライン要素に指定しても反映されません。

[背景目次][属性値目次]

background-repeat:

背景画像の繰り返しを設定します。

• 値：repeat | repeat-x | repeat-y | no-repeat (| inherit)
• 初期値：repeat
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ◎；N6.x ◎；M1.0 ◎；O6.0 ◎

[背景目次][属性値目次]

background-attachment:

背景画像の固定を設定します。

• 値：scroll | fixed (| inherit)
• 初期値：scroll
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

[背景目次][属性値目次]

background-position:

背景画像の位置を設定します。

• 値：[<percentage> | <length>]{1,2} | [[top | center | bottom] || [left | center | right]] (| inherit)
• 初期値：0% 0%
• 適用：ブロック要素とimg要素
• 継続性：無し
• パーセント値：要素のサイズを基準に取る
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

[背景目次][属性値目次]

background:

背景に関する設定をまとめて記載します。

• 値：<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> (| inherit)
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：無し
• パーセント値：<background-position>
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ○

N4.x：背景色を指定しないときは背景色が黒色になります。
N4.xに関するその他の注意点は、各背景に関する設定値のコメントをお読みください。
O6.0：インライン要素に指定した場合、画像のみ反映されません。

フォント関連の属性値

fontに関する属性値

目次

フォント関連の属性値

font-family: font-style: font-variant: font-weight: font-stretch: font-size: font-size-adjust: font:

属性値

[フォント目次][属性値目次]

font-family:

使用するフォントの種類を設定します。

• 値：[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] (| inherit)
• 初期値：ブラウザ固有
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ○；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎

wwwブラウザが日本語を持たないフォントを選択する可能性が有るので、日本語環境では使用しない方が良い。

N6.x；M1.0；O6.0はファミリーネームに使用するフォントをユーザーが指定できるので完全対応としました。

参考：family-nameの取る値

• 'serif' (例： MS P明朝)
• 'sans-serif' (例： MS Pゴシック)
• 'cursive' (例： Zapf-Chancery)
• 'fantasy' (例： Western)
• 'monospace' (例： MS ゴシック)

[フォント目次][属性値目次]

font-style:

使用するフォントの形状(通常又は斜字体)を設定します。

• 値：normal | italic | oblique (| inherit)
• 初期値：normal
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ？

N4.x：obliqueに非対応。

[フォント目次][属性値目次]

font-variant:

スモールキャップフォント(少し小さい大文字)を設定します。

• 値：normal | small-caps (| inherit)
• 初期値：normal
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

I5.5：通常の大文字で表示されます。(本来は少し小さい大文字で表示されます。)

[フォント目次][属性値目次]

font-weight:

使用するフォントの太さを設定します。

• 値：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 (| inherit)
• 初期値：normal
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ◎；N6.x ◎；M1.0 ◎；O6.0 ◎

normal = 通常の太さ; bold = 太字; bolder = より太い字; lighter = より細い字

[フォント目次][属性値目次]

font-stretch:

使用するフォントの太さをフォントファミリーの中から選びます。

• 値：normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
• 初期値：normal
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:2
• 対応：I5.5 ×；I6.0 ×；N4.x ×；N6.x ×；M1.0 ×；O6.0 ？

[フォント目次][属性値目次]

font-size:

フォントの大きさを設定します。

• 値：<absolute-size> | <relative-size> | <length> | <percentage> (| inherit)
• 初期値：medium
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：親要素のフォントサイズを基準に取る
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ◎；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎

<absolute-size>：

絶対的な大きさの指定方法で、 xx-small | x-small | small | medium | large | x-large | xx-large の値を取ることができます。
xx-smallが<font size="1">に相当し、xx-largeが<font size="7">に相当します。

<relative-size>：

相対的な大きさの指定方法で、 larger | smaller の値を取ることができます。
largerが<font size="+1">に相当し、smallerが<font size="-1">に相当します。(指定方法によっては正常に反映しない場合もあります)

I5.5,N4.xでは規定値がsmallになっています。

[フォント目次][属性値目次]

font-size-adjust:

フォントによる文字の大きさの違いを補正します。

• 値：<number> | none | inherit
• 初期値：none
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:2
• 対応：I5.5 ×；I6.0 ×；N4.x ×；N6.x ×；M1.0 ×；O6.0 ？

[フォント目次][属性値目次]

font:

フォントに関する設定をまとめて記載します。

• 値： [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> (| caption | icon | menu | message-box | small-caption | status-bar | inherit)
• 初期値：無し(省略型表記のため)
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：<font-size>と<line-height>
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ？

N4.xはCSS2で規定された値に対応していません。

文字列関連の属性値

textに関する属性値

目次

文字列関連の属性値

text-indent: text-align: text-decoration: text-shadow: word-spacing: letter-spacing: text-transform: white-space:

属性値

[テキスト目次][属性値目次]

text-indent:

字下げ量を設定します。

• 値：<length> | <percentage> (| inherit)
• 初期値：0
• 適用：ブロック要素
• 継続性：有り
• パーセント値：親要素の横幅を基準に取る
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ◎；N6.x ◎；M1.0 ◎；O6.0 ○

Opera6.01では字下げ量が異常に多くなります。

[テキスト目次][属性値目次]

text-align:

横方向の位置を設定します。

• 値：left | right | center | justify (| <string> | inherit)
• 初期値：ブラウザ固有
• 適用：ブロック要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ？；N4.x ○；N6.x ○；M1.0 ○；O6.0 ○

left；center；right に関してはすべて対応。
N4.x以外はjustifyにも対応(N6.xには日本語の右端が揃わないバグ有り)

[テキスト目次][属性値目次]

text-decoration:

文字装飾を設定します。

• 値：none | [ underline || overline || line-through || blink ] (| inherit)
• 初期値：none
• 適用：すべてのタグ要素
• 継続性：無し(補足事項あり)
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ○；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎

underline = 下線; overline = 上線; line-through = 取消線; blink = 点滅(Internet Explorer 以外は点滅します)

note:blinkはNetscapeの独自拡張でなく、きちんとW3Cの発行しているCSSの仕様書に記載されています。(blinkタグはNetscapeの独自拡張です。)

I5.5,I6.0はblinkに対応していません。N4.xはoverlineに対応していません。

[テキスト目次][属性値目次]

text-transform:

ASCII文字の大文字小文字の設定を行います。

• 値：capitalize | uppercase | lowercase | none (| inherit)
• 初期値：none
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ？

[テキスト目次][属性値目次]

text-shadow:

文字に陰を付けます。

• 値：none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
• 初期値：none
• 適用：すべての要素
• 継続性：無し
• パーセント値：無し
• 適用メディア：visual
• CSS Level:2
• 対応：I5.5 ×；I6.0 ？；N4.x ×；N6.x ×；M1.0 ×；O6.0 ×

ほとんどのWWWブラウザが対応していません。(2002.07.27現在)

[テキスト目次][属性値目次]

word-spacing:

単語の間隔を設定します。

• 値：normal | <length> (| inherit)
• 初期値：normal
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ？；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

[テキスト目次][属性値目次]

letter-spacing:

文字の間隔を設定します。

• 値：normal | <length> (| inherit)
• 初期値：normal
• 適用：すべてのタグ要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：visual
• CSS Level:1,2
• 対応：I5.5 ◎；I6.0 ？；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ◎

[テキスト目次][属性値目次]

white-space:

空白を設定します。

• 値：normal | pre | nowrap (| inherit)
• 初期値：normal
• 適用：ブロック要素
• 継続性：有り
• パーセント値：無し
• 適用メディア：全て
• CSS Level:1,2
• 対応：I5.5 ○；I6.0 ○；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ？

I5.5：nowrapにしか対応していません。
I6.0：normalとpreは標準互換モードの時のみ対応。
N4.x：normalとpreにしか対応していません。