サイト制作

HTMLのruby・rt・rpでふりがなを付ける｜読みを伝える三つの役割

慈愛妃きづな

2026-11-10

この記事には広告・アフィリエイトリンクが含まれます。

ふりがなはrubyで元の文字と読みをまとめ、rtに読みを書きます。rpはルビに対応しない表示環境で使う括弧です。文字の上へ手作業で配置する前に、要素の役割を押さえましょう。

元の文字と読みを一組にします

漢字へふりがなを付けたいときは、rubyの中へ元の文字とrtを置きます。たとえば「絆」の読みを示すなら、<ruby>絆<rt>きずな</rt></ruby>という形です。rubyが一組の範囲を示し、rtが読みの文字列を示します。

読みを小さな文字として別の場所に置くより、どの言葉への注釈なのかをHTMLの構造として表せます。ふりがなに限らず注釈に使える要素ですが、まずは読みを補う場面から考えると理解しやすくなります。

対応していない表示環境への備えとして、読みの前後にrpを置けます。例は<ruby>絆<rp>（</rp><rt>きずな</rt><rp>）</rp></ruby>です。通常のルビ表示では、rpの括弧は表示されません。

rp自体が読みを担当するわけではありません。「元の文字」「読み」「代替表示用の括弧」を分けて考えると、タグが増えても関係を追いやすくなります。

一文字ずつ読みを付ける例も、熟語全体を一組にする例もあります。元の言葉と読みの対応が自然になる単位を選び、公開前に実際の文章の中で確かめましょう。

文字サイズを縮めたときやスマートフォンの幅でも、読みにくくないかを見ます。私は、タグが正しく書けた段階と、読者が楽に読める段階を分けて確認すると、細かな見落としを減らせると思います。