CSS 文字属性

font-style

obliqueとitalicはブラウザの解釈により同じスタイルで表示される

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

font-variant

値	機能
normal	標準
small-caps	スモールキャップのフォント(小型の大文字)

AAA：normal

AAA：small-caps

font-weight

font-weight: 100

font-weight: 200

font-weight: 300

font-weight: 400(規定)

font-weight: 500

font-weight: 600

font-weight: 700

font-weight: 800

font-weight: 900

font-weight: normal(400)

font-weight: bold

font-weight: bolder(+100)

font-weight: lighter(-100)

font-size

値	機能	例
xx-small	↓の－1.2倍	xx-small
x-small	↓の－1.2倍	x-small
small	↓の－1.2倍	small
medium	標準	medium
large	↑の1.2倍	large
x-large	↑の1.2倍	x-large
xx-large	↑の1.2倍	xx-large
smaller	－1.2倍	smaller
larger	＋1.2倍	larger

例
#test { font-size: 12px; }
#test { font-size: xx-small; }

line-height

<div style="border: 1px solid gray; line-height: normal;">line-height: normal</div>
<div style="border: 1px solid gray; line-height: 5em;">line-height: 5em</div>
<div style="border: 1px solid gray; line-height: 10em;">line-height: 10em</div>

font-family

｢ＭＳ ゴシック｣や｢ＭＳ 明朝｣等のフォント名

値	機能	例
sans-serif	ゴシック系のフォント	sans-serif
serif	明朝系のフォント	serif
cursive	筆記体・草書体のフォント	cursive
fantasy	装飾的なフォント	fantasy
monospace	等幅フォント	monospace

#test { font-family: "ＭＳ ゴシック"; }
#test { font-family: "ＭＳ ゴシック", sans-serif; }
※「,」で区切ると第二候補、第三候補を指定できる

ime-mode

#test {
　ime-mode: active;
}

color

red,black等の組み込み色、#0000ff等の16進数、rgb(255,0,0)・rgb(100%, 0%, 0%)等のRGB値

値	例
black	black
red	red
gray	gray
#0000ff	#0000ff
rgb(255,0,0)	rgb(255,0,0)
rgb(100%, 0%, 0%)	rgb(100%, 0%, 0%)

#test { color: red; }

text-decoration

下線等の文字装飾

値	機能	例
line-through	打ち消し線	line-through
underline	下線	underline
overline	上線	overline
none	装飾無し	none

例
#test { text-decoration: line-through; }

text-align

行揃え

値	機能
auto	自動
left	左寄せ
center	中央寄せ
right	右寄せ
justify	両端揃え

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

letter-spacing

文字横間隔

letter-spacing: normal

letter-spacing: 1em

letter-spacing: 2em

letter-spacing: 3em

<p style="letter-spacing: normal;">letter-spacing: normal</p>
<p style="letter-spacing: 1em;">letter-spacing: 1em</p>
<p style="letter-spacing: 2em;">letter-spacing: 2em</p>
<p style="letter-spacing: 3em;">letter-spacing: 3em</p>

white-space

改行

値	自動改行	機能
normal	〇	複数の空白・タブ・改行をひとつの空白に置換
nowrap		空白・タブ・改行はそのまま表示
pre		複数の空白・タブ・改行をひとつの空白に置換
pre-wrap	〇	空白・タブ・改行はそのまま表示
pre-line	〇	複数の空白・タブをひとつの空白に置換

<div class="narrow" style="white-space: normal;">
normal normal　normal
normal normal　normal
</div>

<div class="narrow" style="white-space: nowrap;">
nowrap nowrap　nowrap
nowrap nowrap　nowrap
</div>

<div class="narrow" style="white-space: pre;">
pre pre　pre
pre pre　pre
</div>

<div class="narrow" style="white-space: pre-wrap;">
pre-wrap pre-wrap　pre-wrap
pre-wrap pre-wrap　pre-wrap
</div>

<div class="narrow" style="white-space: pre-line;">
pre-line pre-line　pre-line
pre-line pre-line　pre-line
</div>

<style>
　.narrow {
　　width: 100px;
　　border:1px solid #888;
}

table-layout

値	機能
auto	tableにおける全行の内、列幅が指定されている列の列幅を採用 表示速度：遅
fixed	tableにおける1行目の列幅で列幅を固定 表示速度：速

↑ width指定が無いので均等に列幅が自動設定されている

table-layout: auto例

width: 300px;
		width: 300px;

↑ 1、2行目のwidthで列幅が設定される
2列目は1、3列目のwidthの残りから自動計算

<table style="table-layout: auto;">
　<tr><td style="width: 300px;">width: 300px;</td><td></td><td></td></tr>
　<tr><td></td><td></td><td style="width: 300px;">width: 300px;</td></tr>
</table>

table-layout: fixed例

width: 300px;
		width: 300px;

↑ 1行目1列目のwidthは列幅が設定される
2行目2列目無視。2、3列目の列幅は自動計算

<table style="table-layout: fixed;">
　<tr><td style="width: 300px;">width: 300px;</td><td></td><td></td></tr>
　<tr><td></td><td></td><td style="width: 300px;">width: 300px;</td></tr>
</table>

text-shadow

通常

text-shadow

<span id="char5">text-shadow</span><br/><br/>
<style>
　#char5 {
　　font-size: x-large;
　　text-shadow: 3px 3px 1px gray;
　}
</style>
水平方向距離、垂直方向距離、ぼかし半径,色

ネオン風

text-shadow

<span id="char6">text-shadow</span><br/><br/>
<style>
　#char6 {
　　font-size: x-large;
　　text-shadow:
　　　0　0　3px　　gray,
　　　0　0　5px　　gray,
　　　0　0　10px　gray
　}
</style>
水平方向距離、垂直方向距離、ぼかし半径,色