JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLでテキストを太字にする方法｜bタグ・strongタグ・CSSの使い分けを解説

HTMLでテキストを太字に表示するには、<b>タグまたは<strong>タグを使用します。どちらも囲んだテキストを太字にする点では同じ働きをしますが、<strong>タグはテキストに「強い重要性」という意味を持たせられる点が大きな違いです。<b>タグは見た目を変えるための物理マークアップ要素であり、意味上の重要性は付与されません。

また、CSSのfont-weightプロパティを使えば、HTMLタグに頼らずに同じ結果を得ることも可能です。

bタグとstrongタグの違い

  • bタグ：単に視覚的に太字にするだけのタグ。重要性を示す意味はありません。
  • strongタグ：太字表示に加えて、その部分が重要であることをブラウザや検索エンジン、スクリーンリーダーなどに伝えられます。意味的な強調にはこちらが推奨されます。

使用例1：strongタグで太字にする

以下のコードでは、「Android」という語が<strong>タグによって太字で表示されます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML text bold</title>
   </head>
   <body>
      <h2>Our Products</h2>
      <p>Developed 10 <strong>Android</strong> apps till now.</p>
   </body>
</html>

使用例2：CSSのfont-weightプロパティで太字にする

次の例では、style属性にfont-weight: bold;を指定して、段落全体を太字にしています。HTMLの構造とデザインを分離できるため、スタイルを一括管理したい場合にも便利な方法です。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML text bold</title>
   </head>
   <body>
      <h1>Tutorialspoint</h1>
      <p style="font-weight: bold;">Simply Easy Learning</p>
   </body>
</html>

補足として、font-weightには「bold」以外にも「normal」「bolder」「lighter」や100〜900までの数値を指定できます。表現に応じて太さを細かく調整したい場合に活用してみましょう。

  1. HTMLで挿入されたテキストをマークする方法｜insタグの使い方を解説

    HTMLで挿入されたテキストをマークするには、<ins>〜</ins>タグを使用します。このタグは、同じドキュメントの複数バージョン間の差分を確認・表示する際に非常に重要な役割を果たします。また、ドキュメントに新しく追加されたテキストの範囲を明示したい場合にも活用できます。ブラウザ上では、<ins>タグで囲まれたテキストは通常下線付きで表示され、「ここに文字が追加された」ことが視覚的にひと目でわかるようになります。基本的な使い方以下のコードを実行すると、HTMLで挿入されたテキストをマークする方法を実際に確認できます。<!DOCTYPE html>

  2. HTMLで取り消し線（打ち消し線）テキストを表示する方法【CSSでの実装手順を解説】

    HTMLで取り消し線（打ち消し線）のついたテキストを表示したい場合、かつては<strike>〜</strike>タグが使われていました。このタグは文字通り、テキストに取り消し線を引いて表示します。しかし、<strike>タグはHTML5では廃止（非推奨）されており、現在のWeb制作では使用すべきではありません。代わりに、CSSのtext-decorationプロパティを使うのが標準的な方法です。CSSのtext-decorationプロパティを使う方法CSSで取り消し線を実現するには、text-decoration: line-through;というスタイル