難しい漢字や読みにくい固有名詞に、小さな文字でふりがな（ルビ）を添えたい——そんなときに使うのが HTML の <ruby> 要素です。画像で作る必要はなく、テキストのまま漢字の上や横に読みを表示できます。この記事では、<ruby> と、ふりがな本体を表す <rt>、そしてルビ非対応の環境向けに括弧を見せる <rp> の役割と書き方を、実際にブラウザで表示されるデモを交えて解説します。複数の漢字に1文字ずつルビを振る書き方や、行間への影響といったつまずきやすい点にも触れます。
目次
ルビとは何か
ルビとは、漢字などの文字に添える小さな読み仮名のことです。教科書や辞書で漢字の上に振られている「ふりがな」を思い浮かべると分かりやすいでしょう。日本語では難読漢字や人名・地名の読みを示すために使われ、横書きでは文字の上、縦書きでは文字の右側に表示されるのが一般的です。
HTML では、このルビを <ruby> 要素で表現します。画像にしたり <sup> などで無理やり小さくしたりする必要はなく、専用の要素が用意されているため、文字として正しく検索やコピーの対象になり、読み上げ環境にも適切に伝わります。日本語のふりがなだけでなく、用語の読みや外国語の発音を補足する用途にも使えます。
ruby と rt で基本のふりがなを振る
もっとも基本的な使い方は、<ruby> でルビを振りたい対象を囲み、その中に <rt> でふりがなを入れる形です。<rt> は「ルビテキスト（ruby text）」の略で、漢字の上に小さく表示される読みの部分を表します。
<ruby>漢字<rt>かんじ</rt></ruby>この例では「漢字」という文字の上に「かんじ」と表示されます。<ruby> の直後に書いたテキスト（ベーステキスト）がルビを振られる本体で、<rt> の中身がその上に乗る読みです。ベーステキストには <rt> のようなタグを付ける必要はなく、そのまま文字を置きます。
rp 要素でルビ非対応環境のフォールバックを用意する
ほとんどの現代的なブラウザは <ruby> に対応していますが、ごく一部の古い環境やテキストブラウザでは、ふりがなを上に乗せて表示できないことがあります。その場合、何もしないとベーステキストとふりがなが「漢字かんじ」のように横一列につながってしまい、かえって読みにくくなります。
これを防ぐのが <rp> 要素です。<rp>（ruby parenthesis）の中に括弧などの記号を書いておくと、ルビに対応した環境ではその記号は表示されず、ルビに対応していない環境でだけ「漢字（かんじ）」のように括弧付きで読みが見えるようになります。ふりがなを括弧書きに切り替えるフォールバックとして働く、というわけです。
<ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>開き括弧を <rt> の前に、閉じ括弧を <rt> の後ろに置くのがポイントです。各要素の役割を整理すると次のようになります。
| 要素 | 役割 |
|---|---|
<ruby> | ルビ全体を囲む親要素。中にベーステキストとふりがなを入れる |
<rt> | ふりがな本体。漢字の上（縦書きでは右）に小さく表示される |
<rp> | ルビ非対応環境でだけ表示される括弧などの記号（フォールバック用） |
表示を確かめてみる
実際にブラウザでどう表示されるかを見てみましょう。下のデモでは、単語にまとめてふりがなを振る例と、漢字1文字ずつにふりがなを振る例を並べています。HTML や CSS のタブを書き換えると、ルビの見た目がその場で変わります。
<p class="demo">
<ruby>東京<rp>（</rp><rt>とうきょう</rt><rp>）</rp></ruby>に
<ruby>住<rp>（</rp><rt>す</rt><rp>）</rp></ruby>んでいます。
</p>
<p class="demo">
<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>ごとにルビを振る（モノルビ）
</p>
body {
font-family: sans-serif;
padding: 16px;
}
.demo {
font-size: 24px;
line-height: 2.4; /* ルビの分だけ行間に余裕を持たせる */
margin-bottom: 24px;
}
/* ふりがな（rt）の見た目を整える */
rt {
font-size: 0.5em;
color: #007bff;
}
上の例のように、<ruby> は文章の途中に自然に差し込めます。ベーステキストの前後にある「に」「んでいます。」といった通常の文字は、そのまま地の文として続けて書けます。
複数の漢字に1文字ずつルビを振る（モノルビ）
「漢字」のように熟語全体へまとめて1つのふりがなを振る方法もありますが、漢字1文字ごとに読みを対応させたい場合があります。たとえば「漢」に「かん」、「字」に「じ」を個別に振る書き方で、これはモノルビと呼ばれます。
モノルビは、1つの <ruby> の中に「ベース文字 + <rt>」の組を文字数ぶん並べることで書けます。
<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby>こう書くと、「漢」の上に「かん」、「字」の上に「じ」がそれぞれ対応して表示されます。文字とふりがなが1対1で並ぶため、どの読みがどの漢字に対応するのかが明確になります。<rp> を併用する場合も、それぞれの <rt> を括弧で挟む形にすれば同じように機能します。
CSS でルビの位置や揃え方を調整する
ルビの表示は CSS で多少の調整ができます。ふりがなを対象文字のどちら側に出すかは ruby-position プロパティで指定します。横書きでの初期値は over（文字の上）で、under にすると文字の下に表示されます。
ruby {
ruby-position: under; /* ふりがなを文字の下に表示する */
}また、ベーステキストとふりがなの幅が違うときに、ふりがなをどう揃えるかは ruby-align で指定できます。space-around や center などの値がありますが、ブラウザによって対応状況に差があるため、まずは <ruby> と <rt> の基本を押さえ、これらの調整は必要になったときに少しずつ試すくらいで十分です。
ルビがうまく表示されないとき
rt を入れ忘れている
ふりがなが上に乗らず、読みがベーステキストと同じ大きさで横に並んでしまう場合、<rt> でふりがなを囲み忘れていることが多いです。どこまでがベーステキストで、どこからがふりがななのかは <rt> の有無でブラウザが判断します。読みの部分は必ず <rt> で囲みましょう。逆に、ベーステキストには <rt> を付けない点にも注意してください。
ふりがなで上下の行が詰まって見える
ルビは対象文字の上（または下）に余分な高さを必要とするため、行間が狭いと、ふりがなが前の行の文字に近づいて窮屈に見えたり、行どうしが重なって見えたりすることがあります。これは line-height に少し余裕を持たせることで解消できます。ルビを多用する段落では、通常より大きめの行間（たとえば line-height: 2 前後）を設定しておくと、ふりがなのぶんのスペースが確保されて読みやすくなります。
rp の括弧が常に見えてしまう
ルビに対応した環境でも括弧が表示される場合は、括弧を <rp> ではなく地の文として直接書いてしまっていないかを確認してください。括弧を隠せるのは <rp> で囲んだときだけで、<ruby> の中に素の「（」「）」を書くと、対応環境でもそのまま見えてしまいます。フォールバック用の括弧は必ず <rp> の中に入れましょう。
まとめ
<ruby> 要素を使うと、漢字などにふりがな（ルビ）を画像を使わずテキストのまま添えられます。要点を振り返ります。
<ruby>でルビを振る対象を囲み、ふりがなは<rt>に入れる<rp>はルビ非対応環境でだけ見える括弧で、フォールバックとして使う- 漢字1文字ずつに振る（モノルビ）には「ベース文字 +
<rt>」の組を並べる - 位置や揃えは
ruby-positionやruby-alignで調整できる - ふりがなで行が詰まるときは
line-heightに余裕を持たせる
まずは <ruby> と <rt> の組み合わせを覚え、必要に応じて <rp> を足す、という流れを押さえておけば、難読漢字や用語の読みを分かりやすく示せるようになります。