HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

ルビ

ruby要素

特定のテキストに対しルビ(フリガナ)を表示したい場合に使用します。フリガナを振りたいテキストをこちらの要素で囲んだ後に、rt要素rp要素rb要素rtc要素などを使ってルビの表示を指定することができます。

サンプルコード

<p>今<ruby>Fairbanks<rt>フェアバンクス</rt></ruby>に来ています。</p>
  • カテゴリー

    フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ

  • コンテンツモデル

    ・1つ以上のフレージングコンテンツ、またはrb要素を含めることができる
    rp要素の直前か直後に1つ以上のrt要素rtc要素を含めることができる

  • 使用ケース

    フレージングコンテンツが期待される場所

属性

グローバル属性

グローバル属性のみ使用することができます。

使用例

ルビ(フリガナ)を振りたい単語に対して、次のように使用します。

<article>
	<h1>美味しい珈琲の淹れ方</h1>
	<p><ruby>珈琲<rt>コーヒー</rt></ruby>の美味しい淹れ方をご紹介します</p>
</article>

表示例

ブラウザでの表示

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。