HTMLのsubとrubyタグの使い方

HTMLには、テキストの表示を調整するためのタグが数多く存在します。
その中でも、下付き文字を表現する<sub>タグと、ふりがなを振るための<ruby>タグは、
特定の用途で頻繁に使用されます。本記事では、それぞれの使い方を詳しく解説し、実用例も紹介します。

<sub>タグの使い方

<sub>タグは、特定の文字を下付き（小さく下に配置）で表示するためのタグです。

基本的な構文

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

表示例

CO₂は二酸化炭素です。

具体例

<sub>タグは、化学式や数学の表記など、さまざまな場面で使用されます。

<p>水の化学式は H<sub>2</sub>O です。</p>
<p>物理学の公式 E = mc<sub>2</sub></p>

表示結果
水の化学式は H₂O です。
物理学の公式 E = mc²

CSSを使ったデザインのカスタマイズ

デフォルトのスタイルを調整する場合は、CSSを使うと便利です。

sub {
  font-size: 0.8em;
  vertical-align: sub;
  color: #555;
}

<ruby>タグの使い方

<ruby>タグは、ふりがな（ルビ）を振るために使用されます。

基本的な構文

<ruby>東京<rt>とうきょう</rt></ruby>

表示例

東京(とうきょう)

<ruby>タグの応用例

複数のルビを振る場合

<ruby>漢字<rt>かんじ</rt>を学ぶ</ruby>

表示結果: 漢字(かんじ)を学ぶ

英単語のルビ

<ruby>HTML<rt>エイチティーエムエル</rt></ruby>

CSSでのデザイン調整

<ruby>と<rt>のデザインをカスタマイズすることで、より見やすい表示にできます。

ruby {
  font-size: 1em;
}
rt {
  font-size: 0.6em;
  color: #777;
}

実用的な使用例

科学・数学の記述

H<sub>2</sub>O → H₂O
E = mc<sub>2</sub> → E = mc²

日本語のふりがな
<ruby>京都<rt>きょうと</rt></ruby> → 京都(きょうと)

多言語対応の工夫

<ruby>Bonjour<rt>ボンジュール</rt></ruby> → Bonjour(ボンジュール)

まとめ

<sub>タグは化学式や数学式の下付き文字に使用する。
<ruby>タグは日本語や外国語のルビを振るために使用する。
CSSを活用すれば、見た目を自由にカスタマイズできる。

適切に使い分けることで、テキストをより見やすく、意味の伝わりやすいものにすることができます。
ぜひ活用してみてください！

Favorite