スタイルシート(style)操作

スタイルシート(CSS)属性の取得・変更。普通にCSSリファレンスとしても使えます。

スタイルシート属性の取得と変更

以下のようにタグにIDを振ることにより、

<div id="sample">こんにちは</div>

↓

object = document.getElementById("sample");
object.style.color = "white";
object.style.backgroundColor = "blue";
object.style.textAlign = "center";
object.style.borderStyle = "double";
object.style.borderColor = "white";

// --></script>

↓

こんにちは

このようにスタイルシートを変更することができます。

お品書き

フォントとテキストのプロパティ

font-family
フォントの種類

font-style
イタリック体・斜体

font-variant
スモールキャップ

font-weight
太字(Bold)

font-size
文字のサイズ

letter-spacing
文字間隔(字間)

line-height
行の高さ(行間)

text-decoration
下線・上線・打ち消し線・点滅

text-transform
大文字・小文字・先頭文字を大文字へ変換

text-align
左寄せ・右寄せ・センタリング・均等割付"

text-indent
インデント(字下げ)

vertical-align
上付き・下付き・中央寄せ

色と背景のプロパティ

color
文字の色

background-color
文字の背景色

background-image
背景画像(壁紙)を指定

background-repeat
背景画像(壁紙)のリピート方法の指定

background-attachment
背景画像(壁紙)を固定するかスクロールさせるかを指定

background-position
背景画像(壁紙)の表示位置を指定

レイアウトのプロパティ

margin
領域間の余白を指定

padding
領域内の余白を指定

border-width
枠線の幅

border-style
枠線のスタイル

border-color
枠線の色

border
枠線の幅、スタイル、色を指定

float
回り込み方法の指定

clear
回り込み方法の解除

分類のプロパティ

display
要素の表示形式(ブロック・インライン)を指定

list-style-type
マーカーの種類を指定

list-style-image
マーカーに画像ファイルを指定

list-style-position
マーカーの表示位置を指定

list-style
マーカーの種類・表示位置・画像を指定

styleプロパティ一覧

styleプロパティ一覧
このブラウザで使える styleプロパティ一覧

▲TOP

font-family

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

フォントの種類を指定します。

【書式】

font-family: [[ family-name | generic-family ] , ]* [ family-name | generic-family ]

【JavaScript】

object.style.fontFamily = fontFamily

【説明】

カンマ区切りで複数指定できる。先頭から見つかったフォントが使用される。
空白文字を含むフォント名は、ダブルクォートかシングルクォートで囲む必要がある。

【初期値】

ユーザー環境に依存

【継承】

Yes

【例】

<div style="font-family: 'ヒラギノ角ゴ Pro W3';">ヒラギノ角ゴ Pro W3</div>	ヒラギノ角ゴ Pro W3
<div style="font-family: 'Hiragino Kaku Gothic Pro';">Hiragino Kaku Gothic Pro</div>	Hiragino Kaku Gothic Pro
<div style="font-family: Osaka;">Osaka</div>	Osaka
<div style="font-family: Verdana;">Verdana</div>	Verdana
<div style="font-family: Arial;">Arial</div>	Arial
<div style="font-family: 'メイリオ';">メイリオ</div>	メイリオ
<div style="font-family: Meiryo;">Meiryo</div>	Meiryo
<div style="font-family: 'ＭＳＰゴシック';">ＭＳＰゴシック</div>	ＭＳＰゴシック
<div style="font-family: 'MS PGothic';">MS PGothic</div>	MS PGothic
<div style="font-family: sans-serif;">sans-serif</div>	sans-serif

▲TOP

font-style

IE4.0 CM1.0 FX1.0 OP7.0 SF1.0

【機能】

文字のスタイル(イタリック体・斜体)を指定します。

【書式】

font-style: normal | italic | oblique

【JavaScript】

object.style.fontStyle = fontStyle

【説明】

normal	通常
italic	イタリック
oblique	斜体

【初期値】

normal

【継承】

Yes

【例】

<div style="font-style: normal;">normal</div>	normal
<div style="font-style: italic;">italic</div>	italic
<div style="font-style: oblique;">oblique</div>	oblique

▲TOP

font-variant

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

文字をスモールキャップします。

【書式】

font-variant: normal | small-caps

【JavaScript】

