にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

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

強調したいからといって必ずしも太字で文字を見せたいとは限りません。スタイルシートを使って自由に強調装飾を加えれば良いのですが、その際に「標準の装飾(斜体や太字)を無効にしたい」と思うことがあります。ブラウザ標準の装飾を打ち消してから自由に装飾を加える書き方を解説。

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

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ソースを書けば標準のスタイルをなくせます。

CSSソース

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

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

その上で、

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

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

CSSソース

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の各要素は以下のような感じで表示されます。

●強調したい箇所は標準の太字スタイルではなく赤色で表示されます。

●強勢箇所は標準の斜体スタイルではなく赤い波線で表示されます。(波線非対応ブラウザなら実線)

●i要素は標準の斜体スタイルではなく赤い点線で表示されます。

●b要素は標準の太字スタイルではなく淡い緑色背景で表示されます。

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

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

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---