CSS 文字属性

font-style

font-style: normal
font-style: oblique
font-style: italic

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

line-height: normal
line-height: 5em
line-height: 10em
line-height: 15em

<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

「MS ゴシック」や「MS 明朝」等のフォント名

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

#test { font-family: "MS ゴシック"; }
#test { font-family: "MS ゴシック", 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 両端揃え
text-align: left
text-align: center
text-align: right

<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 複数の空白・タブをひとつの空白に置換

normal normal normal
normal normal normal

nowrap nowrap nowrap
nowrap nowrap nowrap

pre pre pre
pre pre pre

pre-wrap pre-wrap pre-wrap
pre-wrap pre-wrap pre-wrap

pre-line pre-line pre-line
pre-line pre-line 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>
水平方向距離、垂直方向距離、ぼかし半径,色

カテゴリーCSS

コメントを残す

メールアドレスが公開されることはありません。