超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ フォントに関する設定 (1)

プロパティ説明
font-styleitalic斜体
normal通常(デフォルト)
font-variantsmall-caps小さい大文字
normal通常(デフォルト)
font-weightlight細い
lighter親要素の指定値より細い
normal通常(デフォルト)
bolder親要素の指定値より太い
bold太い
100〜900太さを100刻みで指定
font-sizexx-small非常に小さい
x-small小さい
smallちょっと小さい
medium通常(デフォルト)
largeちょっと大きい
x-large大きい
xx-large非常に大きい
smaller親要素の指定値より小さい
larger親要素の指定値より大きい
単位mm,cm,pt,pxなど
親要素の指定値に対する割合
line-height単位mm,cm,pt,pxなど
親要素の指定値に対する割合
倍数親要素の指定値に対して何倍か
normal通常(デフォルト)
font-familyフォント名MS ゴシックなど
serif明朝体っぽい
sans-serifゴシック体っぽい
cursive草書っぽい
fantasy装飾字体っぽい
monospace等幅フォントっぽい
fontフォントの設定をまとめて指定する

プロパティによっては他にも値がありますが、これだけ覚えておけば十分です。


◆斜体文字にする

(css file)
div{ font-style:italic; }

(html file)
<div>犬も歩けば棒にあたる。いてっ☆</div>

犬も歩けば棒にあたる。いてっ☆


◆スモールキャップ

(css file)
div.caps{ font-variant:small-caps; }

(html file)
<div>End of the World</div>
<div class="caps">End of the World</div>

End of the World
End of the World

スモールキャップを適用すると、タグに囲まれた文字列は全て大文字になり、なおかつ通常の大文字より小さく表示されます。日本語では使われません。
文字の大きさ(font-size)を指定している場合には、大文字にはなりますが小さく表示されずに指定した大きさのままです。


◆文字の太さを変える

(html file)
<div style="font-weight:light;">これがlight</div>
<div style="font-weight:lighter;">これがlighter</div>
<div style="font-weight:normal;">これがnormal</div>
<div style="font-weight:bolder;">これがbolder</div>
<div style="font-weight:bold;">これがbold</div>
<div style="font-weight:100;">これが100</div>
<div style="font-weight:200;">これが200</div>
<div style="font-weight:300;">これが300</div>
<div style="font-weight:400;">これが400</div>
<div style="font-weight:500;">これが500</div>
<div style="font-weight:600;">これが600</div>
<div style="font-weight:700;">これが700</div>
<div style="font-weight:800;">これが800</div>
<div style="font-weight:900;">これが900</div>

これがlight
これがlighter
これがnormal
これがbolder
これがbold
これが100
これが200
これが300
これが400
これが500
これが600
これが700
これが800
これが900

親要素の指定、フォントの種類、またはブラウザの対応によって太さは変わります。
結局のところ、bold だけ覚えておけばいいみたいです。


フォントに関する設定・・・次のページへつづく