HTML で文字を太字にする方法
テキストを <strong> か <b> で囲みます。どちらも太字になります。
見た目は同じです。違いは、テキストについて何を伝えるかです。
strong と b の違い
| タグ | 意味 | 例 |
|---|---|---|
<strong> | 重要、深刻、緊急な内容 | <strong>Do not</strong> share your password. |
<b> | 目立たせるが、重要度は上げない | 要約の中のキーワード、製品名、記事の書き出しの語句 |
声を大きくして伝えたいときや、読み手に見落としてほしくないときは <strong> を選びます。その種類のテキストを太字にするのが見た目の慣習であるときは <b> を選びます。どちらにも当てはまらず、ただスタイルを付けたいだけなら、クラスを付けた <span> と CSS を使いましょう。
斜体: em と i
斜体の 2 つのタグも同じ考え方です。
| タグ | 意味 | 例 |
|---|---|---|
<em> | 強調: 位置を変えると文の意味が変わる | I <em>never</em> said that. |
<i> | 普段と異なる声: 外国語、専門用語、船の名前、心の声 | <i lang="la">et cetera</i> |
上の最初の 2 文は同じ単語を使っていますが、<em> の位置によって意味が変わります。<i> で別の言語の語句を示すときは、スクリーンリーダーが正しく発音できるように lang 属性を付けましょう。
初期状態で斜体になるタグはほかにもあります: <cite> (作品のタイトル)、<dfn> (定義される用語)、<address>、<var>。当てはまるときはこれらを使い、初期のスタイルに任せましょう。
太字と斜体を同時に
一方のタグをもう一方の中に入れ、逆の順番で閉じます。
<strong><em>text</strong></em> (閉じる順番が逆) でも表示はされますが、ブラウザはツリーを修復する必要があり、要素が分割されることがあります。修復がどうなるかは タグ のページを参照してください。
CSS で太字と斜体にする
カードのタイトル、価格、ラベルなど、スタイルが見た目だけのものなら、タグを追加せずに要素自体に CSS を指定します。太字は font-weight、斜体は font-style で指定します。
最後の行は、意味と見た目が別物であることを示しています。<strong> は意味を保ったまま、CSS で別の見た目になっています。太さの全範囲 (100 から 900) は CSS の font-weight のページで解説しています。
アクセシビリティ
多くのスクリーンリーダーは、初期設定では <strong> や <em> で声の調子を変えません。そのため太字や斜体は主に視覚的な手がかりです。エラー、必須項目、締め切りなど、ユーザーが見落としてはいけない情報は、スタイルだけでなく言葉そのもので明確に伝えましょう。また、長い文章を斜体や太字にするのは避けましょう。読みにくく、特にディスレクシアのある読み手には負担になります。
よくある間違い
- 太字を見出しとして使う。 セクションの上にある
<b>のテキストの行は、スクリーンリーダーにとって見出しではありません。<h2>や<h3>を使ってスタイルを付けましょう。 - スタイルのために
<strong>を使う。 テキストに重要な点がないなら、<b>か CSS を使いましょう。 - 段落全体を太字にする。 強調はまれにあるから効きます。段落ではなく語句を 1 つだけ太字にしましょう。
- 閉じる順番を間違える。
<b><i>x</i></b>が正しく、<b><i>x</b></i>は誤りです。 - 古いタグを使う。 古いチュートリアルにある
<font>タグは廃止されています。上のタグかfont-weightを使いましょう。
よくある質問
HTML で文字を太字にするには？
語句が重要なら <strong> で囲みます (<strong>Warning:</strong>)。製品名のように、重要度は上げずに目立たせたいだけなら <b> で囲みます。どちらも初期状態で太字になります。
<strong> と <b> の違いは何ですか？
<strong> はテキストが重要、深刻、緊急であることを表します。<b> は要約の中のキーワードなど、重要度を示さずに注意を引きます。見た目は同じで、違いは意味です。その意味はスクリーンリーダー、検索エンジン、他の開発者にとって重要です。
HTML で文字を斜体にするには？
文の意味を変える強調には <em> を使います (「I did say that」の did を強く読む場合など)。外国語、専門用語、船の名前、心の声など、普段と異なる声のテキストには <i> を使います。どちらも斜体で表示されます。
太字と斜体を同時に適用するには？
タグを入れ子にします: <strong><em>text</em></strong>。開いたのと逆の順番で閉じましょう。CSS なら 1 つの要素に font-weight: bold と font-style: italic の両方を指定します。
CSS で太字にしてもいいですか？
はい。どの要素にも font-weight: bold (または 700) を指定できます。ボタンのラベルや表の見出しのスタイルのように、太字が見た目だけのものなら CSS を使い、語句そのものが重要だったり強調されていたりするなら HTML のタグを使います。
