イヌでもわかるJavaScript講座

style プロパティ

background

IE4.0 R/W
Gecko0.9.4 R

バックグラウンド

以下のプロパティの複合プロパティ
backgroundColor, backgroundImage, backgroundRepeat, backgroundAttachment, backgroundPosition
指定されないプロパティは初期値でセットされる。

型：文字列

属性：background

CSS
CSS1
W3C(DOM1)

backgroundAttachment

IE4.0 R/W
Gecko0.9.4 R

背景をスクロールさせるかどうか

型：文字列

fixed	背景はスクロールしない
scroll	背景はスクロールする (初期値)

属性：background-attachment

CSS
CSS1

backgroundColor

IE4.0 R/W
Gecko0.9.4 R

バックグラウンドカラー

型：バリアント

値

色コード

属性：background-color

NS4：layers[].bgColor / document[].bgColor

STEP.46
CSS
CSS1

backgroundImage

IE4.0 R/W
Gecko0.9.4 R

背景画像

型：文字列

初期値	none
値	URL

属性：background-image

NS4：layers[].background.src

CSS
CSS1

backgroundPosition
IE4.0 R/W
Gecko0.9.4 R

backgroundPositionX
backgroundPositionY
IE4.0 R/W
Gecko

背景画像の初期位置
background-position属性(CSS)のX座標
background-position属性(CSS)のY座標

型：文字列

絶対単位	cm mm in pt pc or px
相対単位	em ex
パーセント	%
垂直の整列	top center bottom
水平の整列	left center right
初期値	0% 0%

属性：background-position
属性：background-position-x
属性：background-position-y

CSS
CSS1

backgroundRepeat

IE4.0 R/W
Gecko0.9.4 R

背景画像の繰り返し方

型：文字列

no-repeat	繰り返さない
repeat-y	垂直方向に繰り返す
repeat-x	水平方向に繰り返す
repeat	水平垂直両方向に繰り返す (初期値)

属性：background-repeat

CSS
CSS1

border
borderBottom
borderLeft
borderRight
borderTop

IE4.0 R/W
Gecko0.9.4 R

囲むの枠線の幅、色、スタイル
下側の枠線の幅、色、スタイル
左側の枠線の幅、色、スタイル
右側の枠線の幅、色、スタイル
上側の枠線の幅、色、スタイル

以下のプロパティの複合プロパティ
borderColor , borderStyle , borderWidth
指定されないプロパティは初期値でセットされる。

型：文字列

属性：border
属性：border-bottom
属性：border-left
属性：border-right
属性：border-top

border
CSS
CSS1
W3C(DOM1)

else
CSS
CSS1

borderBottomColor
borderColor
borderLeftColor
borderRightColor
borderTopColor

IE4.0 R/W
Gecko0.9.4 R

下側の枠線の色
囲むの枠線の色
左側の枠線の色
右側の枠線の色
上側の枠線の色

※borderColorは最大4色まで指定可能。
1色しか指定しない場合は四辺に適用される。
2色を指定した場合は最初の色が上下の辺に適用され、2番目の色が左右の辺に指定される。
3色を指定した場合は上辺、左右の辺、底辺に適用される。

型：文字列

属性：border-bottom-color
属性：border-color
属性：border-left-color
属性：border-right-color
属性：border-top-color

borderColor
CSS
CSS1

else
CSS
CSS2

borderBottomStyle
borderLeftStyle
borderRightStyle
borderStyle
borderTopStyle

IE4.0 R/W
Gecko0.9.4 R

下側の枠線のスタイル
左側の枠線のスタイル
右側の枠線のスタイル
囲む枠線のスタイル
上側の枠線のスタイル

型：文字列

none	線なし（border-widthの指定も無視される） (初期値)
solid	実線
double	エレメントのバックグラウンドの枠線が二重線になる 2つの線幅と線間の合計がborder-widthとなる border-widthは3ピクセル以上を指定しなければならない
groove	指定した色で立体的に窪んだ感じのスタイル
ridge	指定した色で立体的に隆起した感じのスタイル
inset	指定した色で立体的に中にはめ込まれた感じのスタイル
outset	指定した色で立体的に外にはみ出した感じのスタイル

