HTML & CSS

rb要素

  1. 最終更新日:
  2. 公開日:

ルビを振る対象となるテキストを指定します。
ruby要素内で複数のルビを振りたいたい場合に、ルビとテキストの組み合わせを指定する時に使用します。
2023年10月時点でFirefoxのみ正式対応し、他ブラウザは試験的な対応という位置付けになっているため、使用の際は注意が必要です。

HTML サンプルコード

<p><ruby><rb>GrayCode</rb><rb>珈琲</rb><rt>グレーコード</rt><rt>コーヒー</rt></ruby>では、いつも挽きたての珈琲をお楽しみ頂けます。</p>
  • カテゴリー

    なし

  • コンテンツモデル

    フレージングコンテンツ

  • 使用ケース

    ruby要素の子要素として使用

属性

グローバル属性

グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

次のコードは、ルビを振りたい単語を「Internet」「of」「Things」と3つの単語に分け、rt要素で各々に対応する「インターネット」「オブ」「シングス」とルビを振っています。

HTML コード例

<p><ruby>
  <rb>Internet</rb> <rb>of</rb> <rb>Things</rb>
  <rt>インターネット</rt><rt>オブ</rt><rt>シングス</rt>
</ruby>は家具や車、家、服など身近なモノをインターネットに繋ぐことで、さらに便利な道具として利用することができる技術を指します。</p>
対応しているブラウザ表示例
複数のルビに対応しているブラウザでの表示
対応していないブラウザ表示例
複数のルビに対応していないブラウザでの表示

記事一覧