object.style.fontVariant = fontVariant

【説明】

normal	通常
small-caps	スモールキャップフォントで表示(表示中のフォントに依存)

【初期値】

normal

【継承】

Yes

【例】

<div style="font-variant: normal;">Normal</div>	Normal
<div style="font-variant: small-caps;">Small-Caps</div>	Small-Caps

▲TOP

font-weight

IE3.0 CM2.0 FX1.0 OP3.5 SF1.3

【機能】

文字の太さを指定します。

【書式】

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

【JavaScript】

object.style.fontWeight = fontWeight

【説明】

normal	通常
bold	太字
bolder	一段階太く (表示中のフォントに依存)
lighter	一段階細く (表示中のフォントに依存)
100 - 900	フォントの太さ (表示中のフォントに依存)

【初期値】

normal

【継承】

Yes

【例】

<div style="font-weight: normal;">normal</div>	normal
<div style="font-weight: bold;">bold</div>	bold
<div style="font-weight: 100;">100</div>	100
<div style="font-weight: 200;">200</div>	200
<div style="font-weight: 300;">300</div>	300
<div style="font-weight: 400;">400</div>	400
<div style="font-weight: 500;">500</div>	500
<div style="font-weight: 600;">600</div>	600
<div style="font-weight: 700;">700</div>	700
<div style="font-weight: 800;">800</div>	800
<div style="font-weight: 900;">900</div>	900
<div style="font-weight: normal;">normal</div>	normal
<div style="font-weight: bolder;">bolder</div>	bolder
<div style="font-weight: lighter;">lighter</div>	lighter

▲TOP

font-size

IE5.5 CM1.0 FX1.0 OP7.0 SF1.0

【機能】

文字のサイズを指定します。

【書式】

font-size: absolute-size | relative-size | length | percentage

【JavaScript】

object.style.fontSize = fontSize

【説明】

absolute-size	以下のいずれかのキーワード xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large
relative-size	相対サイズ larger \| smaller
length	単位指定の数値 (負の値は使えません) px = ピクセル単位。 em = フォントサイズを1とした時のサイズ比。0.5emは、フォントの半分のサイズ。 ex = 小文字の x を１とした時のサイズ比。
percentage	％値でサイズ指定 (負の値は使えません)

【初期値】

medium

【継承】

Yes

【例】

<div style="font-size: xx-small;">xx-small</div>	xx-small
<div style="font-size: x-small;">x-small</div>	x-small
<div style="font-size: small;">small</div>	small
<div style="font-size: medium;">通常</div>	通常
<div style="font-size: large;">large</div>	large
<div style="font-size: x-large;">x-large</div>	x-large
<div style="font-size: xx-large;">xx-large</div>	xx-large
<div style="font-size: 1.5em;">1.5em</div>	1.5em
<div style="font-size: 150%;">150%</div>	150%

▲TOP

letter-spacing

IE5.5 CM1.0 FX1.0 OP7.0 SF1.0

【機能】

文字間隔(字間)を指定します。

【書式】

letter-spacing: normal | length

【JavaScript】

object.letterSpacing = letterSpacing

【説明】

normal	標準の間隔
length	単位指定の数値 (負の値も使えます) px = ピクセル単位。 em = フォントサイズを1とした時のサイズ比。0.5emは、フォントの半分のサイズ。 ex = 小文字の x を１とした時のサイズ比。

【初期値】

normal

【継承】

Yes

【例】

<div style="letter-spacing: normal;">letter-spacing normal</div>	letter-spacing normal
<div style="letter-spacing: 5px;">letter-spacing 5px</div>	letter-spacing 5px
<div style="letter-spacing: 10px;">letter-spacing 10px</div>	letter-spacing 10px
<div style="letter-spacing: -1px;">letter-spacing -1px</div>	letter-spacing -1px

▲TOP

line-height

IE4.0 CM1.0 FX1.0 OP7.0 SF1.0

【機能】

行の高さ(行間)を指定します。

【書式】

line-height: normal | number | length | percentage

【JavaScript】

object.style.lineHeight = lineHeight

【説明】

normal	標準の間隔
number	単位指定なしの数値 (負の値は使えません) 数値にフォントサイズを掛けた値。1.5 は 150% と同じ。
length	単位指定の数値 (負の値は使えません) px = ピクセル単位。 em = フォントサイズを1とした時のサイズ比。0.5emは、フォントの半分のサイズ。 ex = 小文字の x を１とした時のサイズ比。
percentage	％値でサイズ指定 (負の値は使えません)

【初期値】

normal

【継承】

Yes

【例】

<div style="line-height: normal;">normal<br>normal<br>normal</div>	normal normal normal
<div style="line-height: 1.5;">1.5<br>1.5<br>1.5</div>	1.5 1.5 1.5
<div style="line-height: 3;">3<br>3<br>3</div>	3 3 3

▲TOP

text-decoration

IE3.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

下線・上線・打ち消し線・点滅を指定します。

【書式】

text-decoration: none | underline | overline | line-through | blink

【JavaScript】

object.style.textDecoration = textDecoration

【説明】

none	設定なし
underline	下線
overline	上線
line-through	打ち消し線
blink	点滅 IE

【初期値】

none

【継承】

【例】

<div style="text-decoration: none;">設定なし</div>	設定なし
<div style="text-decoration: underline;">下線</div>	下線
<div style="text-decoration: overline;">上線</div>	上線
<div style="text-decoration: line-through;">打ち消し線</div>	打ち消し線
<div style="text-decoration: blink;">点滅</div>	点滅
<div style="text-decoration: underline overline;">上下線</div>	上下線

▲TOP

text-transform

IE4.0 CM1.0 FX1.0 OP7.0 SF1.0

【機能】

大文字/小文字/先頭文字を大文字で表示します。

【書式】

text-transform: capitalize | uppercase | lowercase | none

【JavaScript】

object.style.textTransform (読み取り専用)

【説明】

capitalize	先頭を大文字で表示
uppercase	大文字で表示
lowercase	小文字で表示
none	設定なし

【初期値】

none

【継承】

Yes

【例】

<div style="text-transform: capitalize;">text transform capitalize</div>	text transform capitalize
<div style="text-transform: uppercase;">text transform uppercase</div>	text transform uppercase
<div style="text-transform: lowercase;">TEXT TRANSFORM LOWERCASE</div>	TEXT TRANSFORM LOWERCASE
<div style="text-transform: none;">text transform none</div>	text transform none

▲TOP

text-align

IE3.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

左寄せ/右寄せ/センタリング/均等割付を指定します。

【書式】

text-align: left | right | center | justify

【JavaScript】

object.style.textAlign = textAlign

【説明】

left	左寄せ
right	右寄せ
center	センタリング
justify	均等割付

【初期値】

left (※文章方向が右から左の国設定ではright)

【継承】

Yes

【例】

<div style="text-align: left;">left</div>	left
<div style="text-align: right;">right</div>	right
<div style="text-align: center;">center</div>	center
<div style="text-align: justify;">justify</div>	justify

▲TOP

text-indent

IE3.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

インデント(字下げ)幅を指定します。

【書式】

text-indent: length | percentage

【JavaScript】

object.style.textIndent (読み取り専用)

【説明】

length	単位指定の数値 (負の値も使えます) px = ピクセル単位。 em = フォントサイズを1とした時のサイズ比。0.5emは、フォントの半分のサイズ。 ex = 小文字の x を１とした時のサイズ比。
percentage	％値でサイズ指定 (負の値も使えます)

【初期値】

【継承】

Yes

【例】

<div style="text-indent: 0em;">インデント幅 0em</div>	インデント幅 0em
<div style="text-indent: 1em;">インデント幅 1em</div>	インデント幅 1em
<div style="text-indent: 2em;">インデント幅 2em</div>	インデント幅 2em
<div style="text-indent: 3em;">インデント幅 3em</div>	インデント幅 3em

▲TOP

vertical-align

IE4.0 CM1.0 FX1.0 OP4.0 SF1.0

- 上付き/下付きを指定します。

- vertical-align: super | sub | middle | text-top | text-bottom | top | bottom | baseline

JavaScript
- object.style.verticalAlign = verticalAlign

説明
- super 上付き
  
  sub 下付き
  
  middle 中央
  
  text-top 文字の上端
  
  text-bottom 文字の下端
  
  top テーブルセルの上端
  
  bottom テーブルセルの下端
  
  baseline ベースライン

super	上付き
sub	下付き
middle	中央
text-top	文字の上端
text-bottom	文字の下端
top	テーブルセルの上端
bottom	テーブルセルの下端
baseline	ベースライン

初期値
- baseline

継承
- No

<span style="vertical-align: super;">super</span>	薔薇super
<span style="vertical-align: sub;">sub</span>	薔薇sub
<span style="vertical-align: text-top;">text-top</span>	薔薇text-top
<span style="vertical-align: text-bottom;">text-bottom</span>	薔薇text-bottom
<span style="vertical-align: top;">top</span>	薔薇top
<span style="vertical-align: middle;">middle</span>	薔薇middle
<span style="vertical-align: bottom;">bottom</span>	薔薇bottom

▲TOP

color

IE3.0 CM1.0 FX1.0 OP3.5 SF1.0

- 文字の色を指定します。

- color: color

JavaScript
- object.style.color = color

初期値
- ユーザー環境依存

継承
- Yes

- <div style="color: #A52A2A;">文字の色</div>
  文字の色
  
  <div style="color: brown;">文字の色</div>
  文字の色

▲TOP

background-color

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

文字の背景色を指定します。

【書式】

background-color: color | transparent

【JavaScript】

object.style.backgroundColor = backgroundColor

【説明】

color	カラーコード、もしくは、カラーネーム
transparent	背景色なし

カラーコード表

【初期値】

transparent

【継承】

【例】

<div style="background-color: #00FFFF;">文字の背景色</div>	文字の背景色
<div style="background-color: cyan;">文字の背景色</div>	文字の背景色
<div style="background-color: transparent;">背景色：透明</div>	背景色：透明

▲TOP

background-image

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

背景画像(壁紙)を指定します。

【書式】

【JavaScript】

object.style.backgroundImage = URL

【説明】

url( URL )	背景画像のURL
none	背景画像なし

【初期値】

none

【継承】

【例】

<div style="background-image: url(’back.jpg');">背景画像<br>背景画像</div>	背景画像背景画像
<div style="background-image: none;">背景画像</div>	背景画像
<style type="text/css"><!-- body { background-image: url('back.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } --></style>

▲TOP

background-repeat

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

背景画像(壁紙)のリピート方法を指定します。

【書式】

background-repeat: repeat | repeat-x | repeat-y | no-repeat

【JavaScript】

object.style.backgroundRepeat = repeat

【説明】

repeat	背景画像を縦横方向に繰り返し表示
repeat-x	背景画像を横方向に繰り返し表示
repeat-y	背景画像を縦方向に繰り返し表示
no-repeat	背景画像を１つ表示するのみ

【初期値】

repeat

【継承】

【例】

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

}
--></style>

▲TOP

background-attachment

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

背景画像(壁紙)を固定するかスクロールさせるかを指定します。

【書式】

background-attachment: scroll | fixed

【JavaScript】

object.style.backgroundAttachment = scroll

【説明】

scroll	背景画像はコンテンツと一緒にスクロールする。
fixed	背景画像はコンテンツと一緒にスクロールしない。

【初期値】

scroll

【継承】

【例】

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

}
--></style>

▲TOP

background-position

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

背景画像(壁紙)の表示位置を指定します。

【書式】

background-position: [percentage | length]{1,2}
background-position: [left | center | right] [top | center | bottom]

【JavaScript】

object.style.backgroundPosition = backgroundPosition

【説明】

percentage	％値で位置を指定 (負の値も使えます)
length	単位指定の数値 (負の値も使えます) px = ピクセル単位。 em = フォントサイズを1とした時のサイズ比。0.5emは、フォントの半分のサイズ。 ex = 小文字の x を１とした時のサイズ比。
left	左端 (X座標0%と同じ)
center	中央 (X座標50%もしくはY座標50%と同じ。他に値が指定していなければ、X座標50%、Y座標50%と同じ)
right	右端 (X座標100%と同じ)
top	上端 (Y座標0%と同じ)
bottom	下端 (Y座標100%と同じ)

background-position: 20px 40px	x座標 y座標の順で位置を指定する。
background-position: center top	一番上の中央に背景画像を配置する。

【初期値】

0% 0%

【継承】

【例】

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

}
--></style>

▲TOP

