Webサイトで難しい漢字や専門用語を使う際、読み仮名（ふりがな）を振ることでユーザーの利便性は大きく向上します。
<ruby> が用意されており、特別なプラグインや画像を導入しなくても、簡単にテキストの上にふりがなを表示させることができます。この記事では、HTMLを使った基本的なルビの振り方から、ブラウザ未対応時の対策、さらにCSSを使ってルビの文字サイズや表示位置（上下）をカスタマイズする方法まで、サンプルコード付きで詳しく解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
HTMLでルビを振る基本：rubyタグとrtタグ
ルビを表示するためには、親要素となる <ruby> タグと、ふりがな部分を指定する <rt> タグの2つを組み合わせて使用します。
まずは最もシンプルな実装方法を見てみましょう。
基本的な書き方
対象となる漢字とふりがなをセットで記述します。
<p>
昨日は<ruby>焼肉<rt>やきにく</rt></ruby>を食べました。
</p>
実行結果
昨日は焼肉を食べました。
コード解説
<ruby>: ルビを振りたい「漢字」と「ふりがな」の全体を囲むタグです。ここがルビの範囲となります。<rt>(Ruby Text): 実際に表示させる「ふりがな（ルビテキスト）」を囲むタグです。- ブラウザ上では、
<rt>で囲んだ文字が、直前の文字の上に小さく表示されます。
未対応ブラウザへの配慮：rpタグで括弧を表示する
現在の主要なブラウザ（Chrome, Safari, Edge, Firefoxなど）はルビ表示に対応していますが、音声読み上げソフトや非常に古い環境など、ルビが正しく表示されないケースもゼロではありません。
そうした場合に備えて、<rp> (Ruby Parentheses) タグを使って、ルビを括弧 ( ) で囲んで表示させる方法があります。
rpタグを使った書き方
ルビに対応しているブラウザでは <rp> の中身は無視（非表示）され、非対応のブラウザでのみ表示されます。
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
対応ブラウザでの表示： 漢字
非対応ブラウザでの表示イメージ： 漢(かん)字(じ)
コード解説
<rp>: ルビ非対応環境でのみ表示される「括弧」を指定するタグです。<rt>の前後に配置することで、ルビ機能が効かない場合に「漢字(かんじ)」のようにテキストとして自然に読めるようにします。- 現在のWeb制作では必須ではありませんが、アクセシビリティを高めるための丁寧な実装と言えます。
CSSでルビのデザイン（サイズ・位置）を調整する
デフォルトのルビは文字サイズが小さすぎたり、位置が微妙だったりすることがあります。
これらはCSSを使って自由にカスタマイズ可能です。
ルビの文字サイズを変更する
ルビ部分（rt タグ）に対して font-size を指定することで、大きさを調整できます。
デフォルトは親文字の約50%のサイズです。
<p class="large-ruby">
<ruby>紫陽花<rt>あじさい</rt></ruby>
</p>
<style>
.large-ruby rt {
font-size: 0.8em; /* 親文字の80%のサイズに設定 */
}
</style>
実行結果
紫陽花
コード解説
rt要素に対してCSSを適用します。0.8emと指定することで、本文の文字サイズの80%の大きさになります。高齢者向けサイトなどで読みやすくしたい場合に有効です。
ルビを文字の下側に表示する（ruby-position）
通常は文字の「上」に表示されますが、デザインによっては「下」に表示したい場合もあります。
CSSの ruby-position プロパティを使えば、上下の配置を制御できます。
<p>
<ruby class="under-ruby">
English<rt>イングリッシュ</rt>
</ruby>
</p>
<style>
.under-ruby {
ruby-position: under; /* ルビを下側に表示 */
}
</style>
実行結果
English
コード解説
ruby-position: under;: ルビをベースラインの下（横書きの場合は文字の下）に配置します。- デフォルト値は
over（上）です。 - 英語の教材や、翻訳を表示する際などに便利なテクニックです。
一文字ずつルビを振る「モノルビ」のテクニック
熟語全体にまとめてルビを振る「グループルビ」ではなく、漢字一文字ずつに対応させて振る「モノルビ」にしたい場合は、書き方を工夫します。
1文字ごとにrubyタグで囲む必要はない
<ruby> タグの中に、「漢字」と「ふりがな（rt）」のペアを順番に並べるだけで、ブラウザが自動的に対応関係を判断して表示してくれます。
<!-- 良い例：1つのrubyタグ内で完結させる -->
<ruby>
東<rt>とう</rt>
京<rt>きょう</rt>
都<rt>と</rt>
</ruby>
実行結果
東京都
コード解説
- 「漢字A」→「ふりがなA」→「漢字B」→「ふりがなB」の順に記述します。
- こうすることで、ブラウザは「東」の上に「とう」、「京」の上に「きょう」を配置してくれます。
- わざわざ
<ruby>東<rt>とう</rt></ruby><ruby>京...とタグを分ける必要はありません。
ルビを使う際の注意点と行間について
ルビを使用すると、その行だけ文字の高さが高くなるため、「行間（line-height）」が不揃いになるという問題が発生しがちです。
これを防ぐためには、あらかじめ文章全体の行間を広めに設定しておくことが推奨されます。
p {
line-height: 1.8; /* ルビが入っても崩れにくい広めの行間 */
}
一般的に 1.5 程度ではルビが上の行に重なったり詰まって見えたりするため、ルビを多用するページでは 1.8 〜 2.0 程度確保しておくと美しく表示されます。
HTML/CSSのスキルを活かして年収を上げる方法
以上、HTMLでルビ（ふりがな）を振るrubyタグの使い方について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
