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

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

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

以下のようにタグにIDを振ることにより、
<div id="sample">こんにちは</div>
<script type="text/javascript"><!--
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>
こんにちは
このようにスタイルシートを変更することができます。

お品書き
▲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: 'MS Pゴシック';">MS Pゴシック</div>
MS Pゴシック
<div style="font-family: 'MS PGothic';">MS PGothic</div>
MS PGothic
<div style="font-family: sans-serif;">sans-serif</div>
sans-serif

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

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

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

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 を1とした時のサイズ比。
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%

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 を1とした時のサイズ比。
【初期値】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

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 を1とした時のサイズ比。
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

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
【継承】No
【 例 】
<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>
上下線

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

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

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 を1とした時のサイズ比。
percentage%値でサイズ指定 (負の値も使えます)
【初期値】0
【継承】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

vertical-align

IE4.0 CM1.0 FX1.0 OP4.0 SF1.0
▲TOP

color

IE3.0 CM1.0 FX1.0 OP3.5 SF1.0
▲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
【継承】No
【 例 】
<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
【機能】背景画像(壁紙)を指定します。
【書式】background-image: url(URL) | none
【JavaScript】object.style.backgroundImage = URL
【説明】
url( URL )背景画像のURL
none背景画像なし
【初期値】none
【継承】No
【 例 】
<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>

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背景画像を1つ表示するのみ
【初期値】repeat
【継承】No
【 例 】
<style type="text/css"><!--
body {
background-image: url('back.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
--></style>

background-attachment

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0
【機能】背景画像(壁紙)を固定するかスクロールさせるかを指定します。
【書式】background-attachment: scroll | fixed
【JavaScript】object.style.backgroundAttachment = scroll
【説明】
scroll背景画像はコンテンツと一緒にスクロールする。
fixed背景画像はコンテンツと一緒にスクロールしない。
【初期値】scroll
【継承】No
【 例 】
<style type="text/css"><!--
body {
background-image: url('back.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
--></style>

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 を1とした時のサイズ比。
left左端 (X座標0%と同じ)
center中央 (X座標50%もしくはY座標50%と同じ。他に値が指定していなければ、X座標50%、Y座標50%と同じ)
right右端 (X座標100%と同じ)
top上端 (Y座標0%と同じ)
bottom下端 (Y座標100%と同じ)
background-position: 20px 40pxx座標 y座標 の順で位置を指定する。
background-position: center top一番上の中央に背景画像を配置する。
【初期値】0% 0%
【継承】No
【 例 】
<style type="text/css"><!--
body {
background-image: url('back.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
--></style>

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 を1とした時のサイズ比。
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になります。
【初期値】0
【継承】No
【 例 】
<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

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 を1とした時のサイズ比。
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になります。
【初期値】0
【継承】No
【 例 】
<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

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 を1とした時のサイズ比。
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
【継承】No
【 例 】
<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

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

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0
【機能】枠線のスタイルを指定します。
【書式】 border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-right-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-bottom-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-left-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
【JavaScript】 object.style.borderStyle = borderStyle
object.style.borderTopStyle = borderTopStyle
object.style.borderRightStyle = borderRightStyle
object.style.borderBottomStyle = borderBottomStyle
object.style.borderLeftStyle = borderLeftStyle
【説明】
none枠線なし
dotted点線
dashed破線
solid1本線
double2本線
groove窪んだ線IE
ridge隆起した線IE
inset3D 窪んだ線IE
outset3D 隆起した線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
【継承】No
【 例 】
<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

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になります。
【初期値】ユーザー環境に依存
【継承】No
【 例 】
<div style="border-style: solid; border-color: blue;">blue</div>
blue

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 参照
【継承】No
【 例 】
<div style="border: thick solid blue;">太い1本で青色の枠線</div>
太い1本で青色の枠線

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
【継承】No
【 例 】
<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のこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。

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
【継承】No
【 例 】
<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のこの滝は、日本の滝百選にも選ばれている大分県の『原尻の滝』です。
地元では、勝手に「東洋のナイアガラ」とか「大分のナイアガラ」と呼んでいます。

display

IE4.0 CM1.0 FX1.0 OP7.0 SF1.0
▲TOP

list-style-type

IE4.0 CM1.0 FX1.0 OP3.5 SF1.0
【機能】マーカーを指定します。
【書式】list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
【JavaScript】object.style.listStyleType = listStyleType
【説明】
disc
circle
square
decimal1.
decimal-leading-zero 01.IE8.0 OP8.0
lower-romani.
upper-romanI.
lower-alphaa.
upper-alphaA.
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>
  1. イヌ
  2. ネコ
  3. タコ
<ol style="list-style-type: lower-roman">
<li>イヌ</li><li>ネコ</li><li>タコ</li>
</ol>
  1. イヌ
  2. ネコ
  3. タコ

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
【 例 】
<ul style="list-style-image: url('maru-13.gif');">
<li>イヌ</li><li>ネコ</li><li>タコ</li>
</ul>
  • イヌ
  • ネコ
  • タコ

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>
  • イヌ
    も歩けば棒に当たる
  • ネコ
    に小判
  • タコ
    焼き

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を参照
【継承】No
【 例 】
<ul style="list-style: disc outside url('../image/maru-13.gif');">
<li>イヌ<BR>も歩けば棒に当たる</li>
<li>ネコ<BR>に小判</li>
<li>タコ<BR>焼き</li>
</ul>
  • イヌ
    も歩けば棒に当たる
  • ネコ
    に小判
  • タコ
    焼き

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

▲TOP