font-styleやfont-weight、text-decorationを使うことにより、文字に様々な装飾(斜体、太字、下線など)を施すことが可能です。
また、組み合わせにより斜体+太字や、太字に下線、太字に色の変更なども可能となります。
文字を斜体にする
文字を斜体にするには、プロパティにfont-styleを指定します。
font-style:値の選択;
}
font-styleでは、「italic」か「oblique」の値を選択することができます。
italicは斜体+続け文字のような表示になり、obliqueはそのまま文字を傾けたような表示になります。
例:italicに指定した場合
[CSSの記述例]font-style:italic;
}
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>文字の装飾</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p class="italic">italicの場合:italic font sample</p>
</body>
</html>
文字を太字にする
文字を太字にするには、font-weightプロパティを指定します。
font-weight:太さの値;
}
太さの値を指定するには、数値もしくはキーワードで指定することができます。
数値で指定する場合
- 100
- 200
- 300
- 400(標準のサイズ)
- 500
- 600
- 700
- 800
- 900
400が標準の太さとなります。400より値が小さければ細くなり、大きければ太くなります。
キーワードで指定する場合
キーワードで指定するには、値にboldを入力します。
[CSSの記述例]font-weight:bold;
}
boldで指定したフォントは、700と同じ太さで表示されます。
なお、値にnomalと入力すると、標準サイズ(400と同じ)太さで表示されます。
文字に様々な線を引く
文字に下線や取り消し線などの線を引く場合は、text-decorationプロパティを使用します。
text-decoration:線の種類の値;
}
選択できる値には以下の種類があります。
- line-through:取り消し線
- overline:上線
- underline:下線
なお、値にnoneを指定すると、通常表示へ戻ります。
覚えておきたいポイント
複数の組合せでアピール
特に強調したい文字がある場合、太字+カラーや太字+下線などにすると、目立って強くアピールすることができます。