この記事の要点

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

ルビ要素のおさらい

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

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

を使った基本パターン

  漢字
  かんじ




  漢字
  (かんじ)




  漢字
  かんじ

表示例:

漢字かんじ

を省略した書き方

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

漢字かんじ


漢かん字じ


漢字(かんじ)

を使う意義（明示派）

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

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

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

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

  東京
  とうきょう
  Tokyo

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

ブラウザ対応

要素	Chrome	Firefox	Safari	備考
	○	○	○	基本機能は全ブラウザ対応
	○	○	○	省略しても等価動作
	○	○	○	対応ブラウザでは非表示
	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;
}

歴史: なぜ復活したのか

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

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

使い分けの指針

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

FAQ

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

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

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