この記事の要点

<rb> はルビベース = ルビ（振り仮名）を振る対象の文字 基本: <ruby><rb>漢字</rb><rt>かんじ</rt></ruby> HTML5 で一度廃止 → HTML Living Standard で復活。ただし現在は省略可能 複数文字を個別にルビを振る用途で便利: <rb>漢</rb><rb>字</rb><rt>かん</rt><rt>じ</rt> <rtc>（ルビテキストコンテナ）と組み合わせて 2 段ルビ（読み + 意味）が可能

ルビ要素のおさらい

日本語の振り仮名を表現する HTML 要素群:

要素	意味	必須？
<ruby>	ルビ全体のコンテナ	必須
<rb>	ルビベース（読みを振る本文）	省略可
<rt>	ルビテキスト（振り仮名そのもの）	必須
<rp>	ルビ非対応ブラウザ用のフォールバック括弧	推奨
<rtc>	ルビテキストコンテナ（複数 rt をまとめる）	省略可

を使った基本パターン

<!-- もっとも単純 -->
<ruby>
  <rb>漢字</rb>
  <rt>かんじ</rt>
</ruby>

<!-- フォールバック括弧付き（推奨） -->
<ruby>
  <rb>漢字</rb>
  <rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

<!-- 1 文字ずつ個別にルビ -->
<ruby>
  <rb>漢</rb><rb>字</rb>
  <rt>かん</rt><rt>じ</rt>
</ruby>

表示例:

漢字かんじ

を省略した書き方

現代の HTML Living Standard では <rb> は省略可能で、ruby 直下のテキストがそのままルビベース扱いされます:

<!-- 省略形 (現代の主流) -->
<ruby>漢字<rt>かんじ</rt></ruby>

<!-- 個別ルビも省略形で -->
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

<!-- フォールバック括弧付き -->
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

を使う意義（明示派）

省略可能とはいえ、<rb> を明示的に使う意義もあります:

• 1 つの ruby 内で複数の漢字を個別に管理したい場合に分かりやすい
• CSS でスタイル指定が容易（rb { font-weight: bold; }）
• JavaScript で個別操作しやすい（document.querySelectorAll('rb')）
• XHTML / EPUB など厳密な記法を求められる場面で必須

2 段ルビ: との組み合わせ

<rtc> はルビテキストをまとめるコンテナで、読みと意味の 2 段ルビに使えます:

<ruby>
  <rb>東</rb><rb>京</rb>
  <rt>とう</rt><rt>きょう</rt>
  <rtc><rt>Tokyo</rt></rtc>
</ruby>

表示は「とう・きょう」が上、「Tokyo」が下（または逆）の 2 段ルビになります。

ブラウザ対応

要素	Chrome	Firefox	Safari	備考
<ruby><rt>	○	○	○	基本機能は全ブラウザ対応
<rb>	○	○	○	省略しても等価動作
<rp>	○	○	○	対応ブラウザでは非表示
<rtc>	2024+ ◯	○	△	2 段ルビ。Safari は近年対応

CSS によるスタイル

/* ルビ全体のサイズ調整 */
ruby {
  ruby-position: over;   /* over (上) / under (下) / inter-character */
  ruby-align: center;    /* start / center / space-between / space-around */
}

/* ルビベース（rb / ruby 直下） */
rb {
  font-weight: bold;
}

/* ルビテキスト */
rt {
  font-size: 0.5em;
  color: #666;
}

/* フォールバック括弧（ルビ対応ブラウザでは非表示） */
rp {
  display: none;
}

歴史: なぜ復活したのか

<rb> は HTML 4.01 → XHTML 1.1 で導入され、HTML5 で「省略できるから不要」と一度仕様から外された経緯があります。しかし日本語コミュニティ（特に EPUB / 教科書出版）からの強い要望で、HTML Living Standard で復活しました。

仕様	の扱い
HTML 4 / XHTML 1.1	必須要素として定義
HTML5（初期）	削除されていた
HTML5.1	復活
HTML Living Standard（現行）	省略可能だが定義あり

使い分けの指針

• シンプルな振り仮名 → <rb> 省略でよい: <ruby>漢字<rt>かんじ</rt></ruby>
• 1 文字ずつ別々の読み → <rb> 明示推奨
• 2 段ルビ（読み + 意味） → <rtc> 必須
• 古いブラウザ対応 → <rp>()</rp> でフォールバック括弧を
• EPUB / 教科書出版 → <rb> 明示が業界標準

FAQ

Q: は必ず書くべき？
A: 必須ではありません。シンプルなルビなら省略で OK。ただし明示すると CSS / JS で扱いやすくなります。

Q: アクセシビリティ的にルビは読み上げられる？
A: ブラウザとスクリーンリーダーの組み合わせ次第。<rt> を読み上げるか飛ばすかが分かれます。重要な情報は本文中にも残しましょう。

Q: モンゴル文字や中国語にも使える？
A: 使えます。<ruby> は日本語専用ではなく、東アジア言語のルビ全般を想定した仕様です。