rubyタグ -ルビ（ふりがなや発音ガイド）を表示する｜HTML辞典
<ruby>タグとは？
<ruby> タグは、ルビ（ふりがなや発音ガイド）を表示するためのタグです。
日本語や中国語の漢字に振り仮名をつける際に使用されます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<ruby> は 開始タグ（<ruby>）と閉じタグ（</ruby>）の両方が必要 です。
基本的な記述方法
<ruby>漢字<rt>かんじ</rt></ruby>
使用できる主な属性
<ruby> タグ自体には特別な属性はありませんが、ルビの記述には <rt> タグを使用 します。
| タグ | 説明 | 例 |
|---|---|---|
<ruby> | ルビ（ふりがな）を表示する親タグ | <ruby>東京<rt>とうきょう</rt></ruby> |
<rt> | ルビのテキストを定義 | <rt>かんじ</rt> |
CSSを使ったデザイン変更
ルビのデザインは rt に対して 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>
❌ <ruby> を単なる強調目的で使用する
<!-- NG: ルビではなく強調のために使用 -->
<ruby>重要<rt>じゅうよう</rt></ruby>な情報です。
✅ 正しい書き方（適切な用途で使用）
<p>日本の首都は<ruby>東京<rt>とうきょう</rt></ruby>です。</p>
<ruby>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<ruby> | ルビを表示 | <rt> とセットで使用 | ふりがな、発音ガイド |
<rt> | ルビの内容を定義 | ルビテキストを記述 | <ruby> 内で使用 |
<rp> | ルビ非対応ブラウザ用の括弧を表示 | ルビが表示できない環境で補助 | <ruby> 内で使用 |
使用上の注意点
✅ <rt> は <ruby> の中に配置する
<rt>を<ruby>の外に配置すると動作しない。
✅ <rp> を使うとルビ非対応のブラウザでも読みやすくなる
<rp>(</rp>と<rp>)</rp>でルビを補足できる。
関連タグ
まとめ
<ruby> タグは、HTML文書内で 漢字や単語にルビ（ふりがな）を振るためのタグ です。<rt> と組み合わせて適切に記述し、日本語の読みを補足するために活用できます。
