HTMLタグとCSSで太字表示する3つの方法。

公開: 更新:2016/10/16


htmlとcssで太字

ブログを書くときなどに、HTMLタグやスタイルシートでテキストを太字にする方法をご紹介します。
一番シンプルなのは、<b>タグを使う方法。

他にもいくつか方法があるので、あわせてご紹介します。

スポンサーリンク

<b>タグ

まずは、冒頭でご紹介した<b>タグを使う方法。

<b>HTML、CSSで太字</b>

【表示例】HTML、CSSで太字

<strong>タグ

続いて<strong>タグを使う方法。

<strong>HTML、CSSで太字</strong>

【表示例】HTML、CSSで太字

見た目は<b>タグと変わりませんが、こちらは文字を「強調」したい場合に使用します。

<b>タグは単なる太字表示。<strong>タグは強調表示。
とは言いつつも、あんまり気にしなくていいと思います。
ちなみに私は<strong>をいつも使っています。

CSS

最後は、CSSで太字表示する方法です。
font-wightプロパティにboldを指定します。

タグにスタイルシートを設定する場合。

<span style="font-weight:bold;">HTML、CSSで太字</span>

こちらは、ヘッダー部分にスタイルシートを記述する場合。

<style type="text/css">
span.bold-text {
font-weight:bold;
}
</style>
<span class="bold-text">HTML、CSSで太字</span>
 

見た目は、どちらもこうなります。
【表示例】HTML、CSSで太字

スポンサーリンク
スポンサーリンク
【CSS入門】回り込みを設定する時の3つのルール

CSSで意外とつまずきやすいのが、回り込み(段組み)、そしてその解除の方法です。分かってしまえばスゴク簡単なことなんですが、実は私も最初はあ...

WordPressプラグイン「Search Regex」。正規表現を使ってHTMLタグを置換する方法。

ブログ記事のHTMLタグを書き換える際には、WordPressプラグイン「Search Regex」が便利です。通常の置換はもちろん、正規表...

アスパラガスの保存方法。冷凍・冷蔵の仕方。

アスパラガスの保存方法をご紹介します。冷凍する場合は、少し硬めに塩ゆでし、食べやすい大きさに切って、ラップをして保存袋に入れます。冷蔵する場...

かぼちゃの保存。冷凍・冷蔵で日持ちさせる方法。

カボチャの保存方法をご紹介します。カボチャを冷凍する場合は、加熱してから保存袋に入れます。上の写真のように一口大にしても、マッシュした状態で...

もやしの冷凍の仕方。保存方法。

モヤシの冷凍・冷蔵の方法をご紹介します。モヤシを冷凍する場合は、さっと炒めたり熱湯をかけたり、また電子レンジで加熱するなどして軽く火を通して...