Wrong HTML - CSSスタイル

フォント、テキスト、背景

斜体 {font-style:値}

• none（なし）
• italic（イタリック体）
• oblique（斜体）

表示例：italicを指定しています

スモールキャピタル {font-variant:値}

• normal（通常)
• small-caps（スモールキャピタル）

表示例：small-capsを指定しています

太さ {font-weight:値}

• normal（通常の太さ）
• bold（太字）
• bolder（より太く。直前の文字の太さからの相対）
• lighter（より細く。直前の文字の太さからの相対）
• 100〜900（100刻みで指定。数値が大きいほど太くなる）

表示例：boldを指定しています,900を指定しています

サイズ {font-size:値}

• 単位
• %（基準書体に対する百分率。相対）
• xx-small（超特小）
• x-small（特小）
• small（小）
• medium（標準）
• large（大）
• x-large（特大）
• xx-large（超特大）

表示例：xx-largeを指定しています

行の高さ {line-height:値}

• 単位
• %（基準書体に対する百分率。相対）
• 数値のみ（基準書体に対する倍率。相対）

表示例：3emを指定しています

文字間隔 {letter-spacing:値}

• 単位
• %（基準書体に対する百分率。相対）

表示例：3emを指定しています

単語間隔 {word-spacing:値}

• 単位
• %（基準書体に対する百分率。相対）

表示例：Cascading Style Sheets (値は3emです)

文字色 {color:値}

表示例：視覚系UAでは文字色はBlueです。

背景色 {background-color:値}

表示例：視覚系UAでは背景色はRedです。

背景画像 {background-image:url(画像のURL)}

表示例：背景画像の例です。視覚系UAではこの文字の背景に画像が表示されます。

背景画像の繰り返し {background-repeat:値}

余白 {margin:値}（一括）、{margin-(top | bottom | left | right):値}（個別）

• 単位
• %（基準書体に対する百分率。相対）

値の一括指定の規則

• margin:1em（上下左右全て1em）
• margin:1em 5em（上下1em、左右5em）
• margin:1em 5em 2em（上1em、左右5em、下2em）
• margin:1em 2em 3em 4em（上1em、右2em、下3em、左4em）

こうなるので辺によって違う数値を指定するときなどは気をつけてください。

h1 {margin-left:3em}というふうに個別で指定できます。指定していないものは0です。

文章を囲む枠の太さ {border-width:値}（一括）、{border-(top | bottom | left | right)-width:値}（個別）

• 単位
• thin（細線）
• thick（太線）
• medium（中）

thickを指定して囲んでいます

topとbottomがthickでleftとrightはthinとして、囲んでいます。

枠の形状 {border-style:値}（一括）、{border-(top | bottom | left | right)-style:値}（個別）

• none（なし）
• hidden（なし）
• dotted（丸い点線）
• dashed（四角い点線）
• solid（実線）
• double（二重線）
• groove（へこんだ感じ）
• ridge（尖った感じ）
• inset（内容が沈んだ感じ）
• outset（内容が浮き出した感じ）

dottedを指定しているので、視覚系UAでは丸い点線で囲まれて表示されます。

視覚系UAではleft,topは四角い点線でright,bottomは尖った感じの線で囲まれています。

topとbottomだけsolidで指定しているので、枠の上下の線だけ実線で表示されます。

枠の色 {border-color:値}（一括）、{border-(top | bottom | left | right)-color:値}（個別）

紫色の実線で囲んでいます。

単位

• in（インチ。1in=25.4mm）
• cm（センチメートル）
• mm（ミリメートル）
• pt（ポイント。1pt=1/72in）
• pc（パイカ。1pc=12pt）
• px（ピクセル。表示上の1ドット幅（デバイス依存です））
• em（基準書体に対する文字の高さ。相対）
• ex（基準書体に対する文字xの高さ。相対）