ホームページ作成/テキストの配置・装飾 (HTML,CSS)

強調部分に二重線を引きたい!

「文字の下に二重線を引いて強調したい!!」と思ったことはありませんか? 文字を強調する手段は太字だけではありません。スタイルシートを使えば、二重線を引いて強調することもできます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

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

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

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

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

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

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

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

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

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

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます