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>
の中で使用し、適切な発音ガイドを提供するために活用できます。