HTMLでテキストを太字にする方法｜bタグ・strongタグ・font-weightの使い分け

HTMLでテキストを太字にするには、<b>タグ、<strong>タグ、またはCSSのfont-weightプロパティを使用します。

Webページをデザインしていると、特定のテキストを目立たせたい場面に出くわします。

例えば、新しい技術の使い方を説明する手順書の中に、ユーザーが必ず読むべきセキュリティ上の注意事項があるとしましょう。読者がその注意事項を見逃さないよう、強調表示しておくと効果的です。

HTMLには、テキストを太字にするための機能が標準で備わっています。この記事では、HTMLでテキストを太字にする3つの主要な方法——<b>タグ、<strong>タグ、そしてCSSのfont-weightプロパティ——について、それぞれ詳しく解説します。

HTMLの<b>タグ

開発者の間で最も広く使われているのが、<b>タグによる太字化です。<b>タグは、Webページ上で太字のテキストを表す要素を生成します。たとえば、オンライン記事の小見出しを強調したい場合などに活用できます。

<b>タグの基本的な使用例は以下の通りです。

<b>このテキストは太字です</b>

とてもシンプルですね。段落全体ではなく、一部のテキストだけを太字にしたい場合は、次のように<b>タグで該当部分を囲みます。

<p>このテキストは太字ではありません。<b>しかしこのテキストは太字です！</b></p>

このコードの表示結果は以下のようになります。

段落の冒頭は通常どおり表示され、<b>タグで囲まれた部分だけが太字になっていることが確認できます。

HTMLの<strong>タグ

<strong>タグを使っても、HTMLで太字テキストを作成できます。使い方は<b>タグとほぼ同じですが、一つ重要な違いがあります。<strong>タグは「その内容が特別な注意を要すること」を意味的に示すタグだという点です。

以下は<strong>タグの使用例です。

<p>あなたの新しいコンピューターのユーザー名は <b>JohnAppleseed</b> です</p>
<p><strong>注意！</strong> ログイン後、必ずパスワードを変更してください。</p>

コードの表示結果：

ご覧のとおり、<b>タグは読者が読んでおくと良い情報をハイライトするために使われ、<strong>タグは「注意」という言葉に特別な注意を払うべきことを伝えるために使われています。この意味的な違いを除けば、両タグの見た目上の動作は同じです。

CSSのfont-weightプロパティ

<b>タグや<strong>タグは、HTML要素の中で「このテキストは重要である」という意図を示すために使われます。一方、CSSのfont-weightプロパティを使うと、テキストの太さをより細かく制御できます。

font-weightを使えば、テキストをどれだけ太く（あるいは細く）表示するかを数値で指定できます。以下は、クラス名thickを持つ段落にfont-weightを適用した例です。

HTML：

<p>これはサンプルの段落です。</p>
<p class="thick">これは太字のサンプル段落です。</p>

CSS：

p.thick {
	font-weight: 900;
}

表示結果：

この例では、thickというクラスを定義し、その中でfont-weightを900に設定しています。これにより、thickクラスが適用されたテキストは太字で表示されます。なお、「900」という数値は目的に応じて変更可能で、値を小さくすればより細い文字に、大きくすればより太い文字になります。

また、classを使わず、style属性で直接指定する方法もあります。

<p>これはサンプルの段落です。</p>
<p style="font-weight:900;">これは太字のサンプル段落です。</p>

まとめ

太字テキストは、HTMLにおける文字装飾の重要な要素の一つです。特定の行や語句を目立たせたいときは、太字にすると効果的です。この記事では、テキストを太字にする3つの主な方法——<b>タグ、<strong>タグ、そしてCSSのfont-weightプロパティ——を解説しました。それぞれの特徴と使い分けを理解して、プロのように太字テキストを活用しましょう！