CSS1プロパティー

• プロパティー定義に使われる構文（Syntax Used in Property Definitions）
• 文字プロパティー（Font Properties）
• 色彩と背景プロパティー（Color and Background Properties）
• テキスト・プロパティー（Text Properties）
• ボックス・プロパティー（Box Properties）
• 型分類プロパティー（Classification Properties）
• 単位（Units）

プロパティー定義に使われる構文

<Foo>

type Fooの値。普通のタイプについては Unitsページで言及しています。

Foo

文字通りに書かなければキーワード（大文字小文字の区別はありませんが）。 コンマやスラッシュも文字通りに書かねければなりません。

A B C

Aが来て、それからB、それからCと、この順番で。

A | B

A乃至はBが来なければなりません。

A || B

A乃至はBまたは両方で、この順番で、来なければなりません。

[ Foo ]

括弧は項目を一括グループ化するのに使われます。

Foo*

Fooがゼロ回以上繰り返されます。

Foo+

Fooが一回以上繰り返されます。

Foo?

Fooは選択できます。

Foo{A,B}

Fooは少なくともA回、多くてB回

文字プロパティー

• 文字系（Font Family）
• 文字スタイル（Font Style）
• 文字異体（Font Variant）
• 文字重み（Font Weight）

• 文字サイズ（Font Size）

• 文字（Font）

文字種類（系）（Font Family）

文字ファミリーは、特別な文字名や汎用文字ファミリーで定められます。明らかに、特別な文字の定義が汎用文字ファミリーと一致しそうにない。多元ファミリー指定も可能で、特別な文字指定がなされる場合最初の文字選択がないケースでの汎用ファミリー名を続けておくべきです。

font-family宣言はこの様になります：

P { font-family: "New Century Schoolbook", Times, serif }

最初の二つの指定は特別な字体（type face）であることに注意してください： New Century Schoolbookと Times。しかしこの両者は serif（セリフ）文字ですので、システムがこれらのどちらかを持っていなくて、要件に合った別の serif文字を持っている場合バックアップとして汎用文字ファミリーがリストされています。

空白がある文字名は、一重乃至二重引用符号で囲っておかなければなりません。

文字ファミリーは、 fontプロパティと一緒に与えられかもしれません。

文字スタイル（Font Style）

font-styleプロパティーは、文字が三通のどれか一つで表示されるのを定義します： normal・ italicか oblique（斜傾した）。 font-style宣言をしたスタイル・シートの例は、以下のようになります：

H1 { font-style: oblique }
P  { font-style: normal }

文字異体（Font Variant）

font-variantプロパティーは、文字が normal か small-capsで表示すべきと定義します。小さめの頭文字は、言葉の全ての文字が小文字よりやや大文字の頭文字です。CSSの新しいバージョンは、 condensed・expanded・small-caps numeralsやその他のカスタム異体などの追加されたものをサポートするかもしれません。 文字異体指定の例は以下のようになります：

SPAN { font-variant: small-caps }

文字重み（Font Weight）

font-weightプロパティーは、文字の重さを特定するのに使われます。 bolderと lighter値は、継承された文字に相対的で、一方その他の値は絶対的な文字重さです。

font-weight指定の例です：

H1 { font-weight: 800 }
P  { font-weight: normal }

文字サイズ（Font Size）

font-sizeプロパティーは、表示される文字のサイズを修正するのに使われます。絶対的な長さ（ ptやinといった単位を使った）は、異なるブラウザ環境での適用が悪いので、慎重にで控えめに使用すべきです。絶対的な長さの文字は、ユーザーにとって大きすぎたり小さすぎたり容易に変動することがあります。

サイス指定の例は以下のようになります：

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

H1 { font-size: 200% }

文字（Font）

fontプロパティーは、 line heightと同じ様に、 色々な文字プロパティー用の略記法です。例えば、

P { font: italic bold 12pt/14pt Times, serif }

これは、太字体でイタリックのタイムス文字乃至はサイズが12ポイントで高さが14ポイントのセリフ系文字でパラグラフを特定します。

