ルビ (ruby annotation) は、漢字の読み方を示す振り仮名のことです。名称は活版印刷の活字サイズの呼び名に由来し、イギリスから輸入された 5.5 ポイントの活字が ruby (ルビー) と呼ばれていたことから、この活字で組んだ振り仮名がルビと呼ばれるようになりました。日本語の書籍、新聞、教科書で広く使われており、特に児童向けコンテンツや難読漢字を含む文章では不可欠な表記要素です。

HTML でルビを実装するには <ruby> 要素を使います。<ruby>漢字<rt>かんじ</rt></ruby> と記述すると、「漢字」の上に小さく「かんじ」と表示されます。<rp> 要素を併記しておくと、ルビを解釈しない環境では「漢字 (かんじ)」のように括弧付きで並んで表示されます。2026 年 8 月時点では主要ブラウザが <ruby>、<rt>、<rp> に対応しているため、ブラウザ表示でフォールバックが働く場面は限られますが、HTML からテキストだけを取り出すツールを通したときには括弧が残ります。

ルビは付け方で呼び分けます。モノルビは漢字 1 文字ごとに読みを振る方式で、「東とう京きょう」のように各文字の読みが明確になり、文字と読みの対応が重要な教科書や学習向けの資料で使われます。グループルビは単語全体に読みを振る方式で、「東京とうきょう」のように表示します。「今日」に「きょう」のような熟字訓は 1 文字ずつに割り当てられないため、グループルビしか選べません。熟語をまとめて扱いながら字と読みの対応も保つ配置を熟語ルビと呼び分けることもあります。付ける範囲による呼び方もあり、すべての漢字に振るのが総ルビ、難しい語だけに振るのがパラルビです。HTML では 1 つの <ruby> の中に親文字と <rt> を交互に並べればモノルビ相当、熟語と読みを 1 組で書けばグループルビ相当になります。

文字数カウントにおけるルビの扱いは複雑です。ルビテキスト (振り仮名部分) を文字数に含めるかどうかは、用途によって異なります。原稿用紙の文字数カウントではルビは文字数に含めません。一方、HTML のソースコード上では <rt> 内のテキストも文字列として存在するため、DOM のテキストコンテンツを取得すると「漢字かんじ」のように本文とルビが連結されます。<rp> に入れた括弧も同じように連結されるので、ルビを除外する処理は <rt> と <rp> の両方を対象にします。本文だけを数えたい場面と、ルビも含めて数えたい場面があるため、どちらの数え方をするのかを先に決めておく必要があります。

CSS には、ルビを上下どちらに置くかを決める ruby-position、親文字とルビの長さが違うときの揃え方を決める ruby-align、ルビが隣の文字の上へはみ出すことを許すかどうかの ruby-overhang があります。ruby-align の値は start、center、space-between、space-around で、初期値は前後にも余白を配る space-around です。ruby-position と ruby-align は 2024 年 12 月に主要ブラウザで使える状態になりましたが、ruby-overhang は対応していないブラウザがあるため、2026 年 8 月時点でも、はみ出しの制御を前提にした設計はできません。組版ではルビに親文字の半分のサイズを使うのが基本で、漢字 2 文字なら読みが 4 文字までは親文字の幅に収まります。これを超える読み、たとえば「桜」に「さくら」のように 1 文字へ 3 文字の読みを振る場合はルビが親文字より長くなるため、親文字の間隔を空ける、ルビの字形を狭める、前後の文字へはみ出させるといった調整が必要になります。

アクセシビリティの観点では、ルビの読み上げ方がスクリーンリーダーによって異なる点に注意します。本文に続けてルビを読むもの、ルビを読まないもの、設定で切り替えられるものがあり、どの環境でも読みが伝わるとは限りません。ルビが読まれない場合に情報が欠ける書き方は避け、本文だけで意味が通る文章にしておきます。読みを確実に伝えたい語は、初出で本文中に「薔薇 (ばら)」のように括弧で示す方法もあります。