rtタグ -ルビ(ふりがな・発音ガイド)を定義する|HTML辞典
<rt>タグとは?
<rt> タグは、<ruby> タグ内でルビ(ふりがな・発音ガイド)を定義するためのタグです。
漢字や難読文字の読み方を補足するために使用されます。
コンテンツモデル
フローコンテンツ(Flow Content)、フレージングコンテンツ(Phrasing Content)。
閉じタグの有無
<rt> は 開始タグ(<rt>)と閉じタグ(</rt>)の両方が必要 です。
基本的な記述方法
<ruby>漢字<rt>かんじ</rt></ruby>
使用できる主な属性
<rt> タグには特別な属性はありませんが、<ruby> の中でのみ使用可能 です。
CSSを使ったデザイン変更
ルビのフォントサイズや色を変更できます。
rt {
font-size: 12px;
color: gray;
}
適切な使用例
✅ 漢字にルビを付ける
<p>私は<ruby>日本語<rt>にほんご</rt></ruby>を勉強しています。</p>
✅ 名前のふりがなを付ける
<p>私の名前は <ruby>山田<rt>やまだ</rt></ruby> です。</p>
✅ <rp> を併用してルビ非対応ブラウザでも読みやすくする
<p><ruby>国際<rp>(</rp><rt>こくさい</rt><rp>)</rp></ruby> 会議</p>
適切でない使用例(誤った使い方)
❌ <rt> を <ruby> の外に配置すると機能しない
<!-- NG: <rt> が <ruby> の外にある -->
<rt>とうきょう</rt>
<ruby>東京</ruby>
✅ 正しい書き方(<rt> は <ruby> 内に配置)
<ruby>東京<rt>とうきょう</rt></ruby>
❌ <rt> を <ruby> なしで使うと意味がなくなる
<!-- NG: <ruby> なしで <rt> を使用 -->
<rt>にほん</rt>
✅ 正しい書き方(必ず <ruby> 内で使用)
<ruby>日本<rt>にほん</rt></ruby>
<rt>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<rt> | ルビ(ふりがな)を表示 | <ruby> 内で使用 | ふりがな、発音ガイド |
<ruby> | ルビを表示する親タグ | <rt> とセットで使用 | 日本語、中国語の読み方補助 |
<rp> | ルビ非対応ブラウザ向けの括弧を表示 | <ruby> 内で使用 | ルビが表示できない環境で補助 |
使用上の注意点
✅ <rt> は <ruby> の中に配置する
<rt>を<ruby>の外に配置すると動作しない。
✅ <rp> を併用すると、ルビ非対応のブラウザでも読みやすくなる
<rp>(</rp>と<rp>)</rp>を追加すると、古いブラウザでも意味が伝わる。
関連タグ
まとめ
<rt> タグは、HTML文書内で <ruby> タグ内のルビ(ふりがな)を定義するためのタグ です。
必ず <ruby> の中で使用し、適切な発音ガイドを提供するために活用できます。
