この記事の要点

HTML5 ルビは <ruby> / <rt> / <rp> / <rtc> の 4 要素で構成 <ruby> = コンテナ、<rt> = ふりがな本体、<rp> = 非対応ブラウザ用括弧、<rtc> = 複数行のルビコンテナ 日本語のフリガナ、中国語の拼音 (Pinyin)、韓国語のハングル振りなどで利用 CSS ruby-position: over | under でルビ位置を制御 主要モダンブラウザはすべて対応 (Chrome / Firefox / Safari / Edge)

ルビとは

ルビ (ruby) とは、漢字の上や横に振る読み仮名のことです。HTML5 では正式に <ruby> 系要素が標準化されました。

基本構文

<ruby>
  漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

このコードは対応ブラウザでは「漢字」の上に小さく「かんじ」と表示され、非対応ブラウザでは「漢字(かんじ)」と表示されます。

要素一覧

要素	意味	役割
<ruby>	Ruby Container	ルビ全体のコンテナ
<rt>	Ruby Text	ふりがな本体（必須）
<rp>	Ruby Parenthesis	非対応環境用フォールバック括弧
<rtc>	Ruby Text Container	複数行のルビをまとめるコンテナ
<rb>	Ruby Base	ベーステキスト指定（W3C 非推奨）

1. 単純なふりがな

<p>
  <ruby>日本語<rp>(</rp><rt>にほんご</rt><rp>)</rp></ruby>
  を学ぶ。
</p>

2. 文字単位で振る (モノルビ)

<ruby>
  東<rp>(</rp><rt>とう</rt><rp>)</rp>
  京<rp>(</rp><rt>きょう</rt><rp>)</rp>
  都<rp>(</rp><rt>と</rt><rp>)</rp>
</ruby>

3. 熟語単位で振る (グループルビ)

<ruby>東京都<rp>(</rp><rt>とうきょうと</rt><rp>)</rp></ruby>

4. 中国語の拼音 (Pinyin)

<p>
  <ruby>
    北<rp>(</rp><rt>běi</rt><rp>)</rp>
    京<rp>(</rp><rt>jīng</rt><rp>)</rp>
  </ruby>
</p>

5. 複数行のルビ (rtc)

1 つのベーステキストに対しふりがなと意味のように複数のルビを振りたい場合、<rtc> でグループ化します:

<ruby>
  旧字体
  <rtc>
    <rt>きゅうじたい</rt>
  </rtc>
  <rtc>
    <rt lang="en">old character form</rt>
  </rtc>
</ruby>

CSS でルビ位置を制御

/* デフォルト: ベーステキストの上 */
ruby {
  ruby-position: over;
}

/* 下に振る */
.ruby-under {
  ruby-position: under;
}

/* 右に振る (縦書き時) */
.ruby-right {
  ruby-position: inter-character;
}

/* ふりがなサイズ */
rt {
  font-size: 0.5em;
  color: #555;
}

縦書きとの組合せ

/* 縦書きルビ */
.vertical {
  writing-mode: vertical-rl;
}
.vertical ruby {
  ruby-position: over;  /* 縦書きでは右側に振られる */
}

韓国語ハングル

<p>
  <ruby>
    韓国<rp>(</rp><rt>한국</rt><rp>)</rp>
  </ruby>
</p>

JavaScript で動的にルビ追加

function addRuby(base, reading) {
  const ruby = document.createElement('ruby');
  ruby.append(base);

  const rp1 = document.createElement('rp');
  rp1.textContent = '(';
  ruby.appendChild(rp1);

  const rt = document.createElement('rt');
  rt.textContent = reading;
  ruby.appendChild(rt);

  const rp2 = document.createElement('rp');
  rp2.textContent = ')';
  ruby.appendChild(rp2);

  return ruby;
}

// 「漢字」テキストを <ruby>漢字<rt>かんじ</rt></ruby> に置換
document.querySelectorAll('.auto-ruby').forEach(el => {
  el.replaceWith(addRuby('漢字', 'かんじ'));
});

サポートブラウザ

ブラウザ	ruby/rt	rp	rtc	ruby-position
Chrome	○	○	○	○
Firefox	○	○	○	○
Safari	○	○	△	○
Edge	○	○	○	○
IE 11	△	○	×	△

アクセシビリティ

• スクリーンリーダーはふりがな (rt) を読み上げる場合が多い（実装依存）
• <rp> は読み上げ対象外
• 読み上げ重視なら aria-label を併用
• 難読漢字 (例: 「躑躅」 → 「つつじ」) では特に有効

SEO への影響

Google はルビ内のテキストもインデックス対象とします。<rt> の中身がフリガナとして検索クエリにヒットすることもあります。ただし過度な装飾目的での使用は避けるべきです。

よくあるパターン

<!-- 人名 -->
<ruby>夏目漱石<rp>(</rp><rt>なつめそうせき</rt><rp>)</rp></ruby>

<!-- 難読 -->
<ruby>躑躅<rp>(</rp><rt>つつじ</rt><rp>)</rp></ruby>

<!-- 古文 -->
<ruby>枕草子<rp>(</rp><rt>まくらのそうし</rt><rp>)</rp></ruby>

<!-- 専門用語 + 英訳 -->
<ruby>
  人工知能
  <rtc><rt>じんこうちのう</rt></rtc>
  <rtc><rt lang="en">Artificial Intelligence</rt></rtc>
</ruby>

FAQ

Q: rb 要素は使うべき？
A: W3C は使用を推奨していません。ベーステキストは <ruby> 直下に直接書きます。

Q: ふりがなが行間を広げてしまう
A: CSS で rt { line-height: 0; } を試してください。または ruby { line-height: 2; } で本文の行間を広げて対応。

Q: 縦書きでルビ位置がずれる
A: writing-mode: vertical-rl 時は ruby-position: over が「右側」に対応します。inter-character も検討。