■ フォントに関する設定 (1)
| プロパティ | 値 | 説明 |
| font-style | italic | 斜体 |
| normal | 通常（デフォルト） |
| font-variant | small-caps | 小さい大文字 |
| normal | 通常（デフォルト） |
| font-weight | light | 細い |
| lighter | 親要素の指定値より細い |
| normal | 通常（デフォルト） |
| bolder | 親要素の指定値より太い |
| bold | 太い |
| 100〜900 | 太さを100刻みで指定 |
| font-size | xx-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 | フォント名 | ＭＳ ゴシックなど |
| 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 だけ覚えておけばいいみたいです。
フォントに関する設定・・・次のページへつづく
|
