強調箇所に二重線を引く解説
それでは、前ページでご紹介したソースについて、簡単にご説明致します。
<style type="text/css">
strong { border-bottom: double red 3px; }
</style>
■strong
強調を表現したいわけですから、HTMLの要素（タグ）は、strong もしくは em を使うのが良いでしょう。 em も strong も共に「強調」を表す要素で、strongの方がより強い強調を表します。 ここでは、strong要素にスタイルを適用しています。
※em要素の場合、代表的なブラウザでは文字を斜体で表示します。斜体で表示されたくない場合は、斜体の装飾をキャンセルするスタイルを同時に記述する必要があります。（方法は後述）
■border-bottomプロパティ
ここでは、スタイルシートの border-bottom プロパティを使用しています。 このプロパティでは、下側の枠線についてのスタイルを作成できます。
上記の例では、「 double 」「 red 」「 3px 」の3つの値を指定しています。 これは、それぞれ「二重線」「赤色」「線幅3ピクセル」の意味です。（記述は順不同）
例えば、二重線を青色で引きたいなら、次のようになります。
strong { border-bottom: double blue 3px; }
線の太さが「3px」となっていますが、これは
・「二重線の上側の線」が1px
・「二重線の下側の線」が1px
・「その2本の線の間隔が1px」で合計3px
となるためです。ですから、「3px」の太さを指定していても、実際に描かれる1本の線の太さは1pxになります。
もし、二重線の線の太さを2pxにしたいのなら、スタイルシートでは太さを「5px」もしくは「6px」と記述する必要があります。
strong { border-bottom: double blue 5px; }
線種を実線ではなく点線にすることもできます。線種の指定について詳しくは、過去の記事「色も線種も線幅も自由な枠を作る」でご紹介していますので、ぜひご参照下さい。
太字をキャンセルしてスリムな強調を
代表的なブラウザでは、strong要素内の文字は太字で表示されます。 ですから、今回の場合も、文字が太字になった上で二重線が引かれます。
太字はキャンセルしたいという場合は、次のように記述します。
strong {
border-bottom: double blue 3px;
font-weight: normal;
}
font-weightプロパティに値「normal」を指定しています。このプロパティは、文字の太さを指定するプロパティで、値に「normal」を指定すると、標準の太さ（「太字」指定をしない状態）で表示されます。つまり、strong要素に標準で加えられる太字を解除できるわけです。
実際に使ってみると、次のような感じになります。
これから説明するこの部分がとっても重要なのです。
強調に em要素を使う場合は、次のようにして斜体で表示されてしまうのをキャンセルできます。
em {
border-bottom: double blue 3px;
font-style: normal;
}
おわりに
今回は、文字の強調方法として、文字の下に二重線の下線を引く方法をご紹介致しました。ぜひ活用してみて下さい。
また、以下の関連記事もぜひ一緒にご参照下さい。
【関連記事】
