この記事の要点

rt 要素は ruby 要素の子要素で、ルビ（ふりがな）のテキスト本体を表す Ruby Text の略。漢字の上に表示される小さい注釈文字を入れる 基本: <ruby>漢字<rt>かんじ</rt></ruby> — ruby 要素なしには使えない rp 要素と組み合わせて非対応ブラウザでのフォールバック (カッコ表示) も可能 CSS で rt セレクタを使ってルビ文字のサイズ・色・フォントを個別調整 日本語ふりがな・中国語ピンイン・注音符号など東アジア言語の発音表記全般で使う

rt 要素とは

rt 要素（Ruby Text）は、ruby 要素の子要素として配置するインライン要素で、ルビ（ふりがな・注釈文字）のテキスト本体を表します。漢字や記号の上部（または横、設定により下）に小さく表示される文字列を入れます。

必ず ruby 要素の中で使い、単独では使えません。

基本構文

<ruby>漢字<rt>かんじ</rt></ruby>

これで 漢字かんじ のように「漢字」の上に「かんじ」が小さく表示されます。

rt 要素の構造的意味

• HTML5 仕様で定義されたセマンティック要素
• 「これは発音・注釈である」という意味情報を伝える
• スクリーンリーダーが対応すれば音声合成で読み上げる音として扱える
• 検索エンジンも構造を理解できる

複数の漢字に個別ルビ

<!-- 単語全体に1つのルビ -->
<ruby>東京<rt>とうきょう</rt></ruby>

<!-- 文字ごとに別ルビ -->
<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby>

<!-- 旅行案内のような長文の場合 -->
<p>
  本日は<ruby>新宿<rt>しんじゅく</rt></ruby>から
  <ruby>東京<rt>とうきょう</rt></ruby>を経由して
  <ruby>大阪<rt>おおさか</rt></ruby>に向かいます。
</p>

rp 要素との併用 (フォールバック)

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

対応ブラウザでは rp のカッコは非表示になり、ルビとしてキレイに表示されます。非対応ブラウザ（極めて稀）では「漢字(かんじ)」のようにカッコ書きでフォールバック表示されます。

中国語・韓国語での使用例

<!-- 中国語ピンイン -->
<ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby>

<!-- 注音符号（台湾） -->
<ruby>你<rt>ㄋㄧˇ</rt>好<rt>ㄏㄠˇ</rt></ruby>

<!-- 韓国語の漢字 + ハングル -->
<ruby>韓國<rt>한국</rt></ruby>

rt 要素を CSS でスタイリング

/* ルビ文字のサイズ・色 */
rt {
  font-size: 0.5em;      /* ベースの半分くらいが一般的 */
  color: #888;            /* グレー系で目立たせすぎない */
  font-weight: normal;    /* ベースが太字でもルビは普通に */
  letter-spacing: 0;
}

/* マウスホバーで強調する */
ruby:hover rt {
  color: #e74c3c;
  font-weight: bold;
}

/* ルビを完全に非表示にする */
rt.hidden {
  display: none;
}

/* ベースとルビを縦書きで横並びに（ruby-position） */
.tategaki ruby {
  ruby-position: inter-character;
}

JavaScript で動的にルビを生成

// 漢字 + 読みのペアからルビ HTML を生成する
function rubyHtml(base, reading) {
  return `<ruby>${base}<rp>(</rp><rt>${reading}</rt><rp>)</rp></ruby>`;
}

document.getElementById('target').innerHTML =
  rubyHtml('東京', 'とうきょう');

// 既存の漢字部分を自動でルビ化（簡易デモ）
const data = { '東京': 'とうきょう', '大阪': 'おおさか' };
let html = '東京と大阪を往復する。';
for (const [k, v] of Object.entries(data)) {
  html = html.replaceAll(k, rubyHtml(k, v));
}

ruby/rt/rp の関係を整理

要素	役割	表示
ruby	ルビ全体のコンテナ	ベース文字を通常表示
rt	ルビテキスト本体	ベースの上に小さく表示
rp	非対応時のカッコ	対応ブラウザでは非表示
rb	ベース部分を明示	古い仕様、現代では省略可
rtc	複数 rt をまとめる箱	パラレルルビで使用

rt が空のとき

<!-- 空のrtでルビをスキップ可 -->
<ruby>漢<rt>かん</rt>字<rt></rt></ruby>

「漢」のみルビを振り、「字」はそのまま、といった部分的なルビ表示もできます。空の rt でスペースを確保できます。

rt 要素の歴史と Web 標準化までの道のり

ルビ表記は東アジア圏の出版文化に古くから存在する伝統的な表現で、紙の世界では明治時代から新聞や教科書で広く使われてきました。Web の世界で標準化されたのは比較的最近で、IE 5 が独自仕様としてルビ表示をサポートし、W3C で正式な仕様化議論が進み、HTML5 で晴れて主要要素として組み込まれた経緯があります。rt 要素はこの流れの中心にある要素で、長らく「日本だけのローカル機能」と誤解されがちでしたが、現在では国際的な多言語仕様として明確に位置づけられています。

標準化の過程では、シンプルなふりがな用途だけでなく、台湾の注音符号や中国語ピンインのように1 文字ごとに発音記号を 2 段で振るような複雑な用途まで含めた仕様が策定されました。そのため rtc や rb といった補助要素も用意されており、用途に応じた使い分けができます。日常的な日本語ふりがな用途では ruby と rt だけで足りますが、教育系・辞書系のサービスを構築する場合は rtc によるパラレルルビ表現も検討する価値があります。

rt 要素を使う際の実装ヒント

rt 要素はインラインなので、本文の中に自然に挿入できます。ただし、ベース文字のフォントサイズに対してルビが大きすぎたり小さすぎたりすると本文の重要度がぼやけてしまうので、CSS でルビ専用のフォントサイズ（例えば本文の 0.5em 程度）を必ず指定するのが実用上のコツです。ベース側のフォントサイズが変わるとルビ側も自動で追従するため、レスポンシブデザインにも自然に馴染みます。

さらに、ルビが入る行は行高を多めに取らないと上の行と重なるという現象が起きます。本文用 CSS では line-height: 1.4〜1.6 くらいが一般的ですが、ルビが多用される文章では line-height: 2 前後を確保しておくと読みやすさが大幅に向上します。アクセシビリティの観点からも、難読語の意味を伝えるためにルビを使うのは推奨される実装方針で、視覚障害の有無に関わらず子供や学習者にとって優しい Web ページが作れます。

rt 要素を活用したコンテンツ事例

rt 要素の威力が発揮される代表的なコンテンツの一つが、ニュースサイトや官公庁の Web ページにおける難読人名・地名へのルビ表示です。日本語には同じ漢字でも複数の読み方があり、特に人名は無数のバリエーションが存在します。「東海林」「四十物」「小鳥遊」のような難読姓は、書き手にとっても読み手にとっても正しい読みを伝える必要があり、ruby + rt の組み合わせがまさに適切な手段となります。文章の流れを壊さず、必要な場面でだけ読みを補えるため、文章のリズムも保てます。

また、子供向け学習サイトや日本語学習者向けのコンテンツでは、本文中の漢字に応じてルビをオン/オフ切り替えるインタラクティブな仕組みがよく実装されます。CSS の rt { display: none; } をクラスで切り替えるだけで、ルビ表示と非表示を瞬時に切り替えられ、学習段階に応じた表示制御が容易にできます。これも HTML レベルで意味情報を持っているからこそ実現できる柔軟性で、画像や括弧書きでは到底真似できません。

電子書籍のリーダーアプリや、政府が運用する公的サービスのページでも、rt 要素を用いたルビが標準的に使われています。とくに小学生向けの教科書のデジタル版は、難読語にきちんとルビが振られているかが採用基準の一つになるほど重視されています。Web 標準の HTML としてルビ表記が用意されていることで、開発側はベンダーごとの独自拡張に依存せず、長期的にメンテナンスしやすいコンテンツを生成できます。

rt 要素を組み込んだ運用ノウハウ

大量のページに rt を入れる作業を手動で行うのは現実的ではないため、運用現場ではサーバーサイドのテンプレートエンジンやCMS のプラグインで自動付与することが一般的です。たとえば WordPress のプラグインで「特定の単語を検出したらルビを自動で振る」仕組みを導入すれば、編集者の手間を最小化しつつコンテンツ品質を保てます。Markdown 派生記法でルビを書ける拡張も多く、技術ブログや書籍系サイトでよく使われています。

機械学習を使った形態素解析と組み合わせる試みも進んでいます。文章を解析して読みが推定できる漢字に対して自動でルビを生成し、編集者が確認だけ行う、というワークフローが教育系コンテンツの一部で実用化されています。誤った読みが付与されると意味が変わってしまうため、最終的な人間チェックは欠かせませんが、コスト削減の手段としては有望なアプローチです。今後 AI 技術の発展に伴って、こうした自動ルビ生成のレベルはさらに上がっていくと予想されます。

FAQ

Q: rt を ruby の外で使うと？
A: HTML 的に無効。ブラウザは要素として認識しますが、ルビ表示にはなりません。

Q: rt の中に他の要素を入れられる？
A: フレージングコンテンツなら入れられる（strong / em など）。ただし複雑にすると可読性が下がるので、シンプルなテキストが推奨。

Q: ルビ文字をコピペできる？
A: できます。ベース文字と一緒にクリップボードに入ります（ブラウザ実装により挙動は若干異なる）。

Q: スクリーンリーダーはどう読む？
A: 実装依存。ベースのみ読む、両方読む、ルビのみ読む、などまちまち。難読語のアクセシビリティ補助としては有用ですが、絶対の保証はありません。

Q: 縦書きのときは？
A: CSS の writing-mode: vertical-rl; + ruby-position でルビが文字の右側に表示されるなど、文書方向に応じて自動調整されます。

関連記事

• ruby要素