<rt>

ルビのテキスト

ruby 要素の中で、ふりがな（ルビ）の文字そのものを書く要素です。直前の親文字の上に小さく表示されます。

サンプルコード

HTML

1<p><ruby>明日<rt>あした</rt></ruby>は<ruby>晴<rt>は</rt></ruby>れるでしょう。</p>

2<p class="under"><ruby>Mimosa<rt>ミモザ</rt></ruby></p>

CSS

1p {

2 font-size: 20px;

3 line-height: 2.4;

5rt {

6 color: #a06f24;

8.under ruby {

9 ruby-position: under;

10}

ブラウザでの表示

rt は "ruby text" の略で、ルビとして表示する読みの文字を書きます。必ず ruby の中に、ふりがなを付けたい文字の後に書きます。

ブラウザは rt を親文字の上に、親文字より小さい文字で表示します。

CSSの ruby-position: under を ruby に指定すると、ルビを下に表示できます。英単語に読みを添えるときなどに使えます。

本文をコピーしたときにふりがなが混ざらないようにします。

CSS

1rt {

2 user-select: none;