属性：border-bottom-style
属性：border-left-style
属性：border-right-style
属性：border-style
属性：border-top-style

boderStyle
CSS
CSS1

else
CSS
CSS2

borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderWidth

IE4.0 R/W
Gecko0.9.4 R/W

下側の枠線の幅
左側の枠線の幅
右側の枠線の幅
上側の枠線の幅
囲むの枠線の幅

型：文字列

初期値	medium
減少	thin
増加	thick
単位	cm mm in pt pc px em ex

※borderWidthは最大4つの幅を指定できる。
1つしか指定しない場合はそれが四辺に適用される。
2つ指定した場合は最初の値が上下の辺に適用され、2番目の値が左右の辺に指定される。
3つ指定した場合はそれぞれの色は上辺、左右の辺、底辺に適用される。

属性：border-bottom-width
属性：border-left-width
属性：border-right-width
属性：border-top-width
属性：border-width

CSS
CSS1

bottom

IE4.0 R/W
Gecko0.9.4 R/W

ドキュメントの下端を基準としたエレメントの位置

型：文字列

初期位置	auto
単位	cm mm in pt pc px em ex
パーセント	%

属性：bottom

CSS
CSS2

clear

IE4.0 R/W
Gecko0.9.4 R

回り込みエレメントを、あるエレメントの左右に置けるかどうか

型：文字列

all	エレメントは回り込みエレメントの下に移動する
left	エレメントは左側にある回り込みエレメントの下に移動する
right	エレメントは右側にある回り込みエレメントの下に移動する
none	両側の回り込みを許可する (初期値)

属性：clear

CSS
CSS1
W3C(DOM1)

clip

IE4.0 R/W
Gecko0.9.4 R

エレメントのどの部分を表示するか

表示領域の形状と大きさを定義する。表示領域以外の部分は透明になる。いずれの座標にもautoを指定すると対応する画像の端の座標として扱われる。デフォルト値はエレメントのすべてを表示。

型：文字列

rect(top right bottom left)

auto （初期値）

値の順番については注意は必要。clip:rect(0 0 50 50)とするとエレメントは全く表示されない。これはtopとrightの値が共に0になっているからでclip:rect(0 50 50 0)とすれば良い。

属性：clip

NS4：layers[].clip.top / clip.right / clip.bottom / clip.left / clip.height / clip.width

CSS
CSS2

color

IE4.0 R/W
Gecko0.9.4 R/W

テキストの色

型：バリアント

値

色コード

属性：color

NS4：document[].fgColor

STEP.45
CSS
CSS1
W3C(DOM1)

cssText

IE4.0 R/W
Gecko0.9.4 R
Gecko1.0.1 R/W

スタイルルールの表現方法

型：文字列

文字列が返ったときは複合プロパティを個々の属性に分解する。

属性：なし

CSS

cursor

IE4.0 R/W
Gecko0.9.4 R

マウスポインタの形状

型：文字列

auto	状況に応じて形を自動的に決定する
crosshair	十字型
default	矢印
hand	手
help	疑問符付き矢印
move	矢印
e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize	方向
text	I
wait	砂時計
all-scroll col-resize no-drop not-allowed pointer progress row-resize url(uri) vertical-text	IE6以降

属性：cursor

CSS
CSS2

display

IE4.0 R/W
Gecko0.9.4 R

エレメントを表示するかどうか

型：文字列

none	表示しない
block	ブロック要素
inline	インライン要素 (初期値)
inline-block	オブジェクトはインライン、オブジェクトの内容はブロック要素
list-item	ブロック要素にlist-itemマーカーが加わったもの (IE6以降)
table-header-group	ヘッダは全ての列の前に表示
table-footer-group	フッタは全ての列の後に表示

block、inline、list-itemは明確に区別された形でサポートされていない。(IE5)

