HTMLで太字テキストを作成する方法

HTMLではテキストを太字にするのが簡単だし、もっとオプションを増やしたければ、いくつかのタグを学ぶことができる。もっといい方法は、数分かけて基本的なCSSを学び、HTML文書に直接追加することだ。この方法なら、CSSスタイルシート全体を追加するよりも早く、太字の太さを正確にコントロールすることができます。

方法1

HTMLで太字テキストを作成する

1. <strong>strongタグを使う</strong>。好ましい標準であるHTML5では、strongタグは重要なテキストに推奨されています。ブラウザではほとんどの場合、太字で表示されます。

   • 太字にしたいテキストは、<strong>bold text here</strong>というタグで挟んでください。
2. 適切な場合は、代わりに見出しタグを使いましょう。「見出し」は通常、ウェブページの一番上か、新しいセクションの最初に置かれます。通常、見出しは太字で通常のフォントよりも大きく表示されますが、これには違いがあります。<h1>から<h6>まで6種類の見出しタグがあります。これらを使用する際は、以下のガイドラインに従ってください：

   • <h1>あなたの見出しはこちら</h1>と書かれたh1タグは最も重要な見出しで、通常ページの一番上にある最も大きなテキストです。
   • <h2>h2タグ</h2>は二番目に重要な見出しで、<h6>h6タグ</h6>まであります。
   • これらは控えめに、ページを整理するためだけに使いましょう。ユーザーは見出しをさっと見て、探しているトピックを見つけることができるはずです。
   • 小見出しを作成するときは、一度に1レベルだけ下に移動します。言い換えれば、<h1>から<h3>まで飛ばさないことです。こうすることで、HTMLページが別のフォーマットに移されたときにも、そのフォーマットを保つことができます。
3. <b>bタグは最後の手段として使いましょう</b>。<b>タグはHTML5でもサポートされていますが、ほとんどの状況では<strong>の方が好まれます。<b>タグは、テキストを強調するためではなく、文体上の理由で太字にする場合にのみ使用してください。例えば、文章中のキーワードや語彙、レビュー中の商品名などです。

   • ほとんどのタグと同様に、<b>開始タグと終了タグの間に影響を受けるテキストを置きます</b>。

方法2

インラインCSSで太字にする

1. CSSを使うタイミングを理解しましょう。CSSは、ウェブページをスタイル設定するための、より強力で一貫性のある方法です。そのため、HTMLがページの意味を決定するために設計されているのに対し、CSSはページの見え方を決定する理想的な方法です。重要なテキストを強調したいときにHTMLタグを使うのはまったく問題ありませんが、CSSを使えば、太字テキストの見た目をより細かくコントロールできます。

   • 基本的なHTMLページを異なるブラウザで開いてみると、表示の違いに気づくかもしれません。CSSは、特定のタグで変更されたテキストをどのように表示するかを正確にブラウザに伝え、表示のばらつきを最小限に抑えます。
2. テキストに<span>タグを追加します。 CSSをまだ知らない場合は、「インラインCSS」を使うのがよい方法です。<p>や<h1>のようなタグを変更するのに使えますが、タグの間にまだないテキストを変更したい場合もあります。 この場合は、テキストを<span></span>タグの間に配置します。これだけでは何の効果もありませんが、作業するための何かを与えてくれます。これから使う例を示します：

   • <span>このテキストをインラインCSSで太字にする方法を学びました</span>。
3. style属性を追加します。HTMLの属性は、タグの中の< >括弧の中に直接記述します。style属性は、HTMLタグにCSSを挿入するために必要なので、spanタグにstyle=を挿入します：

   • <span style=>このテキストをインラインCSSで太字にする方法を学びました</span>。
   • スタイルを指定せずにstyle属性を追加する理由はありません。簡単にできるように、1つずつステップを踏んでいくだけだ。
4. font-weightプロパティを追加します。CSSプロパティはstyle属性の一部として追加されます。今回のケースでは、フォントの太さを決めるfont-weightプロパティを使います。このプロパティひとつで、太字（極太）のテキストを表示したり、細いテキストを表示したり、あるいは通常の太さで表示するように指定することができます。次のように、=記号の後に "font-weight: " を追加します：

   • <span style="font-weight:">インラインCSSでこのテキストを太字にする方法を学びました</span>。
   • 繰り返しますが、これは未完成で、これだけでは何もできません。
   • font-weight:の前後の引用符を忘れないでください。
5. 太字の値を追加します。あとは、font-weight:と最後の引用符の間に、font-weightの値を追加するだけです。font-weight:の値は、font-weight:と最後の引用符の間に追加するだけです。「太さ」を指定するオプションはいくつかありますが、boldという値を使うのが一番簡単です：

   • <span style="font-weight:bold">インラインCSSでこのテキストを太字にする方法を学びました</span>。
6. 他の値も試してみよう。CSSはHTMLよりも多くの選択肢を与えてくれるので、窮屈に感じる必要はありません。ここでは、"bold "値に代わるものをいくつか紹介します：

   • <span style="font-weight:bolder">"bolder "テキストは常に親要素よりも太くなります。</span>例えば、段落全体を "bold "にした後、その段落内の個々の文で "bolder "を使用すると、さらに太くなります。
   • <span style="font-weight:normal">"normal "テキストは、たとえspanがboldタグの中にあっても、normalとして表示されます</span>。
   • <span style="font-weight:900">代わりに100から900までの数字を使って太さを指定することができます。400は通常のテキストで、太字テキストはデフォルトで700の太さを使用します</span>。

この記事は、CC BY-NC-SAで公開されている「 HTMLで太字テキストを作成する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。