テキストを強調する標準スタイルを無効にして自由に装飾したい

HTMLにはテキストの一部分を目立たせる目的で使える要素として、strong要素・em要素・b要素・i要素などがあります。これらの要素が表す意味は、HTML4までは、

• strong要素が「より強い強調」
• em要素が「強調」
• i要素が「イタリック体」
• b要素が「太字」

として扱われていました。しかし、HTML5では、

• strong要素が「強調」：強い重要性を示す
• em要素が「強勢」：強勢したい(アクセントを付けたい)箇所を示す
• i要素が「区別」：他と区別される部分を示す(分類名、専門用語、別の言語の慣用句、字訳など)
• b要素が「注目」：重要性や意味はなく単に注目を引きたい部分を示す(キーワード、製品名など)

と定義されました。
いずれにしても、代表的なブラウザが標準で適用するスタイルでは、

• strong要素は太字で表示：This is a “strong” element.
• em要素は斜体で表示：This is an “em” element.
• i要素は斜体で表示：This is an “i” element.
• b要素は太字で表示：This is a “b” element.

のように装飾されます。
しかし、

強調や強勢を太字や斜体以外のスタイルで表示したい場合もある

強調したいからといって必ずしも太字で文字を見せたいとは限りませんよね。アクセント(強勢箇所)を示したいからといって斜体で文字を見せたいとも限りません。英語圏では斜体でアクセントを表すのも一般的なのかも知れませんが、日本語ではそもそも斜体が使われるケース自体があまりない気がします。

代表的なブラウザが上記のように標準で装飾するからといって、そのデザインをウェブページ上で採用しなければならない理由はないので、スタイルシートを使って自由に装飾すれば良いわけです。が、その際、標準の装飾(斜体や太字)を無効にしたいと思うことがあります。例えば、強調として赤色で表示させたい場合、「太字の赤色」ではなく「標準サイズの赤色」にしたいとか。

そのような場合には、まずは標準の装飾を打ち消すようにスタイルシートを記述した上で、望みの装飾を加えればよいでしょう。

ブラウザ標準の太字や斜体装飾を打ち消すCSSソース

例えば、以下のようなCSSソースを書けば標準のスタイルをなくせます。

b, strong {
   font-weight: normal;
}
i, em {
   font-style: normal;
}

最初の3行は、b要素とstrong要素を「太字ではなくす」スタイルです。
後半の3行は、em要素を「斜体ではなくす」スタイルです。
上記のように書いておけば、i要素やem要素は斜体ではなくなり、b要素やstrong要素は太字ではなくなります。つまり、標準のスタイルを無効にできるわけです。

その上で、

強調する目的で、赤色にしたり、点線を引いたり、背景色を塗ったり、波線を引いたりするCSSソースを書き加える

colorプロパティを使って赤色にしたり、background-colorプロパティを使って背景色を加えたり、そのほか下線を引いたりなど自由に装飾を加えると良いでしょう。例として、赤色で強調する場合、波線の下線で強勢を示す場合、赤色の点線で区別する場合、淡い緑色背景で注目を引く場合の書き方を掲載しておきます。

strong {
   font-weight: normal;         /* 太字にしない */
   color: red;                  /* 文字を赤色にする */
}
em {
   font-style: normal;          /* 斜体にしない */
   text-decoration: underline;  /* 下線を引く */
   text-decoration-style: wavy; /* 線種を波線にする(※) */
}
i {
   font-style: normal;            /* 斜体にしない */
   border-bottom: 1px dashed red; /* 赤色の点線を引く */
}
b {
   font-weight: normal;       /* 太字にしない */
   background-color: #ccffcc; /* 背景を淡い緑色に */
}

上記のようにスタイルシートを書いておくと、strong(強調)・em(強勢)・i・bの各要素は以下のような感じで表示されます。

※波線を引く方法は、まだ非対応のブラウザがそこそこあります。波線の引き方に関しては、ブログ側の記事「ウェブページ上で下線として波線を引く方法」でちょっと紹介しましたので別途ご参照下さい。

というわけで、ブラウザ標準のスタイルを無効化して、強調関連の要素を自由に装飾する方法の紹介でした。

(更新日：2017年07月03日)