The Web Design Group

CSS1プロパティー



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

<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-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
取りえる値: <family-name>
  • どのような文字種類名でも使われる
<generic-family>
  • serif(セリフ)(欧文活字のひげ飾り) (, Times)
  • sans-serif(サンセリフ)(セルフのないもの) (, ArialHelvetica)
  • cursive(筆記体) (, Zapf-Chancery)
  • fantasy(奇抜) (, Western)
  • monospace(等幅) (, Courier)
初期値: ブラウザで決められる
適用: 全要素
継承: 可能

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

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

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

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

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

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


文字スタイル(Font Style)

構文: font-style: <value>
取りえる値: normal | イタリック | 斜体
初期値: normal
適用: 全ての要素
継承: 可能

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

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

文字異体(Font Variant)

構文: font-variant: <value>
取りえる値: normal | small-caps
初期値: normal
適用: 全ての要素
Inherited: Yes

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

SPAN { font-variant: small-caps }

文字重み(Font Weight)

構文: font-weight: <value>
取りえる値: normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初期値: normal
適用: 全ての要素
継承: 可能

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

注意:全ての文字が9の可能性ある画面表示重さを持っていないので、重さのあるものは指定によってグループ化されるかもしれません。特別な重さが得られない場合代替えが、以下の基本にそって選択されます:

font-weight指定の例です:

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

文字サイズ(Font Size)



構文: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
取りえる値:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage>(親要素との関連で)

初期値: medium
適用: 全ての要素
継承: 可能

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

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

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

制作者は、 Microsoft Internet Explorer 3.x は, emex単位をピクセルとして不正に取り扱い、これらの単位を使ったテキストが判読できなくなりることに気付いておくべきです。ブラウザも、親要素の文字サイズに相対的にではなく、初期文字サイズに相対的なパーセント値を間違って

H1 { font-size: 200% }

レベル1見出しでサイズが、親要素文字サイズの二倍ではなくIEの初期文字サイズの二倍になり、これは危険です。このケースでは BODYが親要素であるかのようで、 mediumを定義すのがよく、一方IEにあった初期レベル1見出しの文字サイズは恐らく xx-largeとみなされます。

これらのバグのため、制作者はfont-sizeでパーセント値を使うには注意すべきで、このプロパティーでは em and ex単位を避けるべきです。


文字(Font)

構文: font: <value>
取りえる値: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
初期値: 未定義
適応: 全ての要素
継承: 可能

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

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

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


色彩と背景プロパティー


色  彩(Color)

構文: color: <color>
初期値: ブラウザによって決められている
適用: 全ての要素
継承: 可能

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

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

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


背景色(Background Color)

構文: background-color: <value>
取りえる値: <color> | transparent
初期値: transparent
適用: 全ての要素
継承: 不可

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

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

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

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


背景画像(Background Image)

構文: background-image: <value>
取りえる値: <url> | none
初期値: 無し
適用: 全ての要素
継承: 不可

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: <value>
取りえる値: repeat | repeat-x | repeat-y | no-repeat
初期値: 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: <value>
取りえる値: scroll | fixed
初期値: scroll
適用: 全ての要素
継承: 不可

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

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

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


背景位置(Background Position)

構文: background-position: <value>
取りえる値: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
初期値: 0% 0%
適用: ブロック−レベルとそれに代る要素
継承: 不可

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

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

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

パーセンテージや長さを使う場合水平方向の位置が真っ先に特定され、続いて垂直方向の位置がとくていされます。 20% 65%といった値は、画像の20%以上65%以下の点が要素の20%以上65%以下の点に置かれることを特定します。 5px 10pxといった値は、画像の左上角が要素の右から5ピクセルそして上左から10ピクセル下に配置されることを特定します。

水平方向の値のみがあたえられた場合垂直位置は50%になります。長さとパーセンテーギの組み合わせはマイナス位置であるようにできます。例えば、 10% -2cmは許されます。しかし、パーセンテージと長さはキーワードと組み合わすことはできません。

キーワードはいかの様に解釈されます:

背景画像はキャンバス画面に対して固定(fixed)されている場合画像は要素にでなくキャンバス画面に相対的に配置されます。

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


背景(Background)

構文: background: <value>
取りえる値: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
初期値: 未定義
適用: 全ての要素
継承: 不可

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%に設定されます。

ユーザーのスタイル・シートとの衝突を避ける手助けとして、 backgroundcolorは必ず一緒に特定されるべきです。


テキスト・プロパティー


言葉(単語)間隔(Word Spacing)

構文: word-spacing: <value>
取りえる値: normal | <length>
初期値: normal
適用: 全ての要素
継承: 可能

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

例:

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

文字間隔(Letter Spacing)

構文: letter-spacing: <value>
取りえる値: normal | <length>
初期値: normal
適用: 全ての要素
継承: 可能

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

例:

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

テキスト修飾(Text Decoration)

構文: text-decoration: <value>
取りえる値: none | [ underline || overline || line-through || blink ]
初期値: 無し
適用: 全ての要素
継承: 不可

text-decorationプロパティーで、テキストを五つのプロパティーの中の一つで飾ることができます: underlineoverlineline-throughblink乃至は初期値none

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

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

垂直配置(Vertical Alignment)

構文: vertical-align: <value>
取りえる値: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
初期値: baseline
適用: インライン要素
継承: 無し

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

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

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

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

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

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

テキスト変換(Text Transformation)

構文: text-transform: <value>
取りえる値: none | capitalize | 大文字 | 小文字
初期値: 無し
適用: 全ての要素
継承: 可能

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

例:

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

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


テキスト配置(Text Alignment)

構文: text-align: <value>
取りえる値: left | right | center | justify
初期値: ブラウザによって決められる
適用: ブロック−レベル要素
継承: 可能

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

例を以下にあげます:

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

テキスト字下げ(Text Indentation)

構文: text-indent: <value>
取り得る値: <length> | <percentage>
初期値: 0
適用される: ブロック−レベル要素
継承:

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

P { text-indent: 5em }

行の高さ(Line Height)

構文: line-height: <value>
取りえる値: normal | <number> | <length> | <percentage>
初期値: normal
適用: 全ての要素
継承: 可能

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

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

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

P { line-height: 200% }

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


ボックス・プロパティー


上部マージン(Top Margin)

構文: margin-top: <value>
取りえる値: <length> | <percentage> | auto
Initial Value: 0
適用: 全ての要素
継承: 不可

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

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

BODY { margin-top: 0 }

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


右側マージン(Right Margin)

構文: margin-right: <value>
取りえる値: <length> | <percentage> | auto
初期値: 0
適用: 全ての要素
継承: No

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

例:

P.narrow { margin-right: 50% }

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


下部マージン(Bottom Margin)

構文: margin-bottom: <value>
取りえる値: <length> | <percentage> | auto
初期値: 0
適用: 全ての要素
継承: 不可No

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

例:

DT { margin-bottom: 3em }

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


左側マージン(Left Margin)

構文: margin-left: <value>
取りえる値: <length> | <percentage> | auto
初期値: 0
適用: 全ての要素:
継承: 不可

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

例:

ADDRESS { margin-left: 50% }

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


マージン(Margin)

構文: margin: <value>
取りえる値: [ <length> | <percentage> | auto ]{1,4}
初期値: 未定義
適用: 全ての要素
継承: 不可

marginプロパティーは、一つから四つの値を特定して要素のマージンを設定し、各値は lengthpercentage乃至は 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-topmargin-bottommargin-leftそして margin-rightを使うかもしれません。


上部パディング(Top Padding)

構文: padding-top: <value>
取りえる値: <length> | <percentage>
初期値: 0
適用: 全ての要素
継承: 不可

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


右側パディング(Right Padding)

構文: padding-right: <value>
取りえる値: <length> | <percentage>
初期値: 0
適用: 全ての要素
継承: 不可

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


下部パディング(Bottom Padding)

構文: padding-bottom: <value>
取りえる値: <length> | <percentage>
初期値: 0
適用: 全ての要素
継承: 不可

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


左側パディング(Left Padding)

構文: padding-left: <value>
取りえる値: <length> | <percentage>
初期値: 0
適用: 全ての要素
継承: 不可

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


パディング(Padding)

構文: padding: <value>
取りえる値: [ <length> | <percentage> ]{1,4}
初期値: 0
適用: 全ての要素
継承: 不可

paddingプロパティーは、 padding-toppadding-rightpadding-bottompadding-leftプロパティイーの短縮型です。

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

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

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

