やまでら くみこ のレシピ

テレビで話題の人気レシピをメインに紹介しています。

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

投稿日:2015年9月11日 更新日:

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で太字







おすすめ記事

【文字数カウント】いちどに複数の文章をチェックできるWebアプリ。

文字数カウンター/文字数チェッカーを作りましたので、サイト運営に役立て…

「ヘロンの公式」計算機。三角形の面積と高さを、3辺の長さから計算します。

「ヘロンの公式」計算機は、三角形の面積と高さをWeb上でカンタンに計算…

台形の面積 計算機。基本公式と高さが分からないときの求め方。

「台形の面積」計算機は、台形の面積をWeb上でカンタンに計算できる電卓…

写真の位置情報を確認するツール「Exif-GPS」。iPhone、Android、PC対応。

「Exif-GPS」は、iPhoneやAndroidなどのスマホで撮っ…

Macでデスクトップを表示する2つの方法。キーボードショートカットとトラックパッドで簡単操作。

マックでデスクトップ画面を表示する方法をご紹介します。 ウィンドウズな…

wordpress

WordPressをブルートフォースアタックから守るために、最低限やっておきたい.htaccessの設定

世界中で頻発する、WordPressを狙った不正なアタック。 その手口…