6.

HTML ルビ <ruby><rt><rp><rtc> の使い方|日本語フリガナ・拼音・CSS

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

ルビとは

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

基本構文


  漢字(かんじ)

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

要素一覧

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

1. 単純なふりがな

日本語(にほんご) を学ぶ。

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

(とう)(きょう)()

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

東京都(とうきょうと)

4. 中国語の拼音 (Pinyin)

(běi)(jīng)

5. 複数行のルビ (rtc)

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


  旧字体
  
    きゅうじたい
  
  
    old character form
  

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;  /* 縦書きでは右側に振られる */
}

韓国語ハングル

韓国(한국)

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;
}

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

サポートブラウザ

ブラウザruby/rtrprtcruby-position
Chrome
Firefox
Safari
Edge
IE 11×

アクセシビリティ

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

SEO への影響

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

よくあるパターン


夏目漱石(なつめそうせき)


躑躅(つつじ)


枕草子(まくらのそうし)



  人工知能
  じんこうちのう
  Artificial Intelligence

FAQ

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

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

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

編集
Post Share
子ページ
  1. ruby要素
  2. rt要素
  3. rb要素
  4. rp要素
  5. rtc要素
同階層のページ
  1. 構造
  2. セクション
  3. テキスト・フォント
  4. リスト
  5. リンク・ボタン
  6. ルビ
  7. 画像
  8. オブジェクト
  9. 動画・音声
  10. フォーム
  11. その他

最近更新/作成されたページ