こんなことに悩んでいませんか？
「ここは目立たせたいから。」などの理由でなんとなくbタグを使っている方、けっこう多いですよね。
今回は、そんなbタグについてよく理解していない方に向けて、
・類似タグとの違いと使い分け
・CSSで文字を太字にする方法
について解説していきます。
文章を太字にするためのbタグですが、実は、文章の意味や目的によって使い分ける必要があります。
html初心者さんや、bタグの使い方を知りたい人は、ぜひ最後までご覧ください。
目次
bタグとは
bタグの読み方
bタグは「bold（ボールド）」の略で、「ビータグ」と読むことが一般的です。
日本語では「大胆な、力強い」などと訳されます。
bタグの説明
bタグは、キーワードや何かの名称など、他と区別したい文章に対して使用するタグです。
このタグで囲った文章は、ウェブブラウザ上や印刷する際に【太字】になるという効果があります。
また、同じ効果を持つタグにstrongタグと言うものがありますが、Googleやsafariなどの検索エンジンに対して「ここが重要なんですよ！」と伝える役割もあるstrongタグに対して、bタグは単純に文字を字にするだけ。
つまり、重要ではないけど注意を引きたい文字に使用するタグということですね。
文字を太字にするなどの【装飾】は、HTMLとは別の言語であるCSSでできるからです。後ほど詳しく解説します。
bタグで利用できる属性
bタグはグローバル属性のため、全てのHTML要素で使用可能です。
対応ブラウザ
対応ブラウザは以下のとおりです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
bタグの基本的な使い方
bタグの使い方
それではさっそくbタグの基本的な使い方について解説していきます。
とはいえ使い方はとってもカンタン。他と区別したい箇所をタグで囲むだけです。
|
1 2 3 4 5 |
<p> bタグの使い方はとってもカンタン。 <b>太字にしたい箇所</b>を 囲むだけです。 </p> |
結果はコチラ
実際に使うシーンですが、bタグは重要ではないけど強調したい部分に使用するため、注意事項や何かの固有名称、また、以下のような案内文でよく見かけますね。
日時：令和〇年〇月〇日（〇）〇時～
場所：横浜赤レンガ倉庫
住所：横浜市中区新港～
bタグと類似する要素との違い
冒頭でも少し触れましたが、文字を太字にするbタグには似たような効果や目的を持つタグがいくつかあります。
これまでよく分からずに使っていた方も、しっかりとその違いを理解し、使い分けができるようになりましょう。
類似タグを一覧にまとめると次のとおり。
| 見た目と意味の強調(強勢) | 見た目のみ強調(強勢) | |
|---|---|---|
| 文字を太くする | strongタグ | bタグ |
| 文字を斜体にする | emタグ | iタグ |
それぞれ簡単に解説していきます。
strongタグ
strongタグはその名のとおり、タグで囲った文章を太字にして、【強調】の意味を持たせる効果があります。
bタグが単純に文字を太字にするのに対して、strongタグはGoogleやSafariなどの「検索エンジン」に
と伝える効果もあります。
見た目と意味を強めるのがstrong、見た目だけを変えるのがbと覚えましょう。
emタグ
emタグは「emphasis（強調）」の略で、タグで囲った文章を【斜体】にする効果があります。
また、検索エンジンに対して「重要な部分」を伝えるstrongタグに対し、emタグは「際立たせたい部分」を伝える役割もあります。
「際立たせる？重要と何が違うの？」と思う方もいると思うので、「昔々あるところにお爺さんとお婆さんがいました。」という文章で例えますね。
|
1 2 3 4 5 |
・<em>昔々</em>あるところにお爺さんとお婆さんがいました。 ⇒お爺さんとお婆さんがいたのは最近ではなく「昔」であることを強調。 ・昔々あるところに<em>お爺さんとお婆さん</em>がいました。 ⇒いたのは若者ではなく、「お爺さんとお婆さん」であることを強調。 |
強調する部分によって、文章のニュアンスがなんとなく変わったかと思います。
アクセントをつけたい部分によって使い分けしましょう。
iタグ
iタグは「italic（イタリック(体)、斜体）」の略で、emタグと同様に文字を【斜体】にする効果があります。
文字を斜めにするだけで、emタグのように検索エンジンに対して文字のアクセントを伝える効果はありません。
普段見かける使い方としては、心の中の言葉や外国語、ことわざ等で多く見られるタグですね。
bタグが効かない時の対処法
bタグに限らず、htmlが効かない場合の原因のほとんどは、以下の3つに絞られます。
- スペルの誤り
- 開始タグと終了タグの誤り
- 効果を打ち消すCSSが実装されている
①と②が正しい場合はCSSを見直してみましょう。以下のようなコードはありませんか？
|
1 2 3 |
body{ font-weight:nomal ; } |
上記のような記述があると、記事内の全ての文章が「nomal」、つまり普通の太さになってしまいます。
CSSを使って特定の文章を太字にする方法は次で詳しく解説しますので、上記コードは消してしまうのもアリかもです。
【応用編】CSSを使って太字にしよう
文字の装飾にはCSSを使おう
文字の太さを変えたり、色を付けたりなど、文字の装飾をする場合にはCSS（スタイルシート）という言語を使用しましょう。
なぜなら、htmlは本来、文章に「見出しや段落」などの「意味や目的」を与えるための言語で、文章構造を定義付けするためのものだからです。
htmlが「体」だとすればCSSはオシャレに着飾る「服」のようなもの。
２つの言語の目的を考えて、より正しい言語を選択しましょう。
CSSで文字を太字にする方法
ここでは、一番簡単なhtmlに直接CSSを書き込む方法を解説します。
意外にカンタンなので初心者でも大丈夫ですよ。
コードは下記のとおり。
|
1 2 3 4 5 6 7 |
<p> 太字にしたい文章を <span style="font-weight: bold;"> style属性を指定したspanタグ </span> で囲みます。 </p> |
結果は下記のとおり。
太字にしたい文章を属性を指定したspanタグで囲みます。
さっくり解説すると、spanタグにstyle属性を指定することで、タグで囲んだ文章のスタイルを変更します。
スタイルの指定に使うのは、【font-weight】という文字の太さを変えるプロパティ。
このプロパティに【値】を設定することで、「文字の太さをどうするか」を指定します。
【bold】という値を使い、値の前には半角スペース、後ろには;を入れることを忘れないようにしましょう。
まとめ
いかがでしたでしょうか。
今回は、bタグの概要と使い方、類似タグとの違い、CSSで太字にする方法を解説しました。
見た目だけだったら、よく理解していなくてもイメージどおりに表示させることができます。
しかし、htmlやCSSには、それぞれに【意味や目的】があるのです。
なぜそのタグを使うのかを理解することで、見た目だけではなく、中からキレイな文章を作ることができるようになるでしょう。
この記事があなたのお役に立てば嬉しいです。
最後までご覧いただきありがとうござました。
