スタイルシート・プロパティ一覧表

説明タグ一覧すっ飛びメニュー (ABC順)
BACKGROUND
BACKGROUND-ATTACHMENT
BACKGROUND-COLOR
BACKGROUND-IMAGE
BACKGROUND-POSITON
BACKGROUND-REPEAT
BORDER
BORDER-BOTTOM-COLOR
BORDER-BOTTOM-STYLE
BORDER-BOTTOM-WIDTH
BORDER-COLLAPSE
BORDER-COLOR
BORDER-LEFT-COLOR
BORDER-LEFT-STYLE
BORDER-LEFT-WIDTH
BORDER-RIGHT-COLOR
BORDER-RIGHT-STYLE
BORDER-RIGHT-WIDTH
BORDER-SPACING
BORDER-STYLE
BORDER-TOP-COLOR
BORDER-TOP-STYLE
BORDER-TOP-WIDTH
BORDER-WIDTH
BOTTOM
CAPTION-SIDE
CLEAR
CLIP
COLOR
CURSOR
DISPLAY
EMPTY-CELLS
FLOAT
FONT
FONT-FAMILY
FONT-SIZE
FONT-SIZE-ADJUST
FONT-STRETCH
FONT-STYLE
FONT-VARIANT
FONT-WEIGHT
HEIGHT
LEFT
LETTER-SPACING   
LINE-HEIGHT
LIST-STYLE
LIST-STYLE-IMAGE
LIST-STYLE-POSITION   
LIST-STYLE-TYPE
MARGIN
MARGIN-BOTTOM
MARGIN-LEFT
MARGIN-RIGHT
MARGIN-TOP
MAX-HEIGHT
MAX-WIDTH
MIN-HEIGHT
MIN-WIDTH
OVERFLOW
PADDING
PADDING-BOTTOM
PADDING-LEFT
PADDING-RIGHT
PADDING-TOP
POSITION
RIGHT
TABLE-LAYOUT
TEXT-ALIGN
TEXT-DECORATION
TEXT-INDENT
TEXT-SHADOW
TEXT-TRANSFORM
TOP
VERTICAL-ALIGN
VISIBILITY
WHITE-SPACE
WIDTH
WORD-SPACING
Z-INDEX

