HTMLとCSSを覚えて標準のテンプレートをカスタマイズ、自分だけのサイトを作ろう

CSS1プロパティー

CSSでは数多くのプロパティが提供されています。それらはいくつかのグループにわけることができ、グループの特徴を捉えるとスタイルシートの使い方が理解しやすくなります。現時点では全てのプロパティが実用化されているわけでありません。

• プロパティー定義に使われる構文
• 文字プロパティ
• 色彩と背景プロパティ
• テキスト・プロパティ
• ボックス・プロパティ
• 型分類プロパティ
• 単位

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

<xxx>

type xxxの値。

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

xxx

文字通りに書かなければキーワード（大文字小文字の区別はありませんが）。

コンマやスラッシュも文字通りに書かねければなりません。

A B C

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

A | B

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

A || B

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

[ xxx ]

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

xxx*

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

xxx+

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

xxx?

xxxは選択できます。

xxx{A,B}

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

文字プロパティー

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

文字種類（系）（Font Family）

Functional list

書式	font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
値	<family-name> どのような文字種類名でも使われる <generic-family> serif（セリフ）（欧文活字のひげ飾り） (例,Times) sans-serif（サンセリフ）（セルフのないもの） (例,ArialやHelvetica) cursive（筆記体） (例,Zapf-Chancery) fantasy（奇抜） (例,Western) monospace（等幅） (例,Courier)
初期値	ブラウザに依存する
適用要素	全要素
継承性	可能

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

最初の二つの指定は特別な字体（typeface）であることに注意してください：NewCentury SchoolbookとTimes。しかしこの両者はserif（セリフ）文字ですので、システムがこれらのどちらかを持っていなくて、要件に合った別のserif文字を持っている場合バックアップとして汎用文字ファミリーがリストされています。空白がある文字名は、一重または二重引用符号で囲っておかなければなりません。文字ファミリーは、fontプロパティと一緒に与えられかもしれません。

文字スタイル（Font Style）

Functional list

書式	font-style: <value:値>
値	normal |イタリック |斜体
初期値	normal
適用要素	全ての要素
継承性	可能

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

文字異体（Font Variant）

Functional list

書式	font-variant: <value:値>
値	normal |small-caps
初期値	normal
適用要素	全ての要素
継承性:	可能

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

文字異体指定の例は以下のようになります：

文字重み（Font Weight）

Functional list

書式	font-weight: <value:値>
値	normal |bold |bolder |lighter | 100 |200 |300 |400 |500 |600 |700 |800 |900
初期値	normal
適用要素	全ての要素
継承性	可能

font-weightプロパティーは、文字の重さを特定するのに使われます。

bolderとlighter値は、継承された文字に相対的で、一方その他の値は絶対的な文字重さです。注意：全ての文字が9の可能性ある画面表示重さを持っていないので、重さのあるものは指定によってグループ化されるかもしれません。特別な重さが得られない場合代替えが、以下の基本にそって選択されます：

• 500は、400に移り、またその逆も。
• 100-300は、次に軽い重さに、それもないならなんらかの方法で次により黒いものに指定されます。
• 600-900は、次に黒い重さに、それもないならなんらかの方法で次により明るいものに指定されます。

font-weight指定の例です：

文字サイズ（Font Size）

Functional list

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

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

文字（Font）

Functional list

書式	font: <value:値>
値	[<font-style> ||<font-variant> ||<font-weight> ]<font-size> [ /<line-height> ]<font-family>
初期値	未定義
適応：	全ての要素
継承性	可能

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

例えば、

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

色彩と背景プロパティー

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

色彩（Color）

Functional list

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

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

色彩規則の例です：

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

背景色（Background Color）

Functional list

書式	background-color: <value:値>
値	<color> | transparent
初期値	transparent
適用要素	全ての要素
継承性	不可

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

例えば：

ユーザーのスタイル・シートとの衝突を回避する手助けとして、background-imageは、background-colorが使われる時はいつも、特定されるべきです。多くの場合background-image:noneが適しています。制作者はまた短縮型であるbackgroundプロパティーを使い、これはbackground-colorプロパティよりも現在ではよくサポートされています。

背景画像（Background Image）

Functional list

