【ホームページ作成】強調部分に二重線を引きたい！

「ここは、二重線を引いて強調したい！！」と思ったことはありませんか？

HTMLで「強調」というと、太字にするくらいしか方法がありません。
斜体ではあまり強調になりませんし、下線ではリンクと間違いやすく紛らわしいでしょう。文字サイズを大きくする方法もありますが、文章中で頻繁に使うと読みにくくなってしまう可能性があります。文字色を変える方法もありますが、モノクロで印刷された場合には強調の効果がなくなってしまいます。

というわけでお勧めなのが、文字の下に二重線を引いて強調する方法です。
印刷物に手描きで強調を書き加える際に、二重線で強調することはありませんか？ウェブ上でも簡単な方法で二重線を引けますので、ぜひ試してみて下さい。

強調箇所に二重線を引くには？

二重線の下線を引くには、スタイルシートを活用します。
詳しい説明は後回しにして、まずはソースをご紹介しましょう。

<style type="text/css">
   strong { border-bottom: double red 3px; }
</style>

たったこれだけで、strong要素に対して二重下線を引くことができます。
あとは、HTMLの本文中でstrong要素を使えば、そこに強調として二重線が引かれます。

これから説明する<strong>この部分が</strong>とっても重要なのです。

これを表示すると、次のようになります。

これから説明するこの部分がとっても重要なのです。

上記のソースについての解説と、色を変えたり、太さを変えたり、線種を変える例については、次のページでご紹介致します。

それでは、次のページへ！ →