|
color文字の色を指定する
使用例 p { color: gray; } h1 { color: #808080; }
grayのように色の名前で指定してもいいですし#808080のように16進数で指定してもいいです。
font-size文字の大きさを指定する
使用例 body { font-size: 12px; } p { font-size: smaller; } h1 { font-size: x-large; }
フォントのサイズは数値指定、キーワード指定、親要素に対する大きさで指定など様々な指定方法があります。
キーワードで指定する
| xx-large |
非常に大きい |
| x-large |
大きい |
| large |
やや大きい |
| medium |
通常 |
| small |
やや小さい |
| x-small |
小さい |
| xx-small |
非常に小さい |
|
数値で指定する
| % |
パーセント |
| px |
ピクセル |
| em |
フォントサイズを１とする単位 |
| pt |
ポイント |
親要素に対して指定する
| larger |
親要素より１段階大きい |
| smaller |
親要素より１段階小さい |
|
font-weight文字の太さを指定する
使用例 p { font-weight: bold; } p { font-weight: normal; }
h1などの見出しタグは初めから太字に設定されています。フォントには通常と太字があるだけです。
font-style文字の斜体を指定する
使用例 p { font-style: italic; } p { font-style: normal; }
斜体にするときはitalicを使用します。何も指定しない場合はnormalがデフォルトで適用されます。
line-height行の高さを指定する
使用例 p { line-height: 150%; }
行の上辺から次の行の上辺までの高さを指定します。%指定だと100%が通常の状態、200%が1行分空いてる状態になります。
高さを指定する単位
| px |
画面の解像度によって表示サイズが異なります |
| em |
使用しているフォントの高さを基準にした値 |
| % |
パーセント（割合）での指定も可能 |
text-align行揃えを指定する
使用例 p { text-align: center; } h1 { text-align: right; }
左、真ん中、右のいずれかに行を揃えます。デフォルトでは左側に設定されています。
行揃えの値
| left |
左側に表示されます |
| center |
中央に表示されます |
| right |
右側に表示されます |
text-decoration文字の装飾を指定する
使用例 a { text-decoration: none; } h1 { text-decoration: overline; }
文字に下線などを付けたり付けなかったりできます。リンクの場合はデフォルトで下線が付くよう設定されています。
文字の装飾の指定
| none |
何も付きません |
| underline |
文字に下線を付けます |
| overline |
文字に上線を付けます |
| line-through |
文字の真ん中に取消し線を付けます |
letter-spacing文字の間隔を指定する
使用例 h3 { letter-spacing: 5px; } p { letter-spacing: 0.4em; }
値には数値＋単位でサイズ表記するか、normalで指定します。
|
