1.文字の太さを変える（font-weight）
文字の太さを変えてみましょう。文字の太さを調節するCSSプロパティは「font-weight」です。
「font-weight」には以下の値が入れられます。
- normal（標準です）
- bold
- bolder
- lighter
- 100〜900（標準は400、最高で9種類）
boldは太く、bolderはより太く、lighterは細くなります。
どれぐらいまで太くなるかは用意されているフォントによって違います。多くの太さが用意されているフォントは、最高で9種類まで太さを指定することができます。
それでは「font-weight」の値を「bold」に指定してみましょう。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p class="bold">文字を太くする</p>
</body>
</html>
サンプルCSS：
.bold {
font-weight: bold;
}
プレビュー：
2.文字を斜めにする（font-style）
文字を斜めにしてみましょう。文字を斜めにするCSSプロパティは「font-style」です。
「font-style」には以下の値が入れられます。
- normal（標準です）
- italic
- oblique
文字を斜めにする値は「italic」と「oblique」の2つあります。両方とも斜めになりますが、フォントによってはイタリック体と斜体の2パターンが用意されていることがあります。欧文フォントの場合は用意されていることがあります。フォントがitalicを持っていない場合にitalicを指定するとobliqueが適用され、その逆の場合も同様の動作となります。
それでは「font-style」の値を「italic」に指定してみましょう。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p class="italic">文字を斜体にする</p>
</body>
</html>
サンプルCSS：
.italic {
font-style: italic;
}
プレビュー：
3.文字に下線を引いてみる（text-decoration）
文字に下線を引いてみましょう。文字に下線を引くCSSプロパティは「text-decoration」です。
「text-decoration」には以下の値が入れられます。
- none（標準です）
- underline
- overline
- line-through
文字には下線だけでなく、上に線を引いたり（overline）、真ん中に線を引くことができます（line-through）。
それでは「text-decoration」の値を「underline」に指定してみましょう。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p class="underline">文字に下線を引く</p>
</body>
</html>
サンプルCSS：
.underline {
text-decoration : underline;
}
プレビュー：
