ここでは、ホームページ上に書いた文字・文章を装飾する方法を紹介していきます。
color[文字色指定]
文字は色を指定することが出来ます。
CSSで文字色を指定するにはcolorを指定します。
記述例
[例1]赤い文字(上が6桁カラーコード,下が色名称)
color:#ff0000;
又は
color:red;
[例2]黒い文字(上が6桁カラーコード,下が色名称)
color:#000000;
又は
color:black;
font-style[フォントスタイル]
文字はフォントのスタイル(通常、イタリック、斜体)を指定することが出来ます。
CSSでフォントスタイルを指定するにはfont-styleを指定します。
| 指定可能値 |
normal(通常), italic(イタリック), oblique(斜体) |
記述例
[例1]イタリック
font-style:italic;
[例2]斜体
font-style:oblique;
font-weight[文字の太さ]
文字は太さを指定することが出来ます。
CSSで太さを指定するにはfont-weightを指定します。
| 指定可能値 |
normal(通常), bold(太字), bolder(極太), lighter(細字),
100, 200, 300, 400, 500, 600, 700, 800, 900 |
ただし、現在のブラウザで目に見えて変化するのは通常と太字の2種類のみ。
normal, lighter, 100, 200, 300, 400, 500が通常の太さ。
bold, bolder, 600, 700, 800, 900が太字になります。
記述例
[例1]太字
font-weight:bold;
font-size[文字の大きさ]
文字は大きさを指定することが出来ます。
CSSで大きさを指定するにはfont-sizeを指定します。
| 絶対指定 |
親要素に関係なく大きさを指定 |
| 指定可能値 |
xx-small, x-small, small, medium(通常),large, x-large, xx-large |
| 相対指定 |
親要素に比べて大きいか小さいか指定 |
| 指定可能値 |
larger, smaller |
| 絶対単位指定 |
親要素に関係なく大きさを指定 |
| 指定可能単位 |
in, cm, mm, pt, pc |
[補足]単位説明 |
| 相対単位指定 |
親要素に比べて大きいか小さいか指定 |
| 指定可能単位 |
em, ex, px |
[補足]単位説明 |
| 割合指定 |
親要素の文字サイズの何%の大きさか |
| 指定可能単位 |
% |
同じ記述をしてもブラウザによって表示される大きさが違うので注意が必要です。また、文字が小さすぎると読みにくくなります。とにかく色々な値・単位を記述して、どう見えるかを確かめてみるのが一番です。
記述例
[例1]大きい文字
font-size:large;
[例2]フォントサイズ16pxの文字
font-size:16px;
ホームページ上でコンテンツをまとめる時は、基本的に