HTML要素辞書 by Sentaro

<ruby>

ルビ要素。東アジアの文字に発音注釈（ルビ）を付けるために使用されます。

info

概要

<ruby> 要素は、主に日本語、中国語、韓国語などの文字（ベーステキスト）に対して、発音や意味を示す注釈（ルビテキスト）を付与するために使われます。
ルビテキストは、**<rt>（ルビテキスト）要素**を使用して指定し、非対応ブラウザ向けには**<rp>（ルビ括弧）要素**で括弧を提供します。

play_circle

デモ (静的表示)

HTML (Source)

<ruby> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp> </ruby> <br><br> <p> <ruby> 魑魅魍魎 <rt>ちみもうりょう</rt> </ruby> </p>

Preview (Result)

漢 (かん) 字 (じ)

魑魅魍魎ちみもうりょう

list

属性 (Attributes)

属性名	説明
（なし）	`<ruby>` 要素自体には、固有の必須属性や推奨属性はありません。グローバル属性のみ使用可能です。

code

実用例

1. 基本的なルビの書き方（<rp>なし）

<ruby>
 故
 <rt>ふる</rt>
 郷
 <rt>さと</rt>
</ruby>

2. 古いブラウザ対応のための <rp> を含む書き方

<ruby>
 誕
 <rp>(</rp><rt>たん</rt><rp>)</rp>
 生
 <rp>(</rp><rt>じょう</rt><rp>)</rp>
 日
 <rp>(</rp><rt>び</rt><rp>)</rp>
</ruby>

3. 複数のベーステキストに対する単一のルビ (モノルビ)

<ruby>
 大
 阪
 <rt>おおさか</rt>
</ruby>

lightbulb

知っておくべき重要事項

format_text_direction_r_to_l

ルビ構造の基本
<ruby> の直下には、ベーステキスト（例：漢字）とその直後に対応する <rt> 要素（ルビ）を配置します。古いブラウザに対応する場合は、<rt> の前後に <rp> 要素を配置することが推奨されていますが、現代では省略されることがほとんどです。

accessibility_new

アクセシビリティ
スクリーンリーダーなどの支援技術は、<ruby> 要素を正しく解釈し、ベーステキストとそのルビテキストを適切に読み上げます。これにより、読解力を高め、情報へのアクセスを改善します。正しい構造でマークアップすることが重要です。

私について利用規約プライバシーポリシー