書式	background-image: <value:値>
値	<url> | none
初期値	無し
適用要素	全ての要素
継承性	不可

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

背景画像が定義される場合、同じbackground colorも、画像を読み込まないときのために、定義されるべきです。制作者は短縮型であるbackgroundプロパティーも使い、このほうが現在ではbackground-imageよりよくサポートされています。

背景の反復（Background Repeat）

Functional list

書式	background-repeat: <value:値>
値	repeat | repeat-x | repeat-y | no-repeat
初期値	repeat
適用要素	全ての要素
継承性	不可

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

上の例で、画像は水平方向にだけ引き詰められています。制作者は短縮型であるbackgroundプロパティーも使うかもしれませんし、これはbackground-repeatよりも現在ではよくサポートされています。

背景飾り（Background Attachment）

Functional list

書式	background-attachment: <value:値>
値	scroll | fixed
初期値	scroll
適用要素	全ての要素
継承性	不可

background-attachmentプロパティーは、特定されたbackgroundimageが内容とともにスクロールするか画面に関して固定されているかを決めます。

例えば、以下のものは固定された背景画像を特定しています：

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

背景位置（Background Position）

Functional list

書式	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%以下の点に置かれることを特定します。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）

Functional list

書式	background: <value:値>
値	<background-color> ||<background-image> ||<background-repeat> | |<background-attachment> ||<background-position>
初期値	未定義
適用要素	全ての要素
継承性	不可

backgroundプロパティーは、より特殊な背景関連プロパティ−の短縮型です。background宣言の例を以下にあげます：

特定化されていない値は、その初期値を受け取ります。例えば上のはじめから三つの規則では、background-positionプロパティーは 0% 0%に設定されます。ユーザーのスタイル・シートとの衝突を避ける手助けとして、backgroundとcolorは必ず一緒に特定されるべきです。

テキスト・プロパティー

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

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

Functional list

書式	word-spacing: <value:値>
値	normal |<length>
初期値	normal
適用要素	全ての要素
継承性	可能

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

文字間隔（Letter Spacing）

Functional list

書式	letter-spacing: <value:値>
値	normal |<length>
初期値	normal
適用要素	全ての要素
継承性	可能

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

テキスト修飾（Text Decoration）

Functional list

書式	text-decoration: <value:値>
値	none | [underline ||overline ||line-through ||blink ]
初期値	無し
適用要素	全ての要素
継承性	不可

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

垂直配置（Vertical Alignment）

Functional list

書式	vertical-align: <value:値>
値	baseline |sub |super |top |text-top |middle |bottom |text-bottom |<percentage>
初期値	baseline
適用要素	インライン要素
継承性	無し

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プロパティーは画像配置用に特に有用です。

以下のような例です：

テキスト変換（Text Transformation）

Functional list

書式	text-transform: <value:値>
値	none |capitalize |大文字 |小文字
初期値	無し
適用要素	全ての要素
継承性	可能

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

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

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

テキスト配置（Text Alignment）

Functional list

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

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

例を以下にあげます：

テキスト字下げ（Text Indentation）

Functional list

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

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

行の高さ（Line Height）

Functional list

書式	line-height: <value:値>
値	normal | <number> |<length> |<percentage>
初期値	normal
適用要素	全ての要素
継承性	可能

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

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

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）

Functional list

書式	margin-top: <value:値>
値	<length> |<percentage> | auto
Initial value:値:	0
適用要素	全ての要素
継承性	不可

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

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

右側マージン（Right Margin）

Functional list

書式	margin-right: <value:値>
値	<length> |<percentage> | auto
初期値	0
適用要素	全ての要素
継承性	No

margin-rightプロパティーは、lengthかpercentageを特定して、要素の右マージンを設定します。

パーセント値は親要素幅を参照します。

負のマージンも許されます。

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

下部マージン（Bottom Margin）

Functional list

書式	margin-bottom: <value:値>
値	<length> |<percentage> | auto
初期値	0
適用要素	全ての要素
継承性	不可No

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

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

左側マージン（Left Margin）

Functional list

書式	margin-left: <value:値>
値	<length> |<percentage> | auto
初期値	0
適用要素	全ての要素：
継承性	不可

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

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

マージン（Margin）

Functional list

