【6日でできるHTML入門】文字の装飾

　HTMLでは、文字の見た目を強調したり、意味づけを与えたりするための専用タグが用意されています。太字や斜体といった視覚的な装飾から、上付き文字・下付き文字、さらには意味論的な強調や引用まで、多彩なタグを組み合わせることで、テキスト表現を豊かにできます。

１．基本的な文字装飾タグ

1.1. 太字と斜体

ファイル名： lesson04-1.html

<!-- ファイル名: lesson04-1.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字の装飾🎨</title>
</head>
<body>
  <p>成績は<b>90点以上</b>で合格です。</p>
  <p>この文章は<i>斜体</i>で表示されます。</p>
</body>
</html>

ブラウザ表示例

  • <b>…</b> は見た目を太字にします。
  • <i>…</i> は見た目を斜体にします。

1.2. マーカー強調と取り消し線

<p>重要部分を<mark>強調</mark>します。</p>
<p>誤って入力した箇所は<del>削除</del>されました。</p>

出力例

  • <mark>…</mark> は背景をハイライトします。
  • <del>…</del> は取り消し線を引きます。

1.3. 複数タグのネストルール

<p>結果は<mark>平均点は<b>75点</b>です</mark>。</p>

出力例

  • ネストする際は開始タグの順序と逆で終了タグを閉じることが基本です。

２．上付き文字と下付き文字

2.1. 上付き文字 <sup>

<p>関数はy = x<sup>2</sup> + 1 です。</p>

出力例

  • <sup>…</sup> で囲んだ文字が上付き文字になります。

2.2. 下付き文字 <sub>

<p>二酸化炭素はCO<sub>2</sub>で表されます。</p>

出力例


二酸化炭素はCO₂で表されます。

  • <sub>…</sub> で囲んだ文字が下付き文字になります。

３．意味論的テキストタグ

3.1. 強調と重要性（<em>・<strong>）

<p>この単語は<em>特に強調</em>したい部分です。</p>
<p>この文は<strong>最重要</strong>の注意点です。</p>
  • <em> は意味的に「強調」を示し、通常斜体で表示されます。
  • <strong> は意味的に「重要」を示し、通常太字で表示されます。

3.2. 定義語と出典（<dfn>・<cite>）

<p><dfn>アルゴリズム</dfn>とは問題解決の手順です。</p>
<p>参考文献は<cite>HTML5 Specification</cite>です。</p>
  • <dfn> は用語の定義を示します。
  • <cite> は作品名や文献名などの出典を示します。

４．その他のテキストタグ

4.1. 整形済みテキスト <pre>

<pre>
  function hello() {
    console.log("Hello, World!");
  }
</pre>
  • <pre> 内の空白や改行をそのまま表示し、等幅フォントで整形済みテキストを表します。

4.2. 略語タグ <abbr>・<acronym>

<p><abbr title="HyperText Markup Language">HTML</abbr>はマークアップ言語です。</p>
<p><acronym title="Cascading Style Sheets">CSS</acronym>で装飾します。</p>
  • <abbr title="…">…</abbr> は略語を示し、マウスホバーで省略前の用語が表示されます。
  • <acronym> は頭字語を示します（HTML5では非推奨ですが、対応ブラウザあり）。

ここで扱った文字装飾タグは以下の通りです。

タグ用途
<b>…</b>太字
<i>…</i>斜体
<mark>…</mark>マーカー強調
<del>…</del>取り消し線
<sup>…</sup>上付き文字
<sub>…</sub>下付き文字
<em>…</em>意味的な強調（通常斜体）
<strong>…</strong>意味的な重要性（通常太字）
<dfn>…</dfn>定義語
<cite>…</cite>作品名・文献名
<pre>…</pre>整形済みテキスト
<abbr title="…">…</abbr>略語（省略前の文字をtitle属性で指定）
<acronym title="…">…</acronym>頭字語（非推奨）

　これらを組み合わせることで、視覚的な装飾だけでなく、テキストの意味構造も明確に示せるHTML文書を作成できます。