[Home] [-5] [<] [>] [+5]
スタイルシート２　プロパティと値

スタイルシート上で各種の設定となるプロパティと値についてです。
【プロパティと値】
【汎用的な値】

【フォント】
プロパティ値意　味
font-familyserif
monospace		フォントファミリを指定します。
複数のフォントファミリを「,」で区切って指定できます。
一般的には「serif（明朝系）」「sans-serif（ゴシック系）」「cursive（草書系）」「fantasy」「monospace（等幅系）」などが使われます。
font-sizexx-small　x-small
small　medium
large　x-large
xx-large		フォントの大きさを指定します。
左は絶対的なサイズの指定です。
smaller相対的なサイズの指定です。
（長さ）
（割合％）		単位付きの長さと割合による指定です。
font-styleitalic
normal [×IE3]		イタリック体か標準かを選ぶことができます。
font-weightbold
bolder [×IE3]
600 [×IE3]　700 [×IE3]
800 [×IE3]　900 [×IE3]		フォントの字の太さを選べます。
数値で指定する場合、400が標準、700がbold相当ですが、100・200・300・400・500は正しく表示されない場合があります。
fontstyle variant weight size/height family上記の指定の他、variant（フォントのバリエーション）とheight（行の高さ）を一括して指定できます。
ただし、sizeとfamilyは省略できません。

【テキスト】
プロパティ値意　味
text-decorationnone
underline
line-through		文字の装飾を指定します
none（何もなし）、underline（下線付）、line-through（字消線付）です。
overline（上線付）とblink（点滅）は対応ブラウザが限られています。
vertical-alignbaseline [×IE3]
top [×IE3]
text-top [×IE3]
middle [×IE3]
bottom [×IE3]
text-bottom [×IE3]		文字と画像などの縦方向の位置を指定します。
「sub」「super」や％は対応ブラウザが限られています。
text-transformcapitalize [×IE3]
uppercase [×IE3]
lowercase [×IE3]
none [×IE3]		アルファベットのとき、大文字・小文字の指定をします。
capitalize（頭大文字）、uppercase（すべて大文字）、lowercase（すべて小文字）、none（そのまま）となります。
text-alignleft　center　right文字の行揃えをします。
text-indent（長さ）
（割合％）		左端から一行目の文頭までの距離を指定します。
単位付きの長さまたは割合を使用します。
line-height（長さ）
（割合％）
normal [×IE3]
1.5 [×IE3]		行間を指定します。
単位なしの数値で指定すると１行に対する倍率になりますが、Internet Explorer3.0では他の単位と誤解したかのように行間が詰まりますので、単位を必ず指定するか、％で指定しましょう。

【ボックス】
プロパティ値意　味
margin-top（長さ）
（割合％）
auto [×IE3]		余白を設定します。
単位付きの長さや%で指定します。
「margin」を指定するとまとめて指定できます。
値が１つの場合：「上下左右」
値が２つの場合：「上下」「左右」
値が３つの場合：「上」「左右」「下」
値が４つの場合：「上」「右」「下」「左」
margin-right
margin-bottom [×IE3]
margin-left
margin
padding-top（長さ）[×IE3]
（割合％）[×IE3]		枠（border）と内容（content）の間隔を設定します。
単位付きの長さや%で指定します。
「padding」を指定するとまとめて指定できます。
値が１つの場合：「上下左右」
値が２つの場合：「上下」「左右」
値が３つの場合：「上」「左右」「下」
値が４つの場合：「上」「右」「下」「左」
padding-right
padding-bottom
padding-left
padding
border-top-widththin [×IE3]
medium [×IE3]
thick [×IE3]
（長さ）[×IE3]		枠の太さを設定します。
thin（細）、medium（中）、thick（太）と単位付きの長さで指定します。
「border-width」を指定するとまとめて指定できます。
値が１つの場合：「上下左右」
値が２つの場合：「上下」「左右」
値が３つの場合：「上」「左右」「下」
値が４つの場合：「上」「右」「下」「左」
border-right-width
border-bottom-width
border-left-width
border-width
border-stylenone [×IE3]
solid [×IE3]
double [×IE3]
groove [×IE3]
ridge [×IE3]
inset [×IE3]
outset [×IE3]		枠（border）のスタイルをまとめて指定します。
none（枠なし：デフォルト）
solid（枠を塗りつぶした線で表示）
double（２本線）
groove（枠が凹状）
ridge（枠が凸状）
inset（全体が凹状）
outset（全体が凸状）
値が１つの場合：「上下左右」
値が２つの場合：「上下」「左右」
値が３つの場合：「上」「左右」「下」
値が４つの場合：「上」「右」「下」「左」
border-color（色）[×IE3]枠（border）の色をまとめて指定します。
値が１つの場合：「上下左右」
値が２つの場合：「上下」「左右」
値が３つの場合：「上」「左右」「下」
値が４つの場合：「上」「右」「下」「左」
border（↑上の値を使用）
[×IE3]		枠の「太さ」「スタイル」「色」をまとめて設定します。値を指定する場合は半角スペースで区切りますが、順不同です。
「border-top」「border-right」「border-bottom」「border-left」は対応ブラウザが限られています。
floatleft [×IE3]
right [×IE3]
none [×IE3]		ボックスと文章との回り込みを指定します。
<IMG>タグの「ALIGN」属性と同様です。
clearnone [×IE3]
left [×IE3]
right [×IE3]
both [×IE3]		「float」プロパティの解除をします。
<BR>タグの「CLEAR」属性と同じです。

【背景】
プロパティ値意　味
background-color（色）[×IE3]背景色を指定します。
background-image（URL）[×IE3]
none [×IE3]		背景の画像を指定します。
background-repeatrepeat [×IE3]
repeat-x [×IE3]
repeat-y [×IE3]
no-repeat [×IE3]		背景画像の並べ方を指定します。
repeat（右と下方向に繰り返します）
repeat-x（右方向に繰り返します）
repeat-y（下方向に繰り返します）
no-repeat（繰り返しません）
左上が基準です。位置を指定する「background-position」やスクロール/固定を指定する「background-attachment」の各プロパティは対応ブラウザが限られています。
background（↑上の値を使用）背景に関する指定をまとめて行います。

【その他】
プロパティ値意　味
color（色）色を指定します
list-style-typedisc [×IE3]
circle [×IE3]
square [×IE3]
decimal [×IE3]
lower-rmoan [×IE3]
upper-roman [×IE3]
lower-alpha [×IE3]
upper-alpha [×IE3]
none [×IE3]		リストのマークを指定します。
disc（●黒丸）
circle（○白丸）
square（四角）
decimal（数字）
lower-rmoan（ローマ数字小文字）
upper-roman（ローマ数字大文字）
lower-alpha（アルファベット小文字）
upper-alpha（アルファベット大文字）
none（マークなし）

【リンク色の指定】