BLOCKQUOTE { padding: 2em 4em 5em }

上部境界線幅(Top Border Width)

構文: border-top-width: <value>
取りえる値: thin | medium | thick | <length>
初期値: medium
適用: 全ての要素
継承: 不可

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

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


右側境界線幅(Right Border Width)

構文: border-right-width: <value>
取りえる値: thin | medium | thick | <length>
初期値: medium
適用: 全ての要素:
継承: 不可

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

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


下部境界線幅(Bottom Border Width)

構文: border-bottom-width: <value>
取りえる値: thin | medium | thick | <length>
初期値: medium
適用: 全ての要素:
継承: 不可

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

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


左側境界線幅(Left Border Width)

構文: border-left-width: <value>
取りえる値: thin | medium | thick | <length>
初期値: medium
適用: 全ての要素:
継承: 不可

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

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


境界線幅(Border Width)

構文: border-width: <value>
取りえる値: [ thin | medium | thick | <length> ]{1,4}
初期値: 未定義
適用: 全ての要素
継承: 不可

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

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

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

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


境界線色彩(Border Color)

構文: border-color: <value>
取りえる値: <color>{1,4}
初期値: colorプロパティーの値
適用: 全ての要素
継承: 不可

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

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


境界線様式(Border Style)

構文: border-style: <value>
取りえる値: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
初期値: none
適用:Applies to: 全ての要素:All elements
継承: No

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

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

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


上部境界線(Top Border)

構文: border-top: <value>
取りえる値: <border-top-width> || <border-style> || <color>
初期値: 未定義
適用: 全ての要素
継承: 不可

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

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

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


右側境界線(Right Border)

構文: border-right: <value>
取りえる値: <border-right-width> || <border-style> || <color>
初期値: 未定義
適用: 全ての要素
継承: 不可

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

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

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


下部境界線(Bottom Border)

構文: border-bottom: <value>
取りえる値: <border-bottom-width> || <border-style> || <color>
初期値: 未定義
適用: 全ての要素:
継承: 不可

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

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

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


左側境界線(Left Border)

構文: border-left: <value>
取りえる値: <border-left-width> || <border-style> || <color>
初期値: 未定義
適用: 全ての要素
継承: 不可

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

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

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


境界線(Border)

構文: border: <value>
取りえる値: <border-width> || <border-style> || <color>
初期値: 未定義
適用: 全ての要素
継承: 不可

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

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

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

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


幅(Width)

構文: width: <value>
取りえる値: <length> | <percentage> | auto
初期値: auto
適用: ブロック−レベルとそれに代わる要素
継承: 不可

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

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

INPUT.button { width: 10em }

高さ(Height)

構文: height: <value>
取りえる値: <length> | auto
初期値: auto
適用: ブロック−レベルと置き代えできる要素
継承: 不可

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

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

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

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


回り込み回避(Float)

構文: float: <value>
取りえる値: left | right | none
初期値: none
適用: 全ての要素
継承: 不可

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


回り込み回避解除(Clear)

構文: clear: <value>
取りえる値: none | left | right | both
初期値: none
適用: 全ての要素
継承: 不可

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


型分類プロパティー


画面表示(Display)

構文: display: <value>
取りえる値: block | inline | list-item | none
初期値: block
適用: 全ての要素
継承: 不可

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

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

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


空白文字(Whitespace)

構文: white-space: <value>
取りえる値: normal | pre | nowrap
初期値: normal
適用: ブロック−レベル要素
継承: 可能

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


リスト様式型(List Style Type)

構文: list-style-type: <value>
取りえる値: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初期値: disc
適用: displaylist-itemの要素
継承: 可能

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

例:

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: <value>
取りえる値: <url> | none
継承: 不可
適用: displaylist-itemの要素
継承: 可能

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: <value>
取りえる値: inside | outside
初期値: outside
適用: displaylist-itemの要素
継承: 可能

list-style-positionプロパティーは値 insideoutsideを取り、 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: <value>
取りえる値: <list-style-type> || <list-style-position> || <url>
初期値: 未定義
適用: displaylist-itemの要素
継承: 可能

list-styleップロパティーは、 list-style-typelist-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)

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

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

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


パーセント単位(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色は、四つの方法の一つで与えられます:

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

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


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

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