HTMLで文章の一部を太字にしたいときは、strongタグ、bタグ、CSSのfont-weightを使えます。どれも太く見えることがありますが、HTMLとしての意味は同じではありません。
重要な内容にはstrong、重要性を変えず注目させる語にはb、見た目だけを太くする場合はCSSを使います。この記事では、3つの違いと書き方、太さを数値で調整する方法、太字にならないときの確認点まで初心者向けに解説します。
HTMLで太字にする3つの方法
まずは、3つの方法を目的で使い分けましょう。見た目が似ていても、「文章の中で重要なのか」「視線を集めたいだけなのか」「デザインとして太くしたいのか」で選びます。
strong：警告や結論など、周囲より重要な内容を示すb：商品名やキーワードなど、重要性を追加せず注目させるfont-weight：見出しやボタンなど、デザインとして文字の太さを変える
単に「太く見えるから」という理由だけでタグを選ぶと、HTMLの意味が分かりにくくなります。先に文章上の役割を考え、最後に見た目をCSSで整えてください。
strongタグで重要な文字を太くする
strongタグは、内容の強い重要性、重大性、緊急性を表します。多くのブラウザでは初期状態で太字になります。
<p>
申し込み期限は<strong>8月31日まで</strong>です。
</p>上の例では、期限を見落とすと申し込みに影響するため、日付を重要な内容として示しています。開始タグ<strong>と終了タグ</strong>で、重要な文字だけを囲みます。
strongは「太字にするためだけのタグ」ではありません。CSSで普通の太さへ変更しても、HTML上の重要性は残ります。
注意や警告の先頭に使う
注意書きのラベルにも使えます。文章全体を太くするより、最初の「重要」や特に見落としてほしくない部分へ絞ると読みやすくなります。
<p>
<strong>重要：</strong>送信前に入力内容を確認してください。
</p>段落の大部分へstrongを付けると、どこが最も重要なのか分かりにくくなります。強調したい箇所を短く保ち、見出しはh1〜h6で表してください。
bタグでキーワードへ注目させる
bタグは、周囲より重要という意味を付けず、読者の注意を引きたい文字に使います。商品名、記事の要約にあるキーワード、文章中で扱う用語などが例です。
<p>
この記事では<b class="keyword">HTML</b>と
<b class="keyword">CSS</b>を解説します。
</p>この例のHTMLとCSSは、記事で扱うキーワードとして目立たせています。警告や結論のような強い重要性を表したいわけではないため、bを選んでいます。
bへクラス名を付けておくと、後からキーワードの色や太さをまとめて変更できます。目的が分かるkeywordのようなクラス名にすると管理しやすくなります。
.keyword {
color: #1d4ed8;
font-weight: 700;
}CSSのfont-weightで文字の太さを変える
文章の意味ではなく、デザインとして文字を太くしたい場合はCSSのfont-weightを使います。見出し、ナビゲーション、ボタン、カードのタイトルなど、同じ部品をまとめて変更する場面に向いています。
まず、太くしたい要素へクラスを付けます。
<p class="lead">初心者向けのHTML入門講座です。</p>この時点では、通常の段落として表示されます。次のCSSをstyle.cssへ追加すると、leadクラスを付けた文字が太くなります。
.lead {
font-weight: 700;
}font-weight: 700は一般的な太字の値です。font-weight: boldと書いても、多くの場合は同じ太さになります。
normalとboldで指定する
.text-normal {
font-weight: normal;
}
.text-bold {
font-weight: bold;
}normalは通常の太さで、数値の400に相当します。boldは太字で、数値の700に相当します。まずは400と700を使い分ければ十分です。
数値で細かく調整する
font-weightは100〜900などの数値でも指定できます。一般的には、400が通常、500がやや太い、600がセミボールド、700が太字、900が非常に太い文字です。
.card-title {
font-weight: 600;
}
.important-title {
font-weight: 700;
}指定した数値のフォントが用意されていない場合、ブラウザは利用できる近い太さを使います。そのため、同じ600でもフォントによって400や700との違いが小さいことがあります。
可変フォントでは、100〜900の間をより細かく調整できる場合があります。ただし、最初はサイトで読み込んでいるフォントが対応する太さを確認し、必要な種類だけを使いましょう。
strongとbとfont-weightの選び方
迷ったときは、CSSを無効にしても伝えたい意味が残るかを考えます。文字が重要であること自体を伝えたいならstrong、重要性は変えず視線を集めたいならb、レイアウトやデザインのためならfont-weightです。
- 申し込み期限や警告：
strong - 記事内のキーワードや商品名：
b - ナビゲーションやボタンのラベル：CSSの
font-weight - 見出し：
h1〜h6を使い、太さはCSSで調整
同じ文章の中で、何もかも太字にすると強弱がなくなります。重要な箇所を短く絞り、見出し・余白・色も組み合わせて読みやすい順序を作ってください。
見出しやヘッダーを太くする
見出しは多くのブラウザで最初から太く表示されますが、太さはCSSで調整できます。見出しを太くするために、見出しの内側へbタグを重ねる必要はありません。
<header class="site-header">
<p class="site-name">SAMPLE SITE</p>
<nav aria-label="メインナビゲーション">
<a href="/about/">私たちについて</a>
</nav>
</header>
<main>
<h1>初心者向けHTML講座</h1>
</main>HTMLではサイト名、ナビゲーション、ページの見出しをそれぞれ役割に合う要素で書きます。その後、CSSで必要な太さを指定します。
.site-name {
font-weight: 700;
}
.site-header a {
font-weight: 600;
}
h1 {
font-weight: 700;
}このように、HTMLは内容の意味、CSSは見た目を担当させると、後からデザインを一括変更できます。見出しの太さを変えても、h1というページ見出しの意味は変わりません。
太字を読みやすく使うポイント
太字だけに意味を頼らない
「太字の項目だけ必須」のように、太さだけで情報を伝えると違いに気づけない人がいます。必須項目には「必須」という文字を付け、エラーには具体的な説明も表示してください。
細すぎる文字を本文へ使わない
font-weight: 100や200の細い文字は、画面や文字色によって読みにくくなることがあります。本文は400前後を基本にし、背景とのコントラストも確認します。
太字の範囲を短くする
段落全体を太くすると、読み手が重要な部分を探せません。結論、期限、注意点など、視線を止めたい短い部分へ絞ります。
文字が太くならないときの確認点
- 終了タグがない：
</strong>や</b>まで正しく書きます。 - クラス名が違う：HTMLの
classとCSSのセレクターのつづりをそろえます。 - CSSが読み込まれていない：
linkタグのファイルパスと保存場所を確認します。 - 別のCSSに上書きされている：ブラウザの開発者ツールで、実際に適用された
font-weightを確認します。 - フォントに指定した太さがない：400、600、700など別の値で違いが出るか試します。
コードを直したらファイルを保存し、ブラウザを再読み込みします。変化が分かりにくい場合は、一時的に400と900を切り替えてCSSが適用されているか確認してみましょう。
まとめ
重要な内容にはstrong、重要性を変えず注目させる語にはb、デザインとして文字を太くする場合はCSSのfont-weightを使います。見た目だけでなく、文章の意味から方法を選ぶことが大切です。
まずは期限をstrongで囲み、見出しやボタンの太さをfont-weight: 700で調整してみてください。ブラウザで変更前後を見比べると、HTMLの意味とCSSの役割を理解しやすくなります。