HTML: HTMLテキスト書式
書式タグを使うと、テキストを単なる言葉以上のものにできます ― 太字、斜体、取り消し線、上付き文字、引用など。各書式には対応する意味論的なタグがあり、見た目を変えるだけでなく意味も伝えます。
1. 太字と斜体
<b> はテキストを太字に、<i> はテキストを斜体にします。ただし、HTML5では意味論的な <strong>（重要な内容を示す）と <em>（強調を示す）の使用を推奨します。ブラウザや検索エンジンがその意味を理解できるからです（単なる視覚的なスタイリングだけでなく）。
▶ サンプル
HTML
<p><b>これは太字です</b>、<i>これは斜体です</i></p>
<p><strong>これは重要な内容です</strong>（意味論的に重要であり、単なるスタイリングではありません）</p>
<p><em>このテキストは強調が必要です</em>（スクリーンリーダーが強調して読み上げます）</p>
💡 ベストプラクティス：単に見た目だけの太字や斜体が必要な場合（例：アイコンフォント）を除き、
<strong> と <em> を優先してください。スクリーンリーダーがこれらを特別に扱うため、アクセシビリティが向上します。
2. 削除、挿入、ハイライト
<del> は取り消し線を表示し、内容が削除されたことを示します。<ins> は下線を表示し、新しく挿入された内容を示します。<u> も下線を表示しますが、<ins> が「新規追加」という意味論を持つ一方、<u> は見た目だけを変更します。さらに、<mark> はマーカーペンのようにテキストをハイライトします。<small> は小さな注釈を表し、免責事項や著作権情報によく使われます。
▶ サンプル
HTML
<p>元の価格：<del>$199</del> <ins>$129</ins></p>
<p>明日の午後3時の <mark>ミーティング</mark> を忘れずに。</p>
<p><small>* 本イベントの最終解釈権は主催者に帰属します。</small></p>
さらに、<pre> タグ（整形済みテキスト）はソースコード内のスペースと改行をそのまま保持するため、コードスニペットや単純なASCIIアートの表示に最適です。
▶ サンプル
HTML
<pre>
+-------------------------+
| Web-Tutorial.com |
| HTML・CSS・JavaScript |
+-------------------------+
</pre>
3. 下付き文字と上付き文字
<sub> はテキストを下付き文字（低い位置）に、<sup> は上付き文字（高い位置）に表示します。化学式、数式、脚注などによく使われます。
▶ サンプル
HTML
<p>水の化学式は H<sub>2</sub>O です</p>
<p>アインシュタインの質量エネルギー方程式：E=mc<sup>2</sup></p>
<p>この記事の脚注<sup>[1]</sup>はページ下部にあります。</p>
4. 引用と特殊テキスト
これらのタグは引用、略語、連絡先情報などの特殊なコンテンツを表すために使用します。
▶ サンプル
HTML
<!-- ブロック引用 -->
<blockquote>
人生はチョコレートの箱のようなものだ。何が出てくるかはわからない。
<cite>― フォレスト・ガンプ</cite>
</blockquote>
<!-- インライン引用 -->
<p>孔子は言いました：<q>学びて思わざれば則ち罔し。思いて学ばざれば則ち殆し。</q></p>
<!-- 略語 -->
<p><abbr title="World Wide Web">WWW</abbr> は世界を変えました。</p>
<!-- 連絡先情報 -->
<address>
著者：山田太郎<br>
メール：yamada@example.com
</address>
<!-- テキストの方向 -->
<p><bdo dir="rtl">このテキストは右から左に表示されます</bdo></p>
📌 注意：
<blockquote> はブロックレベル要素で、ブラウザがインデントを追加します。<q> はインライン要素で、ブラウザが自動的に引用符を追加します。title 属性と共に使うと、<abbr> はマウスホバー時に全文を表示します。<bdo dir="rtl"> はテキストを右から左に表示し、アラビア語などに適しています。
❓ よくある質問
Q
<strong>と<b>はどちらも太字、<em>と<i>はどちらも斜体ですが、違いは何ですか？A 違いはセマンティクスにあります。
<strong>は「このテキストは重要である」、<em>は「このテキストは強調が必要」を意味し、外見以上の意味を伝えます。一方、<b>は「テキストを太字にするだけ」、<i>は「テキストを斜体にするだけ」で、見た目にのみ影響します。検索エンジンとスクリーンリーダーは<strong>と<em>のセマンティクスを認識しますが、<b>と<i>は無視します。原則：内容の意味を強調する場合は<strong>/<em>を使い、 purely visualなスタイリングには<b>/<i>またはCSSを使います。Q
<del>、<ins>、<u>の違いは何ですか？A
<del>は取り消し線を表示し、削除されたか古くなったコンテンツを示します。明確なセマンティックな意味を持ちます。<ins>は下線付きテキストを表示し、新たに挿入されたコンテンツを示します。これも「追加」のセマンティクスを持ちます。<u>は単に下線を追加するだけで、纯粹に視覚的な効果です。HTML5では、リンクと混同されやすいため（リンクはデフォルトで下線付き）、<u>の使用は制限されています。削除を示すには<del>を使い、挿入を示すには<ins>を使い、<u>は避けてください。Q
<blockquote>と<q>はいつ使うのですか？A
<blockquote>はブロックレベル要素で、長い引用（通常是独立した段落または複数の段落）に使用され、ブラウザが自動的にインデントを追加します。<q>はインライン要素で、短い引用（1文または数語）に使用され、ブラウザが自動的に引用符を追加します。シンプルなルール：長い引用には<blockquote>、短い引用には<q>を使います。引用に出典がある場合は、<blockquote>内に<cite>を追加して出典を明記します。📖 まとめ
<strong>は重要性、<em>は強調を示す ―<b>や<i>よりも意味論的<del>取り消し線、<ins>意味論的な下線、<u>スタイル上の下線、<mark>ハイライト、<small>小さな注釈<sub>下付き文字、<sup>上付き文字、<pre>スペースと改行を保持<blockquote>ブロック引用、<q>インライン引用、<abbr>略語、<address>連絡先、<cite>作品名、<bdo>テキスト方向
📝 練習問題
- テキストの書式設定： 商品プロモーションメッセージを作成してください。元の価格（取り消し線）、セール価格（下線付きの挿入）、割引に関する注釈（小さなテキスト）、ハイライトされた「期間限定」マーカーを含めてください。
- 化学式と上付き文字：
<sub>と<sup>を使ってCO₂とx² + y² = z²を記述してください。 - 自己チェック： ブラウザでニュースサイトを開き、右クリックして「検証」を選び、記事内で引用、強調テキスト、脚注にどのHTMLタグが使われているか調べてください。
<strong>と<b>のどちらが使われているか見分けられますか？