margin
  margin-top
  margin-right
  margin-bottom
  margin-left

IE3.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

領域間の余白を指定します。

【書式】

margin: [ length | percentage ]{1,4}
margin-top: length | percentage
margin-right: length | percentage
margin-bottom: length | percentage
margin-left: length | percentage

【JavaScript】

object.style.margin (読み取り専用)
object.style.marginTop (読み取り専用)
object.style.marginRight (読み取り専用)
object.style.marginBottom (読み取り専用)
object.style.marginLeft (読み取り専用)

【説明】

length	単位指定の数値 (負の値も使えます) px = ピクセル単位。 em = フォントサイズを1とした時のサイズ比。0.5emは、フォントの半分のサイズ。 ex = 小文字の x を１とした時のサイズ比。
percentage	％値でサイズ指定 (負の値も使えます)

margin: length	上下左右のマージンが lengthになります。
margin: length1 length2	上下のマージンが length1、左右のマージンが length2になります。
margin: length1 length2 length3	上のマージンが length1、左右のマージンが length2、下のマージンが length3になります。
margin: length1 length2 length3 length4	上が length1、右が length2、下が length3、左が length4になります。

【初期値】

【継承】

【例】

<div style="margin: 0px;">margin 0px</div> <div style="margin: 0px;">margin 0px</div> <div style="margin: 0px;">margin 0px</div>	margin: 0px margin: 0px margin: 0px
<div style="margin: 10px;">margin 10px</div> <div style="margin: 10px;">margin 10px</div> <div style="margin: 10px;">margin 10px</div>	margin: 10px margin: 10px margin: 10px
<div style="margin: 20px;">margin 20px</div> <div style="margin: 20px;">margin 20px</div> <div style="margin: 20px;">margin 20px</div>	margin: 20px margin: 20px margin: 20px
<div style="margin: -5px 0px;">margin -5px 0px</div> <div style="margin: -5px 0px;">margin -5px 0px</div> <div style="margin: -5px 0px;">margin -5px 0px</div>	margin: -5px 0px margin: -5px 0px margin: -5px 0px

▲TOP

padding
  padding-top
  padding-right
  padding-bottom
  padding-left

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

領域内の余白を指定します。

【書式】

padding: [ length | percentage ] {1,4}
padding-top: length | percentage
padding-right: length | percentage
padding-bottom: length | percentage
padding-left: length | percentage

【JavaScript】

object.style.padding = padding
object.style.paddingTop = paddingTop
object.style.paddingBottom = paddingBottom
object.style.paddingLeft = paddingLeft

【説明】

length	単位指定の数値 (負の値は使えません) px = ピクセル単位。 em = フォントサイズを1とした時のサイズ比。0.5emは、フォントの半分のサイズ。 ex = 小文字の x を１とした時のサイズ比。
percentage	％値でサイズ指定 (負の値は使えません)

padding: length	上下左右のパディングが lengthになります。
padding: length1 length2	上下のパディングが length1、左右のパディングが length2になります。
padding: length1 length2 length3	上のパディングが length1、左右のパディングが length2、下のパディングが length3になります。
padding: length1 length2 length3 length4	上が length1、右が length2、下が length3、左が length4になります。

【初期値】

【継承】

【例】

<div style="padding: 0px;">padding 0px</div> <div style="padding: 0px;">padding 0px</div> <div style="padding: 0px;">padding 0px</div>	padding: 0px padding: 0px padding: 0px
<div style="padding: 10px;">padding 10px</div> <div style="padding: 10px;">padding 10px</div> <div style="padding: 10px;">padding 10px</div>	padding: 10px padding: 10px padding: 10px
<div style="padding: 20px;">padding 20px</div> <div style="padding: 20px;">padding 20px</div> <div style="padding: 20px;">padding 20px</div>	padding: 20px padding: 20px padding: 20px

▲TOP

border-width
  border-top-width
  border-right-width
  border-bottom-width
  border-left-width

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

枠線の幅を指定します。

【書式】

border-width: [thin | medium | thick | length]{1,4}
border-top-width: thin | medium | thick | length
border-right-width: thin | medium | thick | length
border-bottom-width: thin | medium | thick | length
border-left-width: thin | medium | thick | length

【JavaScript】