色彩と背景プロパティー

• 色　　彩（Color）

• 背景色彩（Background Color）
• 背景画像（Background Image）
• 背景反復（Background Repeat）
• 背景飾り（Background Attachment）

• 背景位置（Background Position）

• 背　　景（Background）

色　　彩（Color）

colorプロパティーで、制作者が要素の色を特定できます。色彩値の説明は 単位セクションを見てください。色彩規則の例です：

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

初期の頃のスタイル・シートユーザーとの衝突を回避するために、 backgroundと colorプロパティーは必ず一緒に特定すべきです。

背景色（Background Color）

background-colorプロパティーは要素の背景の色を設定します。例えば：

BODY { background-color: white }
H1   { background-color: #000080 }

ユーザーのスタイル・シートとの衝突を回避する手助けとして、 background-imageは、 background-colorが使われる時はいつも、特定されるべきです。多くの場合 background-image: noneが適しています。

制作者はまた短縮型であるbackgroundプロパティーを使い、これは background-colorプロパティよりも現在ではよくサポートされています。

背景画像（Background Image）

background-imageプロパティは要素の背景画像を設定します。例え：

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

背景画像が定義される場合、同じ background colorも、画像を読み込まないときのために、定義されるべきです。

制作者は短縮型である backgroundプロパティーも使い、このほうが現在では background-imageよりよくサポートされています。

背景の反復（Background Repeat）

background-repeatプロパティーは、特定された background imageがどの様に繰り返されるか決めます。 repeat-x値は画像を水平方向に繰り返し、一方 repeat-y値は画像を垂直方向に繰り返します。例えば：

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

上の例で、画像は水平方向にだけ引き詰められています。

制作者は短縮型である backgroundプロパティーも使うかもしれませんし、これは background-repeatよりも現在ではよくサポートされています。

背景飾り（Background Attachment）

background-attachmentプロパティーは、特定された background imageが内容とともにスクロールするか画面に関して固定されているかを決めます。例えば、以下のものは固定された背景画像を特定しています：

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

制作者は短縮型である backgroundプロパティーを使うかもしれませんし、このほうが現在では background-attachmentよりよくサポートされています。

背景位置（Background Position）

background-positionプロパティーは、特定された background imageの初期の位置を与えます。プロパティーは ブロック−レベル要素とそれに代る要素にだけ適用されます（ おき代えられる要素は内部次元のみが知っているものの一つです：HTMLでおき代えられる要素には IMG・ INPUT・ TEXTAREA・ SELECTそして OBJECTがあります）。

背景位置を割り当てる一番やさしい方法は、キーワードです：

• 水平キーワード（ left・ center・ right）
• 垂直キーワード（ top・ center・ bottom）

Percentagesとlengthsも、背景画像の位置を割り当てるのに使われます。パーセンテージは要素のサイズに対して相対的なものです。長さも許されますが、これらは異なる画面解像度の取り扱いの際継承性が弱いので推奨できません。

パーセンテージや長さを使う場合水平方向の位置が真っ先に特定され、続いて垂直方向の位置がとくていされます。 20% 65%といった値は、画像の20%以上65%以下の点が要素の20%以上65%以下の点に置かれることを特定します。 5px 10pxといった値は、画像の左上角が要素の右から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宣言の例を以下にあげます：

BODY       { 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は必ず一緒に特定されるべきです。

テキスト・プロパティー

• 言葉（単語）間隔（Word Spacing）
• 文字間隔（Letter Spacing）
• テキスト修飾（Text Decoration）
• 垂直配置（Vertical Alignment）
• テキスト変換（Text Transformation）
• テキスト配置（Text Alignment）
• テキスト字下げ（Text Indentation）
• 行の高さ（Line Height）

言葉（単語）間隔（Word Spacing）

word-spacingプロパティーは言葉（単語）間の追加空間を定義します。この値は length形式にすべきです；マイナス値は許されます。

例：

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

文字間隔（Letter Spacing）

letter-spacingプロパティーは、文字間隔を定義します。値は length形式です；マイナス値も許されます。 0の設定は均等割(justification)を防ぎます。

例：

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

テキスト修飾（Text Decoration）

text-decorationプロパティーで、テキストを五つのプロパティーの中の一つで飾ることができます： underline・ overline・ line-through・ blink乃至は初期値none。

例としてリンクに下線を引いたものです

A:link, A:visited, A:active { text-decoration: none }

垂直配置（Vertical Alignment）

vertical-alignプロパティーはインライン要素の垂直方向配置を、親要素乃至は要素の行に相対的に、変えるのに使われます。（ インライン要素はその前後に強制改行がないもので、例えばHTMLの EM・ AそしてIMGです。）

値は、要素の line-heightプロパティーに相対的なpercentageで、親基準線の上に特定されたものに要素の基準線を持ち上げます。マイナス値も許されます。

値はキーワードのこともありえます。以下のキーワードは親要素に相対的な位置に影響を及ぼします：

• baseline（要素と親の基準線の配置）
• middle（基準線プラスx-heightの半分−−親のletter "x"の高さ）
• sub（下付添え字）
• super（上付添え字）
• text-top（要素と親文字の先端配置）
• text-bottom（要素と親文字の底辺配置）

要素の行に相対的な位置に影響を及ぼすキーワードは以下のものがあります。

• top（行中最も高い要素をもった要素の先端配置）
• bottom（行中最も低い要素をもった要素の底辺配置）

vertical-alignプロパティーは画像配置用に特に有用です。以下のような例です：

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

テキスト変換（Text Transformation）

text-transformプロパティーで、テキストを四つのプロパティーの中の一つに変換できます：

• capitalize（各単語の最初の文字を大文字に）
• uppercase（各単語の全ての文字を大文字に）
• lowercase（各単語の全ての文字を小文字に）
• none（初期値）

例：

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

text-transformプロパティーは様式上の要求を表現するためだけに使用されるべきです。例えば、国や名称一覧を大文字化するのに text-transformを使うのは不適切です。

テキスト配置（Text Alignment）

text-alignプロパティーは ブロック−レベル要素（ P・ H1など）に適用され、要素のテキストの配置を与えます。このプロパティーは機能的にはHTMLのパラグラフ・見出し・ブロック区域の ALIGNと同じです。

例を以下にあげます：

H1          { text-align: center }
P.newspaper { text-align: justify }

テキスト字下げ（Text Indentation）

　text-indentプロパティをブロック−レベル要素（ P・ H1など）に適用することができ、要素の最初の行が受けるべき字下げの数を定義します。その値はlengthか percentageでなければなりません；パーセンテージは親要素の幅を参照します。 text-indentの普通の使い方は、パラグラフの字下げです：

P { text-indent: 5em }

行の高さ（Line Height）

line-heightプロパティーは、テキストの基準線との間の空間（隙間）を制御する値を受け入れます。その値は数値の場合行の高さは要素の文字サイズに数値掛けて計算されます。パーセント値は要素の文字サイズに対する相対的なものです。マイナス値は許されません。

行の高さは、 fontプロパティー内で文字サイズにそって与えられることもできます。

line-heightプロパティーはダブル・スペース・テキストに使うこともできます：

P { line-height: 200% }

Microsoft Internet Explorer 3.xは、数値値やピクセル値としての em乃至は ex単位を不正確に処理します。このバグでページが判読しにくくなりますので、制作者はできるだけそれを引き起こすことを避けなければなりません；パーセント単位はいい選択であることがおおいようです。

ボックス・プロパティー

• 上部マージン（Top Margin）
• 右側マージン（Right Margin）
• 下部マージン（Bottom Margin）

• 左側マージン（Left Margin）

• マージン（Margin）

• 上部パディング（Top Padding）
• 右側パディング（Right Padding）
• 下部パディング（Bottom Padding）

• 左側パディング（Left Padding）

• パディング（Padding）

• 上部境界線幅（Top Border Width）
• 右側境界線幅（Right Border Width）
• 下部境界線幅（Bottom Border Width）

• 左側境界線幅（Left Border Width）

• 境界線の幅（Border Width）
• 境界線色彩（Border Color）

• 境界線様式（Border Style）

• 上部境界線（Top Border）
• 右側境界線（Right Border）
• 下部境界線（Bottom Border）

• 左側境界線（Left Border）

• 境界線　　　　　（Border）
• 幅　　　　　　　（Width）
• 高さ　　　　　　（Height）
• 回り込み回避　　（Float）
• 回り込み回避解除（Clear）

上部マージン（Top Margin）

margin-topプロパティーは lengthか percentageを特定することで、要素の上方マージンを設定します。パーセント値は親要素幅を参照します。マイナス・マージンも許されます。

例えば、以下の規則は文書の上方マージンを除きます：

BODY { margin-top: 0 }

垂直マージンを結び付け、マージン値の最高を使うと破綻することに注意して下さい。

右側マージン（Right Margin）

margin-rightプロパティーは、 lengthか percentageを特定して、要素の右マージンを設定します。パーセント値は親要素幅を参照します。負のマージンも許されます。

例：

P.narrow { margin-right: 50% }

水平方向のマージンを結び付けても破綻しないことを知っておく。

下部マージン（Bottom Margin）

margin-bottomプロパティーは、 lengthか percentageを特定して、要素の下部マージンを設定します。パーセント値は親要素幅を参照します。負のマージンは許されます。

例：

DT { margin-bottom: 3em }

垂直マージンを結び付け、マージン値の最大値を使うと破綻することに注意しておきます。

左側マージン（Left Margin）

margin-leftプロパティーは、 lengthか percentageを特定して、要素の左マージンを設定します。パーセント値は親要素幅を参照します。負マージンも許されます。

例：

ADDRESS { margin-left: 50% }

水平方向マージンと結び付けても破綻されません。

マージン（Margin）

marginプロパティーは、一つから四つの値を特定して要素のマージンを設定し、各値は length・ percentage乃至は autoです。パーセント値は親要素の幅を参照します。負のマージンは許されます。

四つの値が与えられるなら、上部・右・下部・左マージンそれぞれに、適用されます。二つか三つなら、見当たらない値は反対の側から取られます。

マージン宣言の例です：

BODY { margin: 5em }             /* 全マージン 5em */
P    { margin: 2em 4em }         /* topとbottomマージン　2em,
                                    leftとrightマージン  4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

垂直方向のマージンと結び付け、マージン値の最高値を使うと破綻することに注意しておきます。水平方向にマージンは破綻しません。

marginプロパティーで、一つで全てのマージンを設定できます；代わりに、プロパティー margin-top・ margin-bottom・ margin-leftそして margin-rightを使うかもしれません。

上部パディング（Top Padding）

padding-topプロパティーは、 top borderとセレクターの内容の間にどの位の空白を置くかを記載します。値は lengthか percentageです。パーセント値は親要素の幅を参照します。負の値はゆるされません.

右側パディング（Right Padding）

padding-rightプロパティーで、 right borderとセレクターの内容の間の空白をどのくらいにするかを記載します。値は lengthか percentageです。パーセント値は親要素の幅を参照します。負の値は許されません。

下部パディング（Bottom Padding）

padding-bottomプロパティーで、 bottom borderとセレクターの内容の間にどの位の空白を置くかを記載します。値は lengthか percentageです。パーセント値は親要素の幅を参照します。負の値は許されません。

左側パディング（Left Padding）

padding-leftプロパティーで、 left borderとセレクターの内容にどの位の空白を置くかを記載します。値は、 lengthか percentageです。パーセント値は親要素の幅を参照します。負の値は許されません

パディング（Padding）

paddingプロパティーは、 padding-top・ padding-right・ padding-bottomとpadding-leftプロパティイーの短縮型です。

要素のパディングは、 borderと要素の内容の間の空白の量です。一から四の値が与えられ、各値は lengthか percentageです。パーセント値は親要素の幅を参照します。負の値は許されません。

四つの値があるなら、それぞれ上部・右側・下部・左側パディングです。一つの値なら、全ての側に適用されます。二乃至三の値が与えられるなら、見えない値は反対側から取られます。

例えば、以下の規則は上部パディングを2emに、右側パディングを4emに、下部ッパディングを5emに、左側パディングを4emに設定しています：

BLOCKQUOTE { padding: 2em 4em 5em }

上部境界線幅（Top Border Width）

border-top-widthプロパティーは要素の 上部境界線の幅を特定するのに使われます。値は三つのキーワードから一つ選び、文字サイズや相対的な幅を達成するのに使われる lengthに影響されません。負の値は許されません。

border-top・ border-width乃至 短縮型 borderも使えます。

右側境界線幅（Right Border Width）

border-right-widthプロパティーは、要素の 右側境界線の幅を特定するのに使われます。値は、三つのキーワードの一つを選べ、文字サイズや相対的な幅を達成するのに使える lengthによって影響をうけません。負の値は許されません。

border-right・ border-width乃至は短縮型プロパティーである borderも使えます。

下部境界線幅（Bottom Border Width）

border-bottom-widthプロパティーは要素の 下部境界線の幅を特定するのに使われます。値は三つのキーワードから一つを選び文字サイズや相対的な幅を達成するのに使われる lengthに影響されません。負の値は許されません。

border-bottom・ border-width乃至は短縮型プロパティーである borderも使えます。

左側境界線幅（Left Border Width）

border-left-widthプロパティーは要素の 左側境界線の幅を特定するのに使われます。値は三つのキーワードから一つ選び、文字サイズや相対的な幅を達成するのに使われる lengthによって影響をされません。

border-left・ border-width乃至は短縮型プロパティーである borderも使えます。

境界線幅（Border Width）

border-widthプロパティーは一から四つまでの値を特定して要素の境界線幅を設定するのに使い、各値はキーワード乃至は lengthです。負の長さは許されません。

四つの値が与えられたら、それぞれ上部・右側・下部・左側境界線幅に適用されます。一つの値なら、それが全ての側面に当てはめられます。二つか三つが与えられているなら、記載ない値は反対側の値から取られます。

このプロパティーは、 border-top-width・ border-right-width・ border-bottom-widthそして border-left-widthプロパティー用の短縮型です。

短縮型プロパティーborderも使います。

境界線色彩（Border Color）

border-colorプロパティーは要素の 境界線の色を設定します。いちから四つに 色彩値が特定されます。四つの値があると、それぞれ上部・右側・下部・左側境界線の色に適用されます。一つの値なら全ての側面に当てられます。二から三の値なら、記載されていない値は反対側から取られてきます。

短縮型である borderも使います。

境界線様式（Border Style）

border-styleプロパティーは要素の 境界線の様式（スタイル）を設定します。このプロパティーは視覚的な場合の境界線用に特定しなくてはなりません。

一つから四つのキーワードが特定されます。四つの値があれば、それぞれ上部・右側・下部・左側境界線様式ね適用されます。一つの値なら、全ての側面に適用されます。二から三の値の場合記載ない値は反対側から取られます。

短縮型プロパティーであるborderも使います。

上部境界線（Top Border）

border-topプロパティーは要素の上部境界線用の width・ styleそして colorを設定する短縮型です。

ただ一つの border-style値しか与えられないことに注意して下さい。

短縮型プロパティーである borderも使えます。

右側境界線（Right Border）

border-rightプロパティ−は要素の右側境界線の width・ styleそして colorを設定する短縮型です。

ただ一つの border-style値が与えられることに注意してください。

短縮型である borderも使います。

下部境界線（Bottom Border）

border-bottomプロパティーは要素の下部境界線の width・ styleそして colorを設定する短縮型です。

ただ一つの border-style値だけが与えられることに注意してください。

短縮型プロパティーである borderも使います。

左側境界線（Left Border）

border-leftプロパティーは要素の左側境界線の width・ styleそして colorを設定する短縮型です。

ただ一つの border-style値が与えられることに注意してください。

短縮型プロパティーである borderも使います。

境界線（Border）

borderプロパティーは要素の境界線の width・ styleそして colorを設定する短縮型です。

境界線宣言の例では以下のものを含んでいます：

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

borderプロパティーは四つの境界線全てを設定するだけです；ただ一つの境界線幅と境界線様式が与えられます。要素の四つの境界線に異なる値を与えるには、制作者は一つ以上の border-top・ border-right・ border-bottom・ border-left・ border-color・ border-width・ border-style・ border-top-width・ border-right-width・ border-bottom-width乃至は border-left-widthプロパティーを使わなければなりません。

幅（Width）

各 ブロック−レベル乃至は置き代えられる要素は、幅を持ち得て、 length・ percentage乃至はautoとして特定されます（ 置き代えられる要素は、内部次元のみが知られているものの一つ；置き代えられるHTML要素には IMG・ INPUT・ TEXTAREA・ SELECTそして OBJECTがあります）。 widthプロパティーの初期値はautoで、これは結果として要素の内部幅になります（ 例、要素自身の幅は、例えば画像の幅）。パーセントは親要素の幅を参照します。負の値は許されていません。

このプロパティーは、送信（submit）や再設定（reset）ボタンのような INPUT要素に共通の幅を与えるのに使うことができます：

INPUT.button { width: 10em }

高さ（Height）

各 ブロック−レベル乃至は置き代えられる要素は高さが与えられ、 lengthか autoとして特定されます（ 置き代えられる要素は、 IMG・ INPUT・ TEXTAREA・ SELECTそして OBJECTを含みます）。 heightプロパティーの初期値は autoで、結果的に要素の内部の高さになります（ 例、要素自身の高さは、例えば画像の高さに）。負の高さは許されていません。

widthプロパティーでのように、 heightは画像を計測するのに使えます：

IMG.foo { width: 40px; height: 40px }

多くの場合制作者は画像編集プログラムで画像を計測するよう忠告されますすが、というのはブラウザは精度の高い画像計測をしないようだからで、小規模化がユーザーに不必要に大きなファイルを保存させることになるからです。しかし、 widthやheightプロパティーでの小規模化は、視覚問題を克服するするために、ユーザー定義のスタイル・シートでの有用な選択です。

回り込み回避（Float）

floatプロパティーは、要素の周囲でテキストを折り返すことができます。これは IMG要素の HTML 3.2のALIGN=leftやALIGN=rightと目的は同じですが、CSS1は全ての要素で「回り込み回避」ができ、HTML 3.2でできる imagesや tablesだけではありません。

回り込み回避解除（Clear）

clearプロパティーは、要素が側面に要素の回り込み回避を可能にするかどうかを特定します。 leftの値は、左側で回避する要素の下に要素を移動するのを可能にします； rightは右側で回避する要素で同じ様に作用します。別の値は noneで、両側面で回避する要素の下に要素を移動するのを可能にします。このプロパティーは HTML 3.2の <BR CLEAR=left|right|all|none>に機能的に似ていますが、全ての要素に適用可能です。

型分類プロパティー

• 画面表示（Display）
• 空白文字（Whitespace）
• リスト様式型（List Style Type）
• リスト画像様式（List Style Image）
• リスト様式配置（List Style Position）
• リスト様式（List Style）

画面表示（Display）

displayプロパティーは四つの値の一つで要素を定義するのに使われます。：

• block（要素の前後で改行）
• inline（要素の前後で改行しない）
• list-item（リスト項目マークを除く blockと同じブロックがつく）
• none（画面表示なし）

各要素は、典型的には初期にdisplay値がブラウザによって与えられていて、これはHTML仕様書での示唆された表示にもとずいています。

不適切な形式の要素の表示能力故に displayプロパティーは危険です。値 noneは、指定された要素の子要素も含めて画面表示を無効にします。

空白文字（Whitespace）

white-spaceプロパティーは、要素内でのスペースをどう処理するかを決めます。このプロパティーは三つの値の一つを取ります：

• normal（複数のスペースを一つとします）
• pre（複数のスペースを破棄しません）
• nowrap（ <BR>タグなしの行折り返しを許しません）

リスト様式型（List Style Type）

list-style-typeプロパティーはリスト項目マークを特定し、 list-style-imageがnoneである場合や画像読み込みが切られている場合に使われます。

例：

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

リスト画像様式（List Style Image）

list-style-imageプロパティーは画像読み込みが機能している場合リスト項目マークとして使われる画像を特定し、 list-style-typeプロパティーで特定されたマークと置き代えます。

例：

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

リスト様式配置（List Style Position）

list-style-positionプロパティーは値 insideか outsideを取り、 outsideが初期値です。このプロパティーは、リスト項目からみてマークが何処に来るかを決めます。値 insideが使われていり場合、字下げになるのでなく行はマーカーの下に折り返します。表示例は：

Outside rendering:
 * List item 1
   second line of list item

Inside rendering:
   * List item 1
   second line of list item

リスト様式（List Style）

list-styleップロパティーは、 list-style-type・ list-style-positionそして list-style-imageプロパティーの短縮型です。

例：

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

単位

• 長さの単位（Length Units）
• パーセント単位（Percentage Units）
• 色彩単位（Color Units）
• URLs

長さの単位（Length Units）

長さの単位は、選択性の+か-によって式化され、その後に数値次いで二文字の単位を表わす省略語がきます。長さの値ではスペースはありません； 例えば、 1.3 emは正しい値ではなく、 1.3emが正しい値です。長さ 0では、二文字の単位識別子は必要ありません。

相対的と絶対的長さ単位は両者とも、CSS1でサポートされています。相対的な長さ単位は、別の長さプロパティーに対して相対的な長さを与え、異なる媒体でもより調整されると言う理由で好まれます。以下の相対的な単位が入手できます：

• em（ems、要素の文字の高さ）
• ex（x-height、文字"x"の高さ）
• px（pixels、キャンバス画面解像度に対して相対的な）

絶対的な長さ単位は、出力メディアに大きく依存し、それで相対的な単位よりも使い難いものです。以下の絶対的な単位が入手できます：

• in（インチ；1in=2.54cm）
• cm（センチメータ；1cm=10mm）
• mm（ミリメータ）
• pt（ポイント；1pt=1/72in)
• pc（パイカpicas；1pc=12pt)

パーセント単位（Percentage Units）

パーセント値は、選択性の+か-で式化され、その後に数値次いで%がきます。パーセント値にはスペースはとりません。

パーセント値は、各プロパティーに定義されるように、他の値に対しての相対的なものです。パーセント値は、ほとんどの場合、要素の文字サイズに対して相対的になります。

色彩単位（Color Units）

色彩値は、キーワード乃至は数値RGB仕様です。

16のキーワードがウィンドウズVGAパレットから採用されています： aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

RGB色は、四つの方法の一つで与えられます：

• #rrggbb（ 例、#00cc00）
• #rgb（ 例、#0c0）
• rgb(x,x,x)ここでは、xは0から255の整数（ 例、 rgb(0,204,0)）
• rgb(y%,y%,y%)ここでは、 yは0.0から100.0（ 例、 rgb(0%,80%,0%)）

上のサンプルは全て或る色を特定します。

Douglas R. Jacobsonは、取り扱いやすいクイック・リファレンス RGB Color Chart(61 kB)を提供しています。

URLs

URL値は、 url(foo)によって与えられ、ここでは fooがそのURLにあたります。URLは、 一重(')か二重(")引用符を選べ、（選択性の引用符号）URLの前後に空白文字を含めます。

URL内の括弧・コンマ・スペース・一重乃至は二重引用符はバックスラッシュでエスケープされなければなりません。部分的なURLsは、スタイル・シート資源に相対的に解釈され、HTML資源に沿うのではありません。

Netscape Navigator 4.x は、部分的なURLsをHTML資源に相対的に間違って解釈します。このバグがあるので、制作者はできるだけURLs全部を使うようにします。

例：

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(¥"Ulalume¥".png) } /* quotes in URL escaped */

Maintained by John Pozadzides and Liam Quinn

CSSインデックス ‾ CSS構造 ‾ CSSプロパティ

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.