jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

HTMLとCSSを利用した文中の文字の強調

今回は、文中の特定の単語を強調する方法をまとめておきます。

文中の文字の強調

英語の文であれば引用符””で囲んだり、下線を引いたり、文字をイタリック(斜体)やボールド(太字)にしたりします。日本語の文でも、これらの形式で単語が強調されることがあります。しかし、伝統的には単語の強調には傍点が使われてきました。これらをHTMLやCSSで行う方法をまとめましょう。

斜体・イタリック

意外にもイタリックにする方法はいろいろあります。なぜなら、いろいろな用途・理由でイタリックにするのですが、HTMLやCSSではそれらの用途・理由を識別させておこうとするからです。

  • i 斜体にするための一般的なタグです。しかし、以下のタグを適用可能な場合は、そちらを優先した方がいいでしょう。
  • em 文書の中で強調したい場所をマークします。見た目の区別として、通常、斜体で表示されます。また、文書内の重要な語句と認識されるために、検索にも影響するかもしれません。
  • address 文書の問い合わせ先、連絡先を示します。
  • cite 本や著者の名前を引用する際に用います。
  • dfn 新しく用語を定義する場合に用います。
  • var プログラムや数式で変数名に用います。
  • CSS font-style: italicまたはfont-style: obliqueで文字が斜体になります。
太字・ボールド
  • b 太字にするための一般的なタグです。セマンティックに強調したい場合には、次のstrongタグを優先した方がいいでしょう。
  • strong 文書の中で特に強調したい場所をマークするタグです。上記のemタグよりも強調されています。見た目として、通常、太字で表示されます。
  • CSS font-weight: boldまたはfont-weight: bolderで文字が太字になります。
下線
  • u 下線を引くための一般的なタグです。
  • ins 後から挿入した部分であることを示します。
  • CSS text-decoration: underlineで文字に下線がつきます。
傍点
  • CSS text-emphasis-styl:dotで傍点がつきます。ただし、このstyleはCSS3からできた方法で、現在対応しているのはSafariChromeのみのようです。さらに、この2つのブラウザでも-webkitのベンダープレフィックスを付ける必要があります。

まとめ:一見同じような強調でも実は意味が違う

以上みてきたように、表面上同じような文字の修飾であっても、実は意味や細部が違うことがあります。HTMLやCSSは、スタイルと意味を分離するためにタグを工夫しています。見た目が同じなのにタグを使い分けるなんて面倒と思うかもしれませんが、ぜひ使い分けましょう。