HTML <ruby> element

<ruby>は字や単語にルビ(ふりがな)を振るHTMLタグである。ルビの振りかたには「モノルビ」と「グループルビ」の2通りがある。

モノルビ

ひとつひとつの漢字にルビ(ふりがな)を振る。振り仮名は各々の文字に対して振られる。

<ruby>
  親字<rt>ふりがな</rt>
</ruby>

モノルビはそれぞれの漢字の読み方がわかるが、親字の間隔が均等ではなくなる。

<ruby>
  臥<rt>が</rt>
  薪<rt>しん</rt>
  嘗<rt>しょう</rt>
  胆<rt>たん</rt>
</ruby>

しんしょうたん

グループルビ

単語全体にルビ(ふりがな)を振る。振り仮名は単語全体に対して均等に振られる。

<ruby>単語<RT>ふりがな</ruby>

グループルビは親字の間隔が均等になるが、それぞれの漢字の読み方がわからない。

<ruby>臥薪嘗胆<rt>がしんしょうたん</ruby>

臥薪嘗胆がしんしょうたん

属性

ruby要素には次に示す属性を指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
HTML文書内で一意な識別子を指定する。
lang
何語で記述されているかを指定する。
lang属性
説明
ar アラビア語
de ドイツ語
en 英語
en-AU 英語(オーストラリア)
en-CA 英語(カナダ)
en-NZ 英語(ニュージーランド)
en-SG 英語(シンガポール)
en-UK 英語(イギリス)
en-US 英語(アメリカ)
es スペイン語
fr フランス語
fr-CA フランス語(カナダ)
fr-FR フランス語(フランス)
it イタリア語
ja 日本語
ja-JP 日本語(日本)
ko 韓国語
pt ポルトガル語
pt-BR ポルトガル語(ブラジル)
pt-PT ポルトガル語(ポルトガル)
ru ロシア語
th タイ語
th-TH タイ語(タイ)
tr トルコ語
vi ベトナム語
zh 中国語
zh-cmn-Hans 中国語・普通話・簡体字
zh-cmn-Hans-CN 中国語・普通話・簡体字(中国大陸)
zh-cmn-Hant 中国語・普通話・繁体字
zh-cmn-Hant-TW 中国語・普通話・繁体字(台湾)
zh-yue-Hant 中国語・広東語・繁体字
zh-yue-Hant-HK 中国語・広東語・繁体字(香港)
<html lang="ja">
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

コンテンツモデル

ruby要素は次に示すカテゴリに属する。

内容

ruby要素の内容にはフローコンテンツを含めることができる。具体的には次の要素である。

JavaScript

JavaScriptからはHTMLElementインタフェースを通じてruby要素へアクセスできる。

RT

ルビのふりがなを指定します。<RUBY>と<RUBY>の間に記述します。振り仮名をふる単語は<RB>タグで指定できます。

活字組版のルビには拗音(小書き)が無かったが、コンピュータ組版になって使用できるようになった。

構文

<RUBY>
<RB>ルビを振る文字列</RB>
<RT>ふりがな</RT>
</RUBY>

HTMLバージョン

HTML5以降

JavaScript

JavaScriptからはHTMLElementインタフェースを通じてruby要素へアクセスできる。

HTMLタグ

参考文献

Web Hypertext Application Technology Working Group (2021) "Text-level semantics" HTML Living Standard

株式会社平プロモート (2016) ルビにもルールがある ~文字組版の基本(後半)~