強調を装飾する
最後に、スタイルシートを使って、「強調」を様々に装飾する方法をご紹介致しましょう。
以下にご紹介する表示サンプルは、すべて次のHTMLを使っています。
本文中で<strong>特に強調したい箇所</strong>に使って下さい。
strong要素に対して以下のサンプルのようにスタイルを適用することで、様々に強調を装飾することができます。
■文字色を赤色にする
スタイルシートソース：
<style type="text/css">
strong {
color: red;
}
</style>
見え方：
本文中で特に強調したい箇所に使って下さい。
■文字サイズを大きくする
スタイルシートソース：
<style type="text/css">
strong {
font-size: 150%;
}
</style>
見え方：
本文中で特に強調したい箇所に使って下さい。
■背景色を付ける
スタイルシートソース：
<style type="text/css">
strong {
background-color: #ffff80;
}
</style>
見え方：
本文中で特に強調したい箇所に使って下さい。
■色で装飾する代わりに太字を解除する
スタイルシートソース：
<style type="text/css">
strong {
color: #cc0000;
background-color: #ffffcc;
font-weight: normal;
}
</style>
見え方：
本文中で特に強調したい箇所に使って下さい。
おわりに
今回は、「強調」したい箇所には、単に装飾を施すだけではなく、強調であることを示す「strong要素（または em要素）」を使った方が良いことをご紹介致しました。
ぜひ、強調箇所には、これらの要素を使って下さい。
なお、強調を装飾する方法はもっとあります。二重線の下線を引くと、モノクロ印刷時にも強調が表現できて便利です。 記事「強調部分に二重線を引きたい！」もぜひご参照下さい。
【関連記事】