object.style.borderWidth = borderWidth
object.style.borderTopWidth = borderTopWidth
object.style.borderRightWidth = borderRightWidth
object.style.borderBottomWidth = borderBottomWidth
object.style.borderLeftWidth = borderLeftWidth

【説明】

thin	細い枠幅
medium	普通の枠幅
thick	太い枠幅
length	単位指定の数値 (負の値は使えません) px = ピクセル単位。 em = フォントサイズを1とした時のサイズ比。0.5emは、フォントの半分のサイズ。 ex = 小文字の x を１とした時のサイズ比。

border-width: length	上下左右の枠幅が lengthになります。
border-width: length1 length2	上下の枠幅が length1、左右の枠幅が length2になります。
border-width: length1 length2 length3	上の枠幅が length1、左右の枠幅が length2、下の枠幅が length3になります。
border-width: length1 length2 length3 length4	上が length1、右が length2、下が length3、左が length4になります。

【初期値】

medium

【継承】

【例】

<div style="border-style: solid; border-width: medium;">medium</div>	medium
<div style="border-style: solid; border-width: thin;">thin</div>	thin
<div style="border-style: solid; border-width: thick;">thick</div>	thick
<div style="border-style: solid; border-width: 10px;">10px</div>	10px

▲TOP

border-style
  border-top-style
  border-right-style
  border-bottom-style
  border-left-style

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

枠線のスタイルを指定します。

【書式】

【JavaScript】

object.style.borderStyle = borderStyle
object.style.borderTopStyle = borderTopStyle
object.style.borderRightStyle = borderRightStyle
object.style.borderBottomStyle = borderBottomStyle
object.style.borderLeftStyle = borderLeftStyle

【説明】

none	枠線なし
dotted	点線
dashed	破線
solid	1本線
double	2本線
groove	窪んだ線	IE
ridge	隆起した線	IE
inset	3D 窪んだ線	IE
outset	3D 隆起した線	IE

border-style: style	上下左右のスタイルが styleになります。
border-style: style1 style2	上下のスタイルが style1、左右のスタイルが style2になります。
border-style: style1 style2 style3	上のスタイルが style1、左右のスタイルが style2、下のスタイルが style3になります。
border-style: style1 style2 style3 style4	上が style1、右が style2、下が style3、左が style4になります。

【初期値】

none

【継承】

【例】

<div style="border-style: none;">none</div>	none
<div style="border-style: dotted;">dotted</div>	dotted
<div style="border-style: dashed;">dashed</div>	dashed
<div style="border-style: solid;">solid</div>	solid
<div style="border-style: double;">double</div>	double
<div style="border-style: groove;">groove</div>	groove
<div style="border-style: ridge;">ridge</div>	ridge
<div style="border-style: inset;">inset</div>	inset
<div style="border-style: outset;">outset</div>	outset

▲TOP

border-color
  border-top-color
  border-right-color
  border-bottom-color
  border-left-color

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

枠線の色を指定します。

【書式】

border-color:border-color{1,4}
border-top-color: border-color
border-right-color: border-color
border-bottom-color: border-color
border-left-color: border-color

【JavaScript】

object.style.borderColor = color
object.style.borderTopColor = color
object.style.borderRightColor = color
object.style.borderBottomColor = color
object.style.borderLeftColor = color

【説明】

color	カラーコード、もしくは、カラーネーム

カラーコード表

border-color: color	上下左右のスタイルが colorになります。
border-color: color1 color2	上下のスタイルが color1、左右のスタイルが color2になります。
border-color: color1 color2 color3	上のスタイルが color1、左右のスタイルが color2、下のスタイルが color3になります。
border-color: color1 color2 color3 color4	上が color1、右が color2、下が color3、左が color4になります。

【初期値】

ユーザー環境に依存

【継承】

【例】

blue

▲TOP

border
  border-top
  border-right
  border-bottom
  border-left

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

枠線の幅、スタイル、色を指定します。

【書式】

border: border-width || border-style || border-color
border-top: border-top-width || border-top-style || border-top-color
border-right: border-right-width || border-right-style || border-right-color
border-bottom: border-bottom-width || border-bottom-style || border-bottom-color
border-left: border-left-width || border-left-style || border-left-color

【JavaScript】

