HTML/CSSでサイト内のテキストを太字にする方法

サイトやブログにおいて、何らかの重要性を示したいときや、他の文章と区別したいときは、HTMLのbタグやstrongタグ、およびCSSのfont-weightプロパティのbold値を使ってテキストを太字にすることができます。

でも、

どのタグを使えばいいの？

と悩みがちですよね。

その場合は、以下のように分けておくと良いです。

今回は「サイト内のテキストを太字にする方法」について、HTMLタグにおけるやり方と、CSSにおけるやり方をそれぞれ解説していきます。

HTMLタグにおけるやり方

HTMLタグでテキストを太字にする方法は、

• strongタグで太字にする
• bタグで太字にする

の2通りです。

strongタグ

<strong>ここにテキストが入ります。</strong>

strongタグは、文章内のテキストのうち、最も重要性を示している部分を表すタグとなります。

サンプルコード

<h1>熱帯魚の飼育の基本</h1>
<ul>
<li><strong>毎日、1日2回エサを与えること</strong></li>
<li>2週間に1回、水換えを行うこと</li>
<li>常に、温度管理をしっかりしておくこと</li>
</ul>

ブラウザでは以下のように表示されます。

bタグ

<b>ここにテキストが入ります。</b>

bタグとは、重要性ではないものの、他の文章と区切りをつけるために使われるタグのことです。

サンプルコード

<b>メダカにエサを与える時の注意点</b>
<p>ここでは、メダカにエサを与える時の注意点について解説していきます。</p>

ブラウザでは以下のように表示されます。

CSSにおけるやり方

CSSでテキストを太字にしたい場合は、font-weightプロパティを使って、テキストを太字にしていきます。

font-weightプロパティで指定できる値

サンプルコード

HTML

<h1>メダカにエサを与える時の注意点</h1>
<p>ここでは、<span class="text">メダカにエサを与える時の注意点</span>について解説していきます。</p>

CSS

.text{font-weight: bold;}

ブラウザでは以下のように表示されます。

まとめ

というわけで、今回は「サイト内のテキストを太字にする方法」について、HTMLタグにおけるやり方と、CSSにおけるやり方をそれぞれ解説しました。

HTMLタグの場合、strongタグとbタグはそれぞれ重要性があるかどうかの違いがありますので、どちらのタグを使うかどうかは自分で判断した方が良いと思います。

この記事を書いた人

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら