【HTML入門】文字を太字にするb要素とstrong要素の違いを解説
HTML内の文字を太字にしたいときがありますよね。
HTMLのみで太字にしたいなら、b要素とstrong要素を使う方法があります。
2つの要素はどのような違いがあるのでしょうか？
今回はHTML内の文字を太字にしたいという方のために、
- b要素とstrong要素の違い
- CCS（スタイルシート）を使う方法
以上の項目に沿って、解説していきますね。
この記事を読めば、HTML内の文字を太字にする方法が分かるようになりますよ。
ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
b要素とstrong要素はどう違う？
b要素とstrong要素を使えば、文字を太字にすることが可能です。
実際にコードを書いてみますね。
<p>b要素内の文字は<b>太字で</b>表示されます。</p>
<p>strong要素内の文字も<strong>太字で</strong>表示できますが使い道が異なります。</p>上記では、どちらもタグで囲った内側の文字が太字になります。
ただし、どちらでも自由に使えるわけではなく、それぞれに別の意味があります。
b要素は、見た目を強調したいときに使います。
見た目が変わるだけで、意味としての強調はありません。
対して、strong要素は、意味を強調したいときに使用します。
この要素を使うことで、検索エンジンなどに強調したい文字だと伝えることができます。
ただ、多くの文章に使われていると、分かりづらいサイトということで、思わぬペナルティを受けることがあります。
使い過ぎは厳禁ですね。見た目を強調させたいだけの場合には、使用しないようにしましょう。
CSSを使う方法
見た目を強調したいときには、CSSを使う方法もあります。
<p>CSSを用いて文字を<span class="txt-bold">太字に</span>表示します。</p>CSSでは以下のように記述します。
.txt-bold{
font-weight: bold;
}HTML5では、見た目のスタイルはHTMLではなく、CSSで行うことが推奨されています。
特別な理由がない限りは、CSSを使って指定しましょう。
まとめ：b要素とstrong要素を使い分けよう
今回は、HTML内の文字を太字にする方法を解説してきました。
b要素とstrong要素の違いを知り、使い分けることが大事です。
CSSで装飾する方法も試してみてくださいね。
今回の記事が参考になれば幸いです。