object.style.border = border
object.style.borderTop = borderTop
object.style.borderRight = borderRight
object.style.borderBottom = borderBottom
object.style.borderLeft = borderLeft

【説明】

border-width	枠線の幅 ※border-width参照
border-style	枠線のスタイル ※border-style参照
border-color	枠線の色 ※border-color参照

【初期値】

border-width、border-style、border-color 参照

【継承】

【例】

<div style="border: thick solid blue;">太い1本で青色の枠線</div>

太い1本で青色の枠線

▲TOP

float

IE4.0 CM1.0 FX1.0 OP7.0 SF1.0

【機能】

回り込み方向を指定します。

【書式】

float: left | right | none

【JavaScript】

object.styleFloat = styleFloat ~IE7
object.cssFloat = cssFloat IE8~

【説明】

left	右側に回り込み
right	左側に回り込み
none	指定なし

【初期値】

none

【継承】

【例】

<div> <img style="float: none;" src="img_0141s.gif"> 幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。 </div>	幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。
<div> <img style="float: left;" src="img_0141s.gif"> 幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。 </div>	幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。
<div> <img style="float: right;" src="img_0141s.gif"> 幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。 </div>	幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。

▲TOP

clear

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

回り込み指定を解除します。

【書式】

clear: none | left | right | both

【JavaScript】

object.style.clear = clear

【説明】

none	回り込みを解除しない
left	右側への回り込みを解除します
right	左側への回り込みを解除します
both	回り込みを解除します

【初期値】

none

【継承】

【例】

<div> <img style="float: right;" src="img_0141s.gif"> 幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。 </div> <div> 地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。 </div>	幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。
<div> <img style="float: right;" src="img_0141s.gif"> 幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。 </div> <div style="clear: right;"> 地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。 </div>	幅120m、落差20mのこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。

▲TOP

display

IE4.0 CM1.0 FX1.0 OP7.0 SF1.0

- 要素の表示形式(ブロック・インライン)を指定します。
- display: none | block | inline | list-item
JavaScript
- object.style.display = display

none	要素を非表示にします (要素が表示されるべき位置に代わりの空白も置かれない)。
block	ブロックボックスを生成します。
inline	インラインボックスを生成します。
list-item	ブロックボックスと、リストマーカ用のインラインボックスを生成します。	IE6.0
inline-block	ブロックボックスを生成し、インライン要素のように表示します。	IE5.5 FX3.0
inline-table	table要素のようなブロックボックスを生成し、インライン要素のように表示します。	IE8.0 FX3.0
table	table要素のようなブロックボックスを生成します。	IE8.0
table-caption	caption要素と同じ。	IE8.0
table-cell	td要素と同じ。	IE8.0
table-column	col要素と同じ。	IE8.0
table-column-group	colgroup要素と同じ。	IE8.0
table-footer-group	tfoot要素と同じ。	IE8.0
table-header-group	thead要素と同じ。	IE8.0
table-row	tr要素と同じ。	IE8.0
table-row-group	tbody要素と同じ。	IE8.0

初期値
- inline
継承
- No
- <div>
  この滝は、
  <img src="img_0141.gif" style="display:none;">
  原尻の滝といいます。
  </div>
  この滝は、原尻の滝といいます。

<div> この滝は、 <img src="img_0141.gif"> 原尻の滝といいます。 </div>	この滝は、原尻の滝といいます。
<div> この滝は、 <img src="img_0141.gif" style="display:block;"> 原尻の滝といいます。 </div>	この滝は、原尻の滝といいます。

- <div style="display:inline;">この滝は、</div>
  <img src="img_0141.gif">
  <div style="display:inline;">原尻の滝といいます。</div>
  この滝は、
  原尻の滝といいます。

▲TOP

list-style-type

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

マーカーを指定します。

【書式】

【JavaScript】

object.style.listStyleType = listStyleType

【説明】

disc	●
circle	○
square	■
decimal	1.
decimal-leading-zero	01.	IE8.0 OP8.0
lower-roman	i.
upper-roman	I.
lower-alpha	a.
upper-alpha	A.
none	マーカーは表示されません

【初期値】

disc

【継承】

Yes

【例】

<ul style="list-style-type: none"> <li>イヌ</li><li>ネコ</li><li>タコ</li> </ul>	イヌネコタコ
<ul style="list-style-type: disc"> <li>イヌ</li><li>ネコ</li><li>タコ</li> </ul>	イヌネコタコ
<ol style="list-style-type: decimal-leading-zero"> <li>イヌ</li><li>ネコ</li><li>タコ</li> </ol>	イヌネコタコ
<ol style="list-style-type: lower-roman"> <li>イヌ</li><li>ネコ</li><li>タコ</li> </ol>	イヌネコタコ

▲TOP

list-style-image

IE4.0 CM1.0 FX1.0 OP7.0 SF1.0

【機能】

マーカーに画像ファイルを指定します。

【書式】

list-style-image: url(URL) | none

【JavaScript】

object.style.listStyleImage = listStyleImage

【説明】

url(URL)	画像ファイルのURL
none	画像ファイルを使用しない

【初期値】

none

【継承】

Yes

【例】

イヌ
ネコ
タコ

▲TOP

list-style-position

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0

【機能】

マーカーの表示位置を指定します。

【書式】

list-style-position: inside | outside

【JavaScript】

object.style.listStylePosition = listStylePosition

【説明】

inside	リストとマーカーは同じ位置に並びます
outside	リストはマーカーの奥にインデントされます

【初期値】

outside

【継承】

Yes

【例】

<ul style="list-style-position: inside;"> <li>イヌ<BR>も歩けば棒に当たる</li> <li>ネコ<BR>に小判</li> <li>タコ<BR>焼き</li> </ul>	イヌも歩けば棒に当たるネコに小判タコ焼き
<ul style="list-style-position: outside;"> <li>イヌ<BR>も歩けば棒に当たる</li> <li>ネコ<BR>に小判</li> <li>タコ<BR>焼き</li> </ul>	イヌも歩けば棒に当たるネコに小判タコ焼き

▲TOP

list-style

IE4.0 CM1.0 FX1.0 OP7.0 SF1.0

【機能】

マーカーの種類・表示位置・画像を指定します。

【書式】

list-style: list-style-type || list-style-position || list-style-image

【JavaScript】

object.style.listStyle = listStyle

【説明】

list-style-type	マーカーの種類 ※list-style-typeを参照
list-style-position	マーカーの表示位置 ※list-style-positionを参照
list-style-image	マーカーの画像 ※list-style-imageを参照

list-style-type と list-style-image が両方とも指定されていれば、list-style-image が優先される。URLが見つからなければ、list-style-type が使われる。

【初期値】

list-style-type、list-style-position、list-style-imageを参照

【継承】

【例】

<ul style="list-style: disc outside url('../image/maru-13.gif');">
<li>イヌ<BR>も歩けば棒に当たる</li>
<li>ネコ<BR>に小判</li>
<li>タコ<BR>焼き</li>
</ul>

イヌ
も歩けば棒に当たる
ネコ
に小判
タコ
焼き

▲TOP

このブラウザの styleプロパティ一覧

▲TOP

<div style="color: #A52A2A;">文字の色</div>	文字の色
<div style="color: brown;">文字の色</div>	文字の色

スタイルシート属性の取得と変更

フォントとテキスト のプロパティ

色と背景 のプロパティ

レイアウト のプロパティ

分類のプロパティ

styleプロパティ 一覧

font-family

font-style

font-variant

font-weight

font-size

letter-spacing

line-height

text-decoration

text-transform

text-align

text-indent

vertical-align

color

background-color

background-image

background-repeat

background-attachment

background-position

margin margin-top margin-right margin-bottom margin-left

padding padding-top padding-right padding-bottom padding-left

border-width border-top-width border-right-width border-bottom-width border-left-width

border-style border-top-style border-right-style border-bottom-style border-left-style

border-color border-top-color border-right-color border-bottom-color border-left-color

border border-top border-right border-bottom border-left

float

clear

display

list-style-type

list-style-image

list-style-position

list-style

このブラウザの styleプロパティ一覧

フォントとテキストのプロパティ

色と背景のプロパティ

レイアウトのプロパティ

styleプロパティ一覧

margin
margin-top
margin-right
margin-bottom
margin-left

padding
padding-top
padding-right
padding-bottom
padding-left

border-width
border-top-width
border-right-width
border-bottom-width
border-left-width

border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

border
border-top
border-right
border-bottom
border-left