(特殊プロパティ;IE でサポート
FILTER
RUBY-ALIGN
RUBY-OVERHANG
RUBY-POSITION
SCROLLBAR-ARROW-COLOR
SCROLLBAR-DARKSHADOW-COLOR
SCROLLBAR-FACE-COLOR
SCROLLBAR-HIGHLIGHT-COLOR
SCROLLBAR-SHADOW-COLOR
SCROLLBAR-3DLIGHT-COLOR

(注1)上記のプロパティ名は大文字で記述していますが、小文字で記述しても問題ありません。 (と言うか、一般に、小文字表記の方が多い (^_^;) )

プロパティ(*1) 指定できる値 説明
COLOR RGB値(*3) /
Color Name(*4)
文字の色(BORDER プロパティの場合は枠の色)の指定。
FONT 下記 FONT 系の値 及び

LINE-HEIGHT の値
フォントプロパティの一括指定。
上記 FONT 系の値、及び LINE-HEIGHT をスペースで区切って羅列。
順番は、FONT-STYLE、FONT-VARIANT、FONT-WEIGHT、FONT-SIZE、LINE-HEIGHT、FONT-FAMILY の順。
LINE-HEIGHT の値の前には「/」をつける。
FONT-SIZE と FONT-FAMILY 以外は省略可。
FONT-FAMILY

( FONT )
フォント名 /
汎用フォント名(*5)
フォント指定。
指定フォントがインストールされてない場合の対応として、複数のフォントをカンマで区切って指定可。
(注)空白を含むフォント名は、「"」または「'」でくくること。
FONT-STRETCH

( FONT )
ultra-condensed /
extra-condensed /
condensed /
semi-condensed /
normal /
semi-expanded /
expanded /
extra-expanded /
ultra-expanded
文字幅指定。(IE、NN は非対応)
例 : ABCDEFG abcdefg 12345 あいうえお
narrower / wider 文字幅の相対指定。(IE、NN は非対応)
例 : ABCDEFG abcdefg 12345 あいうえお
FONT-STYLE

( FONT )
normal 標準の文字スタイル指定。
例 : ABCDEFG abcdefg 12345 あいうえお
italic イタリックの文字スタイル指定。
「italic」フォントがない場合は「oblique」指定とみなす。
例 : ABCDEFG abcdefg 12345 あいうえお
oblique 斜体の文字スタイル指定。
「oblique」フォントがない場合は「normal」フォントを斜体に変形する。
例 : ABCDEFG abcdefg 12345 あいうえお
FONT-VARIANT

( FONT )
normal フォントのバリエーションを指定(標準フォント指定)。
例 : ABCDEFG abcdefg 12345 あいうえお
small-caps 「small-caps」フォントを指定。
(小文字が少し小さな大文字で表示される。)
「small-caps」フォントがない場合、大文字で表示。
例 : ABCDEFG abcdefg 12345 あいうえお
FONT-WEIGHT

( FONT )
bold / normal
文字の太さ指定(太字 / 通常)。
例 : ABCDEFG / ABCDEFG
bolder / lighter
文字の太さ相対指定(より太く / より細く)。
例 : ABCDEFG / ABCDEFG
数値 (100〜900)
(100 刻み)
文字の太さ指定。数値が小さいほど細い。
「normal」は 400 相当、「bold」は 700 相当。
例 : ABCDEFG / ABCDEFG / ABCDEFG
FONT-SIZE

( FONT )
xx-small / x-small /
small / medium /
large / x-large /
xx-large
文字サイズ指定(最小 / 小 / やや小 / 中 / やや大 / 大 / 最大)。
1 ランク上がる毎に、約 1.5 倍の大きさになる。
例 : ABC / ABC / ABC / ABC / ABC / ABC / ABC
larger /
smaller
文字サイズ指定(相対的に大(1.5倍) / 小(2/3倍))。
例 : ABC / ABC / ABC / ABC / ABC
数値(*2) 文字サイズ指定。
現状の文字サイズに対する比率を指定。
例 : ABC / ABC
FONT-SIZE-ADJUST
( FONT )
実数値 複数使用される文字のサイズを調整。(IE、NN は非対応)
LINE-HEIGHT 数値(*2)/
倍数 / %
行間(1行の高さ)を直接、
または現在のフォントサイズに対する倍率または比率で指定。
例 : 150% / 100%
ABCDEFG
HIJKLMN
OPQRSTU
ABCDEFG
HIJKLMN
OPQRSTU
normal 行間(1行の高さ)を標準に指定。
WORD-SPACING 数値(*2) 単語間隔を通常の間隔に対する+/−の数値で指定。
例(+3pt): ABCDEFG abcdefg 12345 あいうえお
例(-3pt): ABCDEFG abcdefg 12345 あいうえお
normal 単語間隔指定(通常)。
LETTER-SPACING 数値(*2) 文字間隔を通常の間隔に対する+/−の数値で指定。
例(+1pt): ABCDEFG abcdefg 12345 あいうえお
例(-1pt): ABCDEFG abcdefg 12345 あいうえお
normal 文字間隔指定(通常)。
VERTICAL-ALIGN 文字の縦方向の位置揃えを指定。インラインタグ(<EM>, <A>, <IMG>等)にのみ有効。
baseline 指定範囲のベースラインを外部(親タグ)のベースラインに合わせる。
画像の場合は bottomライン。
例 :BASE STRING ABCDEFG
middle 指定範囲の縦方向の中心ラインを、外部のベースラインに
x-height の半分の高さを加えたラインに合わせる。
例 :BASE STRING ABCDEFG
sub 文字の下付きを指定。
例 :BASE STRING ABCDEFG
super 文字の上付きを指定。
例 :BASE STRING ABCDEFG
text-top 指定範囲のトップラインを外部の文字のトップラインに合わせる。
例 :BASE STRING ABCDEFG
text-bottom 指定範囲のボトムラインを外部の文字のボトムラインに合わせる。
例 :BASE STRING ABCDEFG
top 指定範囲のトップラインを揃える。
例 :BASE STRING ABCDEFG
bottom 指定範囲のボトムラインを揃える。
例 :BASE STRING ABCDEFG
指定範囲の line-height に対する比率を指定。
親タグのベースラインよりその指定分、上に表示される。
マイナスの値を指定すると下側に表示する。
TEXT-DECORATION none 文字飾り指定(なし)。
例 : EXAMPLE
underline / overline /
line-through
文字飾り指定(下線 / 上線 / 取消し線)。(スペースで区切って複数指定可)
例 : EXAMPLE, EXAMPLE, EXAMPLE, EXAMPLE
blink 文字飾り指定(点滅)。
例 : EXAMPLE
TEXT-TRANSFORM capitalize 先頭の1文字を大文字で表示。(小文字の文字列に適用)
例 : ABCDEFG abcdefg 12345 あいうえお
uppercase /
lowercase
指定範囲の英字大文字、小文字変換。(大文字化 / 小文字化)。
例(全て大文字) : ABCDEFG abcdefg 12345 あいうえお
例(全て小文字) : ABCDEFG abcdefg 12345 あいうえお
none 英字大文字、小文字変換指定なし。
TEXT-ALIGN left / center /
right / justify
横位置指定(左詰め / 中央揃え / 右詰め / 両端揃え)。
ブロック範囲指定タグ(<P>, <DIV>等)でのみ有効。
TEXT-INDENT 数値(*2) / % ブロック範囲の左端から1文字目までの距離を直接、またはブロック幅に対する比率で指定。
ブロック範囲指定タグ(<P>, <DIV>等)でのみ有効。
TEXT-SHADOW 文字に影を付ける。影の位置、長さと色を指定。(IE、NN は非対応)
例 : ABCDEFG abcdefg 12345 あいうえお
数値(*2) 3個の数値を指定。縦の移動長さ、横の移動長さ、影の長さの順。
RGB値(*3) /
Color Name(*4)
影の色指定。
none 影指定なし。(通常設定)
IE の場合は、FILTER プロパティを利用して影を付けることができます。
< DropShadow フィルタの場合 >
Color は色指定、OffX、OffY はそれぞれ横方向、縦方向の影の長さ(マイナス指定で、それぞれ左側、上側の影になる)、Positive は true 指定で通常表示、false 指定では影を透明、背景を指定色に塗りつぶす。
Positive=true 指定:
影付き文字
Positive=false 指定:
影付き文字
HTMLソース(true指定) :
<div style="filter: DropShadow(Color=#ffff00, OffX=3, OffY=3, Positive=true); height:40px; font-size:30px; font-weight:bold; color:#0000ff; padding:5px;">影付き文字</div>
< Shadow フィルタの場合 >
Color は色指定、Direction は影の方向(0-360 (45単位)で示す。上向きが 0 で右回り)、Strength は影の長さ。
影付き文字
HTMLソース :
<div style="filter: Shadow(Color=#ffff00, Direction=135, Strength=7); height:40px; font-size:30px; font-weight:bold; color:#0000ff; padding:5px;">影付き文字</div>
MARGIN ボーダーとボックス間の余白を下記の値にて指定する。
値は4つ以内で指定し、指定個数により、次のように各値が適用される。

  • 1 個指定の場合:上下左右すべて。
  • 2 個指定の場合:1 個目を上下、2 個目を左右。
  • 3 個指定の場合:1 個目を上、2 個目を左右、3 個目を下。
  • 4 個指定の場合:上、右、下、左の順。
数値(*2) ボーダーとボックス間の余白を直接指定。
ボーダーとボックス間の余白を、ボックスの幅に対する比率で指定。
MARGIN-TOP
( MARGIN )
MARGIN の

指定法に同じ
余白を指定。
MARGIN-BOTTOM
( MARGIN )
余白を指定。
MARGIN-LEFT
( MARGIN )
余白を指定。
MARGIN-RIGHT
( MARGIN )
余白を指定。
PADDING コンテンツとボーダー間の距離を下記の値にて指定する。
値は4つ以内で指定し、指定個数により、次のように各値が適用される。

  • 1 個指定の場合:上下左右すべて。
  • 2 個指定の場合:1 個目を上下、2 個目を左右。
  • 3 個指定の場合:1 個目を上、2 個目を左右、3 個目を下。
  • 4 個指定の場合:上、右、下、左の順。
数値(*2) コンテンツとボーダー間の距離を直接指定。
コンテンツとボーダー間の距離を、
コンテンツを含むボックスの幅に対する比率で指定。
PADDING-TOP
( PADDING )
PADDING の

指定法に同じ
ボーダーまでの距離を指定。
PADDING-BOTTOM
( PADDING )
ボーダーまでの距離を指定。
PADDING-LEFT
( PADDING )
ボーダーまでの距離を指定。
PADDING-RIGHT
( PADDING )
ボーダーまでの距離を指定。
BORDER BORDER-COLOR /
BORDER-WIDTH /
BORDER-STYLE
の指定法に同じ
上下左右の各枠の色、幅、形状を指定。順番は任意。
BORDER は、基本的には矩形範囲を意味するが、各枠を自由に選択し、色、幅、スタイルを指定することにより、各種の効果を生むことができる。
(ボーダーとの間隔は、PADDING プロパティで設定する)
例1 : BORDER の各種効果

例2 : BORDER の各種効果

例3 : BORDER の各種効果

例4 : BORDER の各種効果
BORDER-COLOR

( BORDER )
RGB値(*3) /
Color Name(*4)
ボーダーの色指定。4つまでの値で指定する。
指定個数により、下記のように各値が適用される。
  • 1 個指定の場合:上下左右すべて。
  • 2 個指定の場合:1 個目を上下、2 個目を左右。
  • 3 個指定の場合:1 個目を上、2 個目を左右、3 個目を下。
  • 4 個指定の場合:上、右、下、左の順。

(注)略記(BORDER)で記述する場合は、色の複数指定は無視される(最後の指定 1 個のみ有効)ので要注意。

使用例 : lime, green, black, yellow 指定 (形状:solid)
1 個指定
2 個指定
3 個指定
4 個指定
transparent 透明(特に指定しない状態と同じ)。
BORDER-TOP-COLOR
( BORDER-COLOR )
BORDER-COLOR の

指定法に同じ
ボーダーの上枠の色指定。
例 : 上枠指定
BORDER-BOTTOM-COLOR
( BORDER-COLOR )
ボーダーの下枠の色指定。
例 : 下枠指定
BORDER-LEFT-COLOR
( BORDER-COLOR )
ボーダーの左枠の色指定。
例 : 左枠指定
BORDER-RIGHT-COLOR
( BORDER-COLOR )
ボーダーの右枠の色指定。
例 : 右枠指定
BORDER-WIDTH

( BORDER )
各枠の幅を下記のいずれかの方法で4つまでの値で指定する。
指定個数により、次のように各値が適用される。

  • 1 個指定の場合:上下左右すべて。
  • 2 個指定の場合:1 個目を上下、2 個目を左右。
  • 3 個指定の場合:1 個目を上、2 個目を左右、3 個目を下。
  • 4 個指定の場合:上、右、下、左の順。
数値(*2)
ボーダーの幅指定。
例 : 3 px
例 : 6 px
例 : 10 px
thin / medium / thick
ボーダーの幅指定(薄く/中/厚く)。
例 : thin
例 : medium
例 : thick
BORDER-TOP-WIDTH
( BORDER-WIDTH )
BORDER-WIDTH の

指定法に同じ
ボーダーの上枠の幅指定。
例 : 上枠 1 px 指定
BORDER-BOTTOM-WIDTH
( BORDER-WIDTH )
ボーダーの下枠の幅指定。
例 : 下枠 1 px 指定
BORDER-LEFT-WIDTH
( BORDER-WIDTH )
ボーダーの左枠の幅指定。
例 : 左枠 1 px 指定
BORDER-RIGHT-WIDTH
( BORDER-WIDTH )
ボーダーの右枠の幅指定。
例 : 右枠 1 px 指定
BORDER-STYLE

( BORDER )
none ボーダーなし指定。(デフォルト)
solid /

double /

groove /

ridge/

inset /

outset
ボーダーの形状を指定する。

各枠の形状を4つまでの値で指定する。
指定個数により、下記のように各値が適用される。

  • 1 個指定の場合:上下左右すべて。
  • 2 個指定の場合:1 個目を上下、2 個目を左右。
  • 3 個指定の場合:1 個目を上、2 個目を左右、3 個目を下。
  • 4 個指定の場合:上、右、下、左の順。
(注)solid、double 以外の指定の場合、影の部分の色は自動的に作成される。
<色指定 : lime green green lime の場合>
solid : べた塗り double : 二重線 groove : くぼみ(枠)
ridge : 盛上り(枠) inset : くぼみ(全体) outset : 盛上り(全体)
<色指定 : green lime lime green の場合>
solid : べた塗り double : 二重線 groove : くぼみ(枠)
ridge : 盛上り(枠) inset : くぼみ(全体) outset : 盛上り(全体)
BORDER-TOP-STYLE
( BORDER-STYLE )
BORDER-STYLE の

指定法に同じ
ボーダーの上枠の形状指定。
例 : 上枠 double 指定
BORDER-BOTTOM-STYLE
( BORDER-STYLE )
ボーダーの下枠の形状指定。
例 : 下枠 double 指定
BORDER-LEFT-STYLE
( BORDER-STYLE )
ボーダーの左枠の形状指定。
例 : 左枠 double 指定
BORDER-RIGHT-STYLE
( BORDER-STYLE )
ボーダーの右枠の形状指定。
例 : 右枠 double 指定
WIDTH auto ボックス内の要素の幅を自動的に設定。
HEIGHT プロパティに実際の要素の高さと異なる値が
設定されている場合は、比例拡大・縮小する。
数値(*2) ボックス内の要素の幅指定。
ボックス内の要素の幅をボックスの幅に対する比率で指定。
MAX-WIDTH 数値(*2) / % 各枠の最大幅を指定。(IE は非対応)
例 :  ABCDEFG
ボックス内の要素の最小幅をボックスの幅に対する比率で指定。
none 指定なし。
MIN-WIDTH 数値(*2) / % 各枠の最小幅を指定。(IE は非対応)
例 :  ABCDEFG
ボックス内の要素の最小幅をボックスの幅に対する比率で指定。
none 指定なし。
HEIGHT auto ボックス内の要素の高さを自動的に設定。
WIDTH プロパティに実際の要素の幅と異なる値が
設定されている場合は、比例拡大・縮小する。
数値(*2) ボックス内の要素の高さ指定。
MAX-HEIGHT 数値(*2) / % 各枠の最大高さを指定。(IE は非対応)
ボックス内の要素の最小高さをボックスの高さに対する比率で指定。
none 指定なし。
MIN-HEIGHT 数値(*2) / % 各枠の最小高さを指定。(IE は非対応)
ボックス内の要素の最小高さをボックスの幅に対する比率で指定。
none 指定なし。
FLOAT left / right テキストをボックスの左右に配置する回り込み指定(左側 / 右側)。
left を指定すれば、当該ボックスは左側に配置され、続く要素は右側に表示。right はこの逆。
none 回り込みしない。
CLEAR left / right / both FLOAT の指定を解除(左側 / 右側 / 両側)。
none FLOAT 指定を解除しない(回り込み許可)。
BACKGROUND 下記 BACKGRONUD 系の値 背景プロパティの一括指定。
下記 BACKGRONUD 系の値をスペースで区切って羅列。順番は任意。
BACKGRUOND-COLOR

( BACKGROUND )
RGB値(*3) /
Color Name(*4)
背景色。
transparent 透明(特に指定しない状態と同じ)。
BACKGROUND-IMAGE
( BACKGROUND )
url ( 画像のURL ) 背景画像。
BACKGROUND-REPEAT

( BACKGROUND )
no-repeat
背景画像を繰返さない(1枚のみ表示)。


例 : no-repeat
repeat
背景画像を繰返す(敷詰め)。


例 : repeat
repeat-x
背景画像を一番上に水平方向に 1 列だけ繰返す。


例 : repeat-x
repeat-y
背景画像を左端に垂直方向に 1 列だけ繰返す。


例 : repeat-y
BACKGROUND-ATTACHMENT
( BACKGROUND )
scroll 背景画像のスクロールを指定。
fixed 背景画像を固定(スクロールしない)。
BACKGROUND-POSITION

( BACKGROUND )
数値(*2) 背景画像の開始位置指定。
ウィンドウの左上隅を基準に、横方向、縦方向の順に指定。
縦方向を省略した場合、50%とみなす。
背景画像の開始位置指定。
横方向、縦方向の順に指定。縦方向を省略した場合、50%とみなす。
ウィンドウの指定位置に、画像の指定位置が来るように表示。
(例) 「50% 30%」と指定すると、ウィンドウの「50% 30%」のポイントが、
   画像の「50% 30%」のポイントに一致する。
left / center / right
top / center / bottom
背景画像の表示位置を横方向、縦方向の順に指定。
縦方向を省略すると「center」指定とみなす。

例 :
no-repeat
center bottom

例 :
repeat-x
left bottom

例 :
repeat-y
right top
POSITION absolute / relative /
static
位置決めの方法指定(絶対指定 / 相対指定 / 指定無し)。
実際の位置は、TOP、BOTTOM、LEFT、RIGHT プロパティで指定。
TOP 数値(*2) / % 上枠の縦位置を直接または親レイヤーの範囲の高さに対する比率で指定。
auto 通常の縦位置指定(HTML規則に従う)。
"position:relative; top:0;" に等価。
BOTTOM 数値(*2) / % 下枠の縦位置を直接または親レイヤーの範囲の高さに対する比率で指定。
auto 通常の縦位置指定(HTML規則に従う)。
"position:relative; top:0;" に等価。
LEFT 数値(*2) / % 左枠の横位置を直接または親レイヤーの範囲の幅に対する比率で指定。
auto 通常の横位置指定(HTML規則に従う)。
"position:relative; left:0;" に等価。
RIGHT 数値(*2) / % 右枠の横位置を直接または親レイヤーの範囲の幅に対する比率で指定。
auto 通常の横位置指定(HTML規則に従う)。
"position:relative; left:0;" に等価。
Z-INDEX 整数 重なり順指定。数が大きいほど上に表示。親のレイヤーは 0 と
みなすため、親より上に表示するにはマイナスの値を指定する。
auto 重なり順指定なし。POSITION を使う順に上に重ねられる。
CLIP rect( ) POSITION プロパティで absolute 指定した場合の
クリッピング表示位置を矩形で指定。
rect(上 右 下 左)の形式で座標を指定する。
基準となる座標は、TOP や LEFT プロパティで指定した位置。
auto 標準状態を指定。
OVERFLOW auto POSITION プロパティと同時に WIDTH、HEIGHT プロパティを
指定した場合等のオーバーフロー部分の表示方法指定(自動)。
OVERFLOW プロパティは、
WIDTH、HEIGHT プロパティと同時に指定して使用します。
表示が枠をはみ出す場合の処理を指定するものです。
hidden オーバーフロー部分の表示方法指定(隠蔽)。
OVERFLOW プロパティは、
WIDTH、HEIGHT プロパティと同時に指定して使用します。
表示が枠をはみ出す場合の処理を指定するものです。
visible オーバーフロー部分の表示方法指定(全て表示)。
OVERFLOW プロパティは、
WIDTH、HEIGHT プロパティと同時に指定して使用します。
表示が枠をはみ出す場合の処理を指定するものです。
scroll オーバーフロー部分の表示方法指定(スクロール)。
OVERFLOW プロパティは、
WIDTH、HEIGHT プロパティと同時に指定して使用します。
表示が枠をはみ出す場合の処理を指定するものです。
DISPLAY block 指定範囲をボックスとして表示。
ボックスの前後で改行される。
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
inline 指定範囲をインラインのボックスとして表示。
ボックスの前後で改行されない。
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
list-item 指定範囲をリストとして表示。
リストのマークが表示され、前後で改行される。
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
none 指定範囲を表示しない。
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
VISIBILITY visible 要素の表示指定(可視)。通常の状態。
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
hidden 要素の表示指定(隠蔽)。透明にする(レイアウトは維持する)。
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
inherit 要素の表示指定(継承)。その範囲に指定された状態に従う。
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
WHITE-SPACE pre 半角空白、タブ、改行をすべて記述通りに表示。
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
normal 連続する半角空白、タブ、改行を1個の半角空白として表示。
(通常の HTML 取扱い。)
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
nowrap 連続する半角空白、タブ、改行を1個の半角空白として表示。
(<br>以外では改行しない。)
例 : ABCDEFG abcdefg 12345 あいうえお カキクケコ
LIST-STYLE LIST-STYLE-TYPE /
LIST-STYLE-IMAGE /
LIST-STYLE-POSITION
の指定に同じ
リストの記号・数値の種類、画像、位置を指定。
スペースで区切り、指定順は任意。
LIST-STYLE-TYPE

( LIST-STYLE )
disc / circle / square リストの記号・数値の種類指定(●/○/□)。
例 :
  • ABCDEFG
  • abcdefg
  • 12345
  • ABCDEFG
  • abcdefg
  • 12345
  • ABCDEFG
  • abcdefg
  • 12345
decimal /
lower-roman /
upper-roman
リストの記号・数値の種類指定(アラビア数字、ローマ数字(小文字 / 大文字))。
例 :
  • ABCDEFG
  • abcdefg
  • 12345
  • ABCDEFG
  • abcdefg
  • 12345
  • ABCDEFG
  • abcdefg
  • 12345
lower-alpha /
upper-alpha
リストの記号・数値の種類指定(アルファベット(小文字 / 大文字))。
例 :
  • ABCDEFG
  • abcdefg
  • 12345
  • ABCDEFG
  • abcdefg
  • 12345
none リストの記号・数値の種類指定(なし)。
例 :
  • ABCDEFG
  • abcdefg
  • 12345
LIST-STYLE-IMAGE

( LIST-STYLE )
url ( 画像のURL ) リストの記号用画像指定。
例 :
  • ABCDEFG
  • abcdefg
  • 12345
none リストの記号用画像を表示しない。
LIST-STYLE-TYPEのマークを使用する。
LIST-STYLE-POSITION

( LIST-STYLE )
inside リストの記号と文字位置を行頭に揃える。
(2行目の先頭がマーカーの位置と同じ。)
例 :
  • ABCDEFG
    abcdefg
  • 12345
    67890
outside リストの記号を文字位置より前に表示。(デフォルト)
例 :
  • ABCDEFG
    abcdefg
  • 12345
    67890
CURSOR マウスカーソルの形状を指定。
default 矢印型(デフォルト)。
例 : ここにマウスカーソルを当てて下さい。
crosshair 十字型。
例 : ここにマウスカーソルを当てて下さい。
pointer 人の手型(リンク部指定時の形)。
例 : ここにマウスカーソルを当てて下さい。
move 十字矢印型(移動可能時の形)。
例 : ここにマウスカーソルを当てて下さい。
text 棒型(テキスト指定時の形)。
例 : ここにマウスカーソルを当てて下さい。
wait 砂時計型(処理待ち時の形)。
例 : ここにマウスカーソルを当てて下さい。
help ?付きカーソル型。
例 : ここにマウスカーソルを当てて下さい。
e-resize /
ne-resize /
nw-resize /
n-resize /
se-resize /
sw-resize /
s-resize /
w-resize
両側矢印型(リサイズ可能時の形)。
例(e-resize) : ここにマウスカーソルを当てて下さい。
例(ne-resize) : ここにマウスカーソルを当てて下さい。
例(nw-resize) : ここにマウスカーソルを当てて下さい。
例(n-resize) : ここにマウスカーソルを当てて下さい。
例(se-resize) : ここにマウスカーソルを当てて下さい。
例(sw-resize) : ここにマウスカーソルを当てて下さい。
例(s-resize) : ここにマウスカーソルを当てて下さい。
例(w-resize) : ここにマウスカーソルを当てて下さい。
url ( 画像のURL ) 指定画像型。(注)JPG や GIF 画像ではなくカーソル画像です。アニメーションカーソルも使用できます。
例 : ここにマウスカーソルを当てて下さい。
TABLE-LAYOUT auto テーブルの表示方法(自動)。テーブルデータを全て読み込んだ後に、表示。
fixed テーブルの表示方法(固定)。テーブルデータを読み込む前に表示。但し、あらかじめ、width プロパティの指定が必要。
BORDER-COLLAPSE collapse 枠線の表示方法。各セルの枠線を重ねて表示。例 : 下記
No.1 C 260
No.2 A 170
No.3 B 90
separate 枠線の表示方法。各セルの枠線をそれぞれ表示。例 : 下記
No.1 C 260
No.2 A 170
No.3 B 90
BORDER-SPACING 数値(*2) 隣接する各セルの枠線の間隔指定。例 : 下記
No.1 C 260
No.2 A 170
No.3 B 90
No.1 C 260
No.2 A 170
No.3 B 90
EMPTY-CELLS show 空セルの枠線の表示指定。例 : 下記
No.1 C
No.2 170
B 90
hide 空セルの枠線の表示指定(非表示)。例 : 下記
No.1 C
No.2 170
B 90
CAPTION-SIDE top / bottom /
left / right
テーブルのキャプションの表示位置指定。
SCROLL-ARROW-COLOR 以下の SCROLL-xxxxxxx-COLOR プロパティは、スクロールバーの各部の色を指定する。
スライダーが動く棒の部分は、scrollbar-face-color と scrollbar-highlight-color が交互に並べられた市松模様。
通常 html, body セレクタに対して定義する。
例 :
html, body {
   scrollbar-arrow-color: black;
   scrollbar-darkshadow-color: black;
   scrollbar-face-color: #cc9900;
   scrollbar-highlight-color: white;
   scrollbar-shadow-color: #660000;
   scrollbar-3dlight-color: #cc9900;
}
HTML や BODY セレクタ以外のセレクタでも、スクロールバーが現れる場所(OVERFLOW プロパティの scroll 指定)で、任意の色のスクロールバーを作ることができます。左記の例の色指定が、このスクロールバーです。
RGB値(*3) /
Color Name(*4)
スクロールバーの矢印マークのある四角部分の色指定(矢印(三角)部)。
SCROLL-DARKSHADOW-COLOR RGB値(*3) /
Color Name(*4)
スクロールバーの矢印マークのある四角部分の色指定(右側及び下側の最も暗い部分)。
スクロールバーのスライダー部分も同じ。(以下同)
SCROLL-FACE-COLOR RGB値(*3) /
Color Name(*4)
スクロールバーの矢印マークのある四角部分の色指定(最上面(三角の回り))。
SCROLL-HIGHLIGHT-COLOR RGB値(*3) /
Color Name(*4)
スクロールバーの矢印マークのある四角部分の色指定(最上面の上側及び左側の最も明るい部分)。
SCROLL-SHADOW-COLOR RGB値(*3) /
Color Name(*4)
スクロールバーの矢印マークのある四角部分の色指定(最上面の右側及び下側の部分)。
SCROLL-3DLIGHT-COLOR RGB値(*3) /
Color Name(*4)
スクロールバーの矢印マークのある四角部分の色指定(上側及び左側の明るい部分)。
RUBY-ALIGN <RUBY>タグで使用。ルビの表示位置を指定する。
- <RUBY> タグの使用法 -

ルビをふる際に<RUBY>・<RB>・<RT>・<RP>のタグを組み合わせて使用する。
・<RUBY>...</RUBY> : <RB>・<RT>・<RP>タグをはさむ
・<RB> : ルビをふる対象の文字列を記述。
・<RT> : ルビを記述
・<RP> : ルビ表記に対応していないブラウザで表示する内容。
      通常、<RT>タグの前後で '(' と ')' を記述
例:<RUBY><RB>情報<RP>(<RT>じょうほう<RP>)</RUBY> → 情報じょうほう

  (<RUBY> タグに対応していないブラウザでは、情報(じょうほう)と表示されます)
auto
自動(ブラウザに任せる)。
例 : 宇宙開闢ビッグバン
left
表示したい文字と振りたいルビをともに左に寄せる。
例 : 宇宙開闢ビッグバン
center
表示したい文字と振りたいルビをともに中央に寄せる。
例 : 宇宙開闢ビッグバン
right
例 : 宇宙開闢ビッグバン
表示したい文字と振りたいルビをともに右に寄せる。
distribute-letter
例 : 宇宙開闢ビッグバン
ルビの均等貼り付け。
distribute-space
例 : 宇宙開闢ビッグバン
両端にスペースを入れてのルビの均等貼り付け。
line-edge
例 : 宇宙開闢ビッグバン
ルビが短い場合は中央寄せ、ルビが長い場合は左寄せ。
RUBY-OVERHANG <RUBY>タグで使用。ルビのはみ出し具合を指定する。
auto
例 : 分布ディストリビューション
自動(ブラウザに任せる)。
whitespace
例 : 分布ディストリビューション
空白文字分まではみ出す。
none
例 : 分布ディストリビューション
はみ出さない。
RUBY-POSITION <RUBY>タグで使用。ルビの表示位置を指定する。
above
例 : 分布ディストリビューション
上部に表示(デフォルト)。
inline
例 : 分布ディストリビューション
横に表示。
FILTER FILTER プロパティは、各種のフィルタを用いて、画像や文字に様々な装飾効果を付加する。各フィルタの詳細は、別ページ(Dynamic HTML インデックス)参照。以下では、代表的なフィルタとその使用例のみを示す。
Alpha ( ) FILTER 効果の例
Blur ( ) FILTER 効果の例
FlipH ( ) FILTER 効果の例
FlipV ( ) FILTER 効果の例
Glow ( ) FILTER 効果の例
Gray ( ) FILTER 効果の例
Invert ( ) FILTER 効果の例
Mask ( ) FILTER 効果の例
Wave ( ) FILTER 効果の例
Xray ( ) FILTER 効果の例

(*1) プロパティ名の下に( )で表示されているものは、略記のプロパティ名。

略記が存在するプロパティは、略記表示にて同時に複数の指定値を記述することが可能。

 (例)  style = "BACKGROUND:url(back.gif) fixed center no-repeat;"

(*2) 数値指定で使用する単位

単位 呼称 説明
in インチ 1インチは、約25.4mm。
cm センチメートル 1センチメートルは、10mm。
mm ミリメートル 1ミリメートルは、0.1cm。
pt ポイント 1ポイントは、0.35mm。
pc パイカ 1パイカは、4.3mm。
em エム 要素に指定した文字の大きさに対する比率。
ex エクス 英字の小文字「x」の大きさに対する比率。
px ピクセル 画面を表示する点 1 個分。
% パーセント ウィンドウの大きさに対する百分率。

(*3) 色指定におけるRGB値の指定は、下記が使用できる。

  • #rrggbb : 16進数にて指定。Red,Green,Blue を 00〜FF までの 256段階で指定する。
  • #rgb  : 16進数にて指定。Red,Green,Blue を 0〜F までの 16段階で指定する。
           (例) #123 は、#112233 の指定と同じ。
  • rgb(n,n,n) : 10進数にて指定。Red,Green,Blue を 0〜255 までの 256段階で指定する。
  • rgb(n%,n%,n%) : 10進数にて指定。Red,Green,Blue を 0〜100 までの百分率で指定する。

(*4)色指定における Color Name の指定は、下記の 16 種類が使用できる。

Color Name 16進コード Color Name 16進コード
white #FFFFFF   gray #808080  
red #FF0000   maroon #800000  
lime #00FF00   green #008000  
blue #0000FF   navy #000080  
yellow #FFFF00   olive #808000  
aqua #00FFFF   teal #008080  
fuchsia #FF00FF   purple #800080  
black #000000   silver #c0c0c0  

(*5) 汎用フォント名は、下記の 5 種類が使用できる。

汎用フォント名 タイプ 表示例 (20pt, bold)
serif 明朝系

ABCDEFG abcdefg 12345

sans-serif ゴシック系

ABCDEFG abcdefg 12345

cursive 手書き、草書風

ABCDEFG abcdefg 12345

fantasy 装飾系

ABCDEFG abcdefg 12345

monospace 等幅

ABCDEFG abcdefg 12345