書式	margin: <value:値>
値	[<length> |<percentage> | auto ]{1,4}
初期値	未定義
適用要素	全ての要素
継承性	不可

marginプロパティーは、一つから四つの値を特定して要素のマージンを設定し、各値はlength・percentageまたは autoです。パーセント値は親要素の幅を参照します。負のマージンは許されます。四つの値が与えられるなら、上部・右・下部・左マージンそれぞれに、適用されます。二つか三つなら、見当たらない値は反対の側から取られます。

マージン宣言の例です：

垂直方向のマージンと結び付け、マージン値の最高値を使うと破綻することに注意しておきます。水平方向にマージンは破綻しません。marginプロパティーで、一つで全てのマージンを設定できます；代わりに、プロパティーmargin-top・margin-bottom・margin-leftそしてmargin-rightを使うかもしれません。

上部パディング（Top Padding）

Functional list

書式	padding-top: <value:値>
値	<length> |<percentage>
初期値	0
適用要素	全ての要素
継承性	不可

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

右側パディング（Right Padding）

Functional list

書式	padding-right: <value:値>
値	<length> |<percentage>
初期値	0
適用要素	全ての要素
継承性	不可

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

下部パディング（Bottom Padding）

Functional list

書式	padding-bottom: <value:値>
値	<length> |<percentage>
初期値	0
適用要素	全ての要素
継承性	不可

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

左側パディング（Left Padding）

Functional list

書式	padding-left: <value:値>
値	<length> |<percentage>
初期値	0
適用要素	全ての要素
継承性	不可

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

パディング（Padding）

Functional list

書式	padding: <value:値>
値	[<length> |<percentage> ]{1,4}
初期値	0
適用要素	全ての要素
継承性	不可

paddingプロパティーは、padding-top・padding-right・padding-bottomとpadding-leftプロパティイーの短縮型です。要素のパディングは、borderと要素の内容の間の空白の量です。一から四の値が与えられ、各値はlengthかpercentageです。パーセント値は親要素の幅を参照します。マイナスは許されません。四つの値があるなら、それぞれ上部・右側・下部・左側パディングです。一つの値なら、全ての側に適用されます。二または三の値が与えられるなら、見えない値は反対側から取られます。例えば、以下の規則は上部パディングを2emに、右側パディングを4emに、下部ッパディングを5emに、左側パディングを4emに設定しています：

上部境界線幅（Top border Width）

Functional list

書式	border-top-width: <value:値>
値	thin | medium | thick |<length>
初期値	medium
適用要素	全ての要素
継承性	不可

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

border-top・border-widthまたは短縮型borderも使えます。

右側境界線幅（Right border Width）

Functional list

書式	border-right-width: <value:値>
値	thin | medium | thick |<length>
初期値	medium
適用要素	全ての要素：
継承性	不可

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

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

下部境界線幅（Bottom border Width）

Functional list

書式	border-bottom-width: <value:値>
値	thin | medium | thick |<length>
初期値	medium
適用要素	全ての要素：
継承性	不可

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

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

左側境界線幅（Left border Width）

Functional list

書式	border-left-width: <value:値>
値	thin | medium | thick |<length>
初期値	medium
適用要素	全ての要素：
継承性	不可

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

境界線幅（border Width）

Functional list

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

border-widthプロパティーは一から四つまでの値を特定して要素の境界線幅を設定するのに使い、各値はキーワードまたはlengthです。負の長さは許されません。四つの値が与えられたら、それぞれ上部・右側・下部・左側境界線幅に適用されます。一つの値なら、それが全ての側面に当てはめられます。二つか三つが与えられているなら、記載ない値は反対側の値から取られます。

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

境界線色彩（border Color）

Functional list

書式	border-color: <value:値>
値	<color>{1,4}
初期値	colorプロパティーの値
適用要素	全ての要素
継承性	不可

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

境界線様式（border Style）

Functional list

書式	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）

Functional list

書式	border-top: <value:値>
値	<border-top-width> ||<border-style> ||<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

border-topプロパティーは要素の上部境界線用のwidth・styleそしてcolorを設定する短縮型です。ただ一つのborder-style値しか与えられないことに注意して下さい。短縮型プロパティーであるborderも使えます。

右側境界線（Right border）

Functional list

書式	border-right: <value:値>
値	<border-right-width> ||<border-style> ||<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

border-rightプロパティ−は要素の右側境界線のwidth・styleそしてcolorを設定する短縮型です。ただ一つのborder-style値が与えられることに注意してください。短縮型であるborderも使います。

下部境界線（Bottom border）

Functional list

書式	border-bottom: <value:値>
値	<border-bottom-width> ||<border-style> ||<color>
初期値	未定義
適用要素	全ての要素：
継承性	不可

border-bottomプロパティーは要素の下部境界線のwidth・styleそしてcolorを設定する短縮型です。ただ一つのborder-style値だけが与えられることに注意してください。短縮型プロパティーであるborderも使います。

左側境界線（Left border）

Functional list

書式	border-left: <value:値>
値	<border-left-width> ||<border-style> ||<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

border-leftプロパティーは要素の左側境界線のwidth・styleそしてcolorを設定する短縮型です。ただ一つのborder-style値が与えられることに注意してください。短縮型プロパティーであるborderも使います。

境界線（border）

Functional list

書式	border: <value:値>
値	<border-width> ||<border-style> ||<color>
初期値	未定義
適用要素	全ての要素
継承性	不可

borderプロパティーは要素の境界線のwidth・styleそしてcolorを設定する短縮型です。境界線宣言の例では以下のものを含んでいます：

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）

Functional list

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

各ブロック−レベルまたは置き代えられる要素は、幅を持ち得て、length・percentageまたはautoとして特定されます（置き代えられる要素は、内部次元のみが知られているものの一つ；置き代えられるHTML要素には IMG・ INPUT・ TEXTAREA・ SELECTそして OBJECTがあります）。

widthプロパティーの初期値はautoで、これは結果として要素の内部幅になります（ 例、要素自身の幅は、例えば画像の幅）。パーセントは親要素の幅を参照します。マイナスは許されていません。

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

高さ（Height）

Functional list

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

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

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

多くの場合制作者は画像編集プログラムで画像を計測するよう忠告されますすが、というのはブラウザは精度の高い画像計測をしないようだからで、小規模化がユーザーに不必要に大きなファイルを保存させることになるからです。

しかし、 widthやheightプロパティーでの小規模化は、視覚問題を克服するするために、ユーザー定義のスタイル・シートでの有用な選択です。

回り込み回避（Float）

Functional list

書式	float: <value:値>
値	left | right | none
初期値	none
適用要素	全ての要素
継承性	不可

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

回り込み回避解除（Clear）

Functional list

書式	clear: <value:値>
値	none | left | right | both
初期値	none
適用要素	全ての要素
継承性	不可

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）

Functional list

書式	display: <value:値>
値	block | inline | list-item | none
初期値	block
適用要素	全ての要素
継承性	不可

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

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

各要素は、典型的には初期にdisplay値がブラウザによって与えられていて、これはHTML仕様書での示唆された表示にもとずいています。不適切な形式の要素の表示能力故に displayプロパティーは危険です。値 noneは、指定された要素の子要素も含めて画面表示を無効にします。

空白文字（Whitespace）

Functional list

書式	white-space: <value:値>
値	normal | pre | nowrap
初期値	normal
適用要素	ブロック−レベル要素
継承性	可能

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

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

リスト様式型（List Style Type）

Functional list

書式	list-style-type: <value:値>
値	disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初期値	disc
適用要素	display値 list-itemの要素
継承性	可能

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

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

Functional list

書式	list-style-image: <value:値>
値	<url> | none
継承性	不可
適用要素	display値list-itemの要素
継承性	可能

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

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

Functional list

書式	list-style-position: <value:値>
値	inside | outside
初期値	outside
適用要素	display値list-itemの要素
継承性	可能

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

リスト様式（List Style）

Functional list

書式	list-style: <value:値>
値	<list-style-type> ||<list-style-position> ||<url>
初期値	未定義
適用要素	display値list-itemの要素
継承性	可能

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

単位

• 長さの単位（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, andyellow.

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資源に沿うのではありません。

このバグがあるので、制作者はできるだけURLs全部を使うようにします。

HOME＞HTML TAG >スタイルシート>プロパティー

目的別属性

広告