visibilityプロパティと違ってdisplay=noneはエレメントが表示される位置に空白が置かれない。

属性：display

NS4：layers[].hidden (true/false)

CSS
CSS1

filter

IE4.0 R/W
Gecko

フィルタまたはフィルタのコレクション

属性：Alpha , BlendTrans , Chroma , DropShadow , FlipH , FlipV , Glow , Gray , Invert , Light , MaskFilter , MotionBlur , Redirect , RevealTrans , Shadow , Wave , Xray

STEP.75

font

IE4.0 R/W
Gecko0.9.4 R

テキストフォント

fontStyle , fontVariant , fontWeight , fontSize , fontFamily の複合プロパティ。
指定されなかったプロパティは変化しない。

型：文字列

属性：font

CSS
CSS1

fontFamily

IE4.0 R/W
Gecko0.9.4 R

テキストに使われるフォント名

型：文字列

総称フォントファミリー	serif sans-serif cursive fantasy monospace
ブラウザがサポートしたフォント	Times Helvetica Zapf-Chancery Western Courier

複数のフォントファミリー名を指定する場合はカンマで区切る。空白を含むフォントファミリー名の場合はシングルクォーテーションまたはダブルクォーテーションで囲まなければならない。

属性：font-family

CSS
CSS1

fontSize

IE4.0 R/W
Gecko0.9.4 R/W

フォントサイズ

型：文字列

定義されているキーワード	xx-small x-small small medium (初期値) large x-large xx-large
親のフォントサイズに対する相対キーワード	larger smaller
単位	cm mm in pt pc px em ex %

属性：font-size

STEP.47
CSS
CSS1

fontStyle

IE4.0 R/W
Gecko0.9.4 R

フォントスタイル

型：文字列

italic	イタリック
normal	標準 (初期値)
oblique	斜体

属性：font-style

CSS
CSS1

fontVariant

IE4.0 R/W
Gecko0.9.4 R

フォントのバリエーション

型：文字列

normal	標準 (初期値)
small-caps	小文字サイズの大文字

属性：font-variant

CSS
CSS1

fontWeight

IE4.0 R/W
Gecko0.9.4 R

フォントの太さ

型：文字列

normal (初期値)

bold

bolder

lighter

属性：font-weight

CSS
CSS1

height

IE4.0 R/W
Gecko0.9.4 R/W

エレメントの高さ

型：文字列

初期値	auto
単位	cm mm in pt pc px em ex %

このプロパティで数値演算する場合はpixelHeightまたはposHeightを使用する。
パーセンテージで指定した場合は親エレメントの幅を基準に処理される。

属性：height

CSS
CSS1
W3C(DOM1)

left

IE4.0 R/W
Gecko0.9.4 R/W

ドキュメントの左端を基準としたエレメントの位置

型：文字列

初期値	auto
単位	cm mm in pt pc px em ex %

属性：left

NS4：layers[].left

STEP.74
STEP.92
STEP.93
STEP.94
CSS
CSS2

letterSpacing

IE4.0 NS

エレメントの文字間

型：文字列

初期値	normal
単位	cm mm in pt pc px em ex

属性：letter-spacing

CSS
CSS1

lineHeight

IE4.0 R/W
Gecko0.9.4 R/W

段落の行間

型：文字列

初期値	normal
単位	cm mm in pt pc px em ex %

属性：line-height

CSS
CSS1

listStyle

IE5 R/W
Gecko0.9.4 R

listStyleType、listStyleImage、listStylePositionの複合プロパティ

型：文字列

属性：line-style

CSS
CSS1

listStyleImage

IE5 R/W
Gecko0.9.4 R

どの画像をlist-itemマーカーとして使うか

画像が存在する場合はマーカーセットをlistStyleTypeで置き換える。

型：文字列

初期値	none
値	URL

属性：line-style-image

CSS
CSS1

listStylePosition

IE5 R/W
Gecko0.9.4 R

どのようにlist-itemマーカーが描かれるか

list-itemのdisplay値を持っているエレメントに対してのみ適用。

型：文字列

outside	マーカーはテキストの外部に置かれる (初期値)
inside	マーカーはテキストの内部に置かれる

属性：line-style-position

CSS
CSS1

listStyleType

IE5 R/W
Gecko0.9.4 R

定義されているline-itemマーカーのタイプ

listStyleImageがnoneの場合またはURLによって指定された画像が表示できなかった場合のline-itemマーカーの外観を定義する。

型：文字列

disc	Solid circles (初期値)
circle	Outlined circle.
square	Solid squares
decimal	1, 2, 3, 4, …
lower-roman	i, ii, iii, iv, …
upper-roman	I, II, III, IV, …
lower-alpha	a, b, c, d, …
upper-alpha	A, B, C, D, …
none	なし

属性：list-style-type

CSS
CSS1

margin
marginBottom
marginLeft
marginRight
marginTop

IE4.0 R/W
Gecko0.9.4 R/W

上右下左のマージンの大きさの複合
下マージンの大きさ
左マージンの大きさ
右マージンの大きさ
上マージンの大きさ

型：文字列

初期値	auto
単位	cm mm in pt pc px em ex %

属性：margin
属性：margin-bottom
属性：margin-left
属性：margin-right
属性：margin-top

CSS
CSS1

overflow

IE4.0 R/W
Gecko0.9.4 R

エレメントのコンテントがエレメントの高さや幅を超えた場合にどのようにするか

型：文字列

visible	スクロールバーは付かない。(初期値)
scroll	スクロールバーが付く。
hidden	あふれた部分は見ることができない。
auto	必要なときだけスクロールバーが付く。

属性：overflow

CSS
CSS2

paddingBottom
paddingLeft
paddingRight
paddingTop

IE4.0 R/W
Gecko0.9.4 R/W

下側のパディング
左側のパディング
右側のパディング
上側のパディング

型：文字列

単位	cm mm in pt pc px em ex %

属性：padding-bottom
属性：padding-left
属性：padding-right
属性：padding-top

CSS
CSS1

pageBreakAfter

IE4.0 R/W
Gecko0.9.4 R

エレメントの後にページブレークするかどうか
続く内容がページの右と左のどちらに表示するか

型：文字列

auto	必要な場合エレメントの後にページブレークを入れる (初期値)
always	常にページブレークを入れる
left	左が空白のページが出てくるまでエレメントの後に1つまたは2つのページブレークを入れる
right	右が空白のページが出てくるまでエレメントの後に1つまたは2つのページブレークを入れる
ヌルストリング	ページブレークを入れない

※ドキュメントを印刷するときに使うことができる

属性：page-break-after

CSS
CSS2

pageBreakBefore

IE4.0 R/W
Gecko0.9.4 R

エレメントの前にページブレークするかどうか
続く内容がページの右と左のどちらに表示するか

型：文字列

auto	必要な場合エレメントの前にページブレークを入れる
always	常にページブレークを入れる
left	左が空白のページが出てくるまでエレメントの前に1つまたは2つのページブレークを入れる
right	右が空白のページが出てくるまでエレメントの前に1つまたは2つのページブレークを入れる
ヌルストリング	ページブレークを入れない

※ドキュメントを印刷するときに使うことができる

属性：page-break-before

CSS
CSS2

pixelHeight
pixelLeft
pixelTop
pixelWidth

IE4.0 R/W
Gecko

エレメントの高さ
エレメントの左端座標
エレメントの上端座標
エレメントの幅

型：数値

値

ピクセル

属性：なし

CSS

posHeight
posLeft
posTop
posWidth

IE4.0 R/W
Gecko0.9.4 R/W

エレメントの高さ
エレメントの左端位置
エレメントの上端位置
エレメントの幅

型：浮動小数点の数値

値	height,left,top,width属性で指定した単位

属性：なし

CSS

position

IE4.0 R/W
Gecko0.9.4 R

エレメントの位置のタイプ

型：文字列

static	HTMLのレイアウト規則 (初期値)
absolute	絶対位置
relative	相対位置

属性：position

CSS
CSS2

right

IE4.0 R/W
Gecko0.9.4 R/W

ドキュメントの右端を基準としたエレメントの位置

型：文字列

初期値	auto
単位	cm mm in pt pc px em ex %

属性：right

CSS
CSS2

styleFloat

IE4.0 R/W
Gecko

回り込みスタイル

型：文字列

none	初期値
left	テキストはオブジェクトの右側に回り込む
right	テキストはオブジェクトの左側に回り込む

属性：float

CSS
CSS1

textAlign

IE4.0 R/W
Gecko0.9.4 R

テキストの行揃え

型：文字列

left	左寄せ
right	右寄せ
center	中央揃え
justify	均等配置

属性：text-align

CSS
CSS1

textDecoration

IE4.0 R/W
Gecko0.9.4 R

テキストの装飾

型：文字列

blink	点滅
line-through	消し線
overline	上線
underline	下線

属性：text-decoration

CSS
CSS1

textDecorationBlink
textDecorationLineThrough
textDecorationNone
textDecorationOverline
textDecorationUnderline

IE4.0 R/W
Gecko

テキストを点滅させるかどうか
テキストに消し線をつけるかどうか
テキストの装飾を解除するかどうか
テキストに上線を付けるかどうか
テキストに下線を付けるかどうか

型：ブール値

true	適応する
false	適応しない

属性：なし

CSS

textIndent

IE4.0 R/W
Gecko0.9.4 R/W

テキストのインデント

型：文字列

単位	cm mm in pt pc px em ex %

属性：text-indent

CSS
CSS1

textTransform

IE4.0 R/W
Gecko0.9.4 R

テキストの表示方法

型：文字列

none	変換されない (初期値)
capitalize	各単語の最初の文字だけ大文字に変換する
uppercase	全ての文字を大文字に変換する
lowercase	全ての文字を小文字に変換する

属性：text-transform

CSS
CSS1

top

IE4.0 R/W
Gecko0.9.4 R/W

ドキュメントの上端を基準としたエレメントの位置

型：文字列

初期値	auto
単位	cm mm in pt pc px em ex %

属性：top

NS4：layers[].top

STEP.74
STEP.92
STEP.93
STEP.94
CSS
CSS2

verticalAlign

IE4.0 R/W
Gecko0.9.4 R/W

エレメントの垂直位置

型：文字列

auto	layout-flow属性の内容を整列させる
sub	テキストを下付きにする
super	テキストを上付きにする
top	エレメントのコンテントをエレメントの上端に合わせる
middle	エレメントのコンテントをエレメントの中央に合わせる
bottom	エレメントのコンテントをエレメントの下端に合わせる
baseline	エレメントのコンテントをベースラインに合わせる (初期値)
text-top	テキストをエレメントの上端に合わせる
text-bottom	テキストをエレメントの下端に合わせる

属性：vertical-align

CSS
CSS1

visibility

IE4.0 R/W
Gecko0.9.4 R

エレメントの内容を表示するかどうか

型：文字列

inherit	次の親オブジェクトを継承する (初期値)
visible	表示
hidden	非表示

display:noneと異なりvisiblityを使うと表示されていないときもそのエレメントの部分はスペースが確保される。

属性：visibility

NS4：layers[].visibility (show/hide)

STEP.88
STEP.89
STEP.94
CSS
CSS2

width

IE4.0 R/W
Gecko0.9.4 R/W

エレメントの幅

型：文字列

初期値	auto
単位	cm mm in pt pc px em ex %

このプロパティで数値演算しようとする場合には、pixelWidthまたはposWidthを使用する。

パーセンテージで指定した場合には親エレメントの幅を基準に処理される。

属性：width

CSS
CSS1
W3C(DOM1)

zIndex

IE4.0 R/W
Gecko0.9.4 R/W

配置されたエレメントの重ね順

値が大きなものが小さいものの上に重ねられる。

型：数値

属性：z-index

NS4：layers[].zIndex

CSS
CSS2