タイトル: ruby要素
SEOタイトル: HTML ruby要素 完全ガイド（漢字にふりがな / rt / rp / 多言語対応 / CSS スタイリング）
| この記事の要点 |
|
ruby 要素とは
ruby 要素は、文字の上 (または横) に小さな注釈テキスト（ルビ）を表示するための HTML 要素です。日本語の漢字にふりがなを振る用途で最もよく使われますが、中国語のピンイン、韓国語の漢字併記など、東アジア圏の言語表記全般に使えます。
基本構文
漢字表示結果: 漢字 のように、ベース文字の上に小さく「かんじ」が表示されます。
関連要素
| 要素 | 役割 | 必須 |
|---|---|---|
ruby | ルビ全体のコンテナ | ○ |
rt | ルビテキスト本体（ふりがな） | ○ |
rp | 非対応ブラウザ向けカッコ | △（フォールバック用） |
rb | ベース（漢字）を明示するための要素 | △（古い仕様、現代は省略可） |
rtc | 複数の rt をまとめるコンテナ | △（高度な用途） |
非対応ブラウザ向け: rp 要素
漢字
rp 要素は、ruby に対応していないブラウザでのみ表示されるカッコです。対応ブラウザでは自動的に非表示になります。これにより非対応環境では「漢字(かんじ)」のように代替表示されます。
2026 年現在、主要ブラウザはすべて対応しているので rp は必須ではありませんが、スクリーンリーダーや古い環境への配慮として付けておくのが推奨です。
長い文章にルビを振る
東京から
大阪まで
新幹線で行く。
東京
1 つの ruby 要素内で複数の漢字とルビを交互に並べると、文字ごとに ルビ がそれぞれ上に表示されます。これにより「総ルビ」表記が実現できます。
中国語ピンイン
你好
中国語の各漢字にピンインを振るパターン。簡体字・繁体字・注音符号いずれにも応用できます。
CSS でスタイリング
/* ルビ位置 */
ruby {
ruby-position: over; /* 上 (既定) */
/* under: 下、inter-character: 文字間（注音符号など） */
}
/* ルビの揃え方 */
ruby {
ruby-align: center; /* 中央揃え (既定) */
/* start / center / space-between / space-around */
}
/* ルビ文字のフォントサイズ・色 */
rt {
font-size: 0.5em;
color: #888;
font-weight: normal;
}
/* ルビとベースの間隔 */
ruby {
line-height: 2; /* ルビ表示分の余白を確保 */
}パラレル ルビ (両側にルビ)
東京
上にふりがな、下にローマ字を出すような両面ルビもマークアップ可能。ただしブラウザサポートはやや限定的なため、本格運用前にテストが必須です。
アクセシビリティ
- スクリーンリーダーはベース文字とルビをどう読み上げるかが実装依存。両方読み上げる、ベースのみ、などまちまち
- 難読語や固有名詞のふりがな目的なら、
aria-labelでベース文字に読みを明示するのも有効 - ルビは装飾ではなく意味情報なので、CSS で隠す場合も
display:noneではなくvisibility:hidden等を慎重に選ぶ
使い分け: ruby vs CSS / 画像
| 手法 | メリット | デメリット |
|---|---|---|
| ruby 要素 | セマンティック、検索可、コピペ可 | レイアウト微調整が限定的 |
| CSS + ::before | 柔軟なデザイン | 意味情報が抜ける、コピペで消える |
| 画像 | 完璧なデザイン | 検索不可、拡大すると粗い、メンテ性低 |
ruby 要素が現代の Web で重要視される理由
かつてのインターネット黎明期、日本語の Web ページで漢字にふりがなを振りたい場合は、画像で代用したり全角括弧の中に読みを書いたりするのが一般的でした。しかし画像はテキスト検索に引っかからず、コピー＆ペーストで本文と分離してしまうという致命的な欠点があります。括弧書きは検索性こそ保たれますが、読み上げソフトが本文の流れの中で「かっこ・かんじ・かっことじ」のように読み上げてしまい、リズムを大きく崩します。
ruby 要素は、これらの問題をすべて HTML レイヤーで解決するために用意された本来の意味でのセマンティック要素です。検索エンジンはベース文字を本文として、ルビ部分を補助情報として理解できますし、テキスト選択時の挙動もブラウザごとに揃えられています。子供向けの読み物サイト、教育機関の教材、公的機関のお知らせ、ニュースサイトの専門用語解説など、活用範囲は年々広がっています。
とくに教育系の Web サービスでは、学年に応じて表示するルビを切り替える要件があり、ruby 要素を CSS や JavaScript と組み合わせて段階的に出し分ける実装が一般的です。小学 1 年生向けにはすべての漢字にルビを表示、小学 6 年生向けには未習漢字のみ表示、中学生向けにはルビを非表示にする、といった切り替えが、ruby 要素を採用していれば DOM 操作だけで完結します。
同じことを画像で実現しようとすると、学年ごとに異なる画像セットを用意して切り替える必要があり、コストもメンテナンス負荷も桁違いに大きくなります。HTML のセマンティクスを正しく使うことで、ユーザーに合わせた表示の切り替えが軽量に行えるのは、Web 標準の大きな利点といえます。
ニュースサイトや官公庁のページでも、難読語や専門用語にルビを振る運用が広がっています。読者の層がさまざまな公的情報ほど、誰でも正しく読める表記が求められるため、ruby 要素を正しく組み込んだ HTML はアクセシビリティとユーザビリティを同時に高めるカギになります。
多言語サイトでの活用と発展的な使い方
ruby 要素は日本語だけのものではありません。中国語サイトではピンインや注音符号を漢字の上に振ったり、韓国語サイトでは漢字とハングルの併記に活用されたりと、東アジア圏全体で活躍する HTML 要素です。さらに英語圏のサイトでも、難しい医学用語や法律用語に発音記号を補う用途で利用されるケースが増えており、世界的にも認知度が高まっています。
応用例としては、地名や駅名の英訳をルビで補う実装があります。日本国内の観光案内サイトで「京都」のように振っておけば、外国人観光客が漢字を読めなくても英語表記で意味を取れます。1 つの HTML で複数言語の読者をフォローできる仕組みが、CSS と JavaScript のサポートも合わせて広がっており、コンテンツの幅を物理的に押し広げる重要な要素になっています。
ruby と CSS の連携で広がる表現
ruby 要素はCSS のさまざまな機能と相性が良いのも特徴です。ruby-position プロパティで「上」「下」「文字間」を切り替えられるため、注音符号のように字の右側に縦組みで表示する中国語表記にも対応できます。ruby-align ではベース文字の幅にルビをどう揃えるかを制御でき、ベース文字数とルビ文字数が一致しない難読語でも自然な配置が得られます。
さらに line-height を適切に取らないとルビが上の行に重なる事故が起きるため、本文の行間設計と一体で考えるのが定石です。逆にこの点さえ抑えておけば、CSS だけでカジュアル風・古文風・ふりがなドリル風など多彩なデザインに切り替えられます。ruby を扱う際は、CSS のメディアクエリと組み合わせてモバイル時のみルビを大きくするなど、レスポンシブ対応もぜひ意識しておきたいところです。
FAQ
Q: 既に IME で「漢字（かんじ）」と書いたら同じでは？
A: 文字としてはそう見えますが、検索エンジンにもスクリーンリーダーにも「漢字」と「かんじ」が別物として扱われない。ruby は「これは読み」と意味付けする点が異なる。
Q: 一部だけルビを振りたい
A: ruby 要素を必要な部分だけインライン配置すればOK。文中の特定の固有名詞のみにルビ、というのも自然にできる。
Q: ルビ文字のサイズが大きすぎ/小さすぎる
A: rt { font-size: 0.5em; } 等で CSS 調整。ベースのフォントサイズに対する相対指定が安全。
Q: ブラウザ対応は？
A: Chrome / Edge / Safari / Firefox など主要ブラウザはすべて対応済み（2026 年時点）。古い IE は対応しているが rp でフォールバック表示されるので心配無用。