どんなタグ？
文字にルビ（ふりがな）をふるときに、
このrtタグを使う。
<ruby>漢字<rt>かんじ</rt></ruby><rt>タグは Ruby Text
の略で、<ruby>タグの中でつかいます。
ルビの内容となるテキストを<rt>タグで指定します。
- どのカテゴリに属しているの？
- rtタグは どのカテゴリにも属していません。
- 梱包できるタグは？
- rtタグに梱包できるタグ（コンテンツ・モデル）は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。
WEBサイトの中でも、ふりがなをふることができるんだね！
どうやって使うの？
ルビの内容となるテキストを、
<rt> タグで挟む。
<rt>タグはルビの内容となるテキストを、 <rt> 〜 </rt> で挟みます。
rt タグは、<ruby>タグの中で使用します。
- 使い方
<ruby>漢字<rt>かんじ</rt></ruby>
<body>
<p>rt タグはルビの<ruby>内容<rt>ないよう</rt></ruby>となるテキストを<ruby>挟<rt>はさ</rt></ruby>みます。</p>
</body>https://codehero.shibajuku.net/html/rt/sample01/
- どこでも使えるの？
- ruby要素の子要素として使えます。
- 気をつけることは？
- ルビに対応していないブラウザでは、rt要素の内容は本文中にそのまま表示されます。
rubyタグとセットで覚えよう！
使える属性は？
どの要素にでも使える
グローバル属性のみが使えます。
<rt> タグには、どの要素にでも使えるグローバル属性のみが使えます。
グローバル属性は、すべての要素で使用できる属性です。
サンプルが見たい
<rt>タグを使ったサンプルを
いくつか紹介。
<rt> タグを使ったサンプルを紹介します。
基本的な<rt>タグのサンプル
<body>
<h1>難しい食べ物の漢字</h1>
<ul>
<li><ruby>陸蓮根<rt>おくら</rt></ruby></li>
<li><ruby>和蘭芹<rt>パセリ</rt></ruby></li>
<li><ruby>鹿尾菜<rt>ひじき</rt></ruby></li>
<li><ruby>甘蕉<rt>ばなな</rt></ruby></li>
</ul>
</body>https://codehero.shibajuku.net/html/rt/sample02/
ルビ未対応ブラウザを考慮したサンプル
ルビ未対応ブラウザでは、<rt>タグの中身がそのまま表示されてしまいますが、<rp>タグをつかって、ルビ未対応ブラウザを考慮した書き方ができます。
<rp>タグの内容は、ルビ未対応のブラウザでのみ表示されます。
ルビ未対応ブラウザの場合、「ルビ未対応(みたいおう)ブラウザを考慮(こうりょ)したサンプルです。」のように表示されます。
ただし、<rt>タグは、現在ではすべての主要ブラウザに対応しているので、基本的には不要となります。
<body>
<p>ルビ<ruby>未対応<rp>（</rp><rt>みたいおう</rt><rp>）</rp></ruby>ブラウザを<ruby>考慮<rp>（</rp><rt>こうりょ</rt><rp>）</rp></ruby>したサンプルです。</p>
</body>https://codehero.shibajuku.net/html/rt/sample03/
むずかしい漢字には、ふりがながあると、読みやすいですね
デフォルトスタイルは？
小さな文字で表示されます。
具体的には、下記のCSSと同等のスタイルが適用されます。
rt {
line-height: normal;
-webkit-text-emphasis: none;
text-indent: 0px;
}
ruby > rt {
display: block;
font-size: 50%;
text-align: start;
}ルビなので控えめな文字サイズです
対応ブラウザは？
すべての主要ブラウザで使用できます。
<rt>タグは HTML5以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar 5 ~
- Edge
- Edge 79 ~
- Google Chrome
- Google Chrome 5 ~
- Firefox
- Firefox 38 ~
- Safari
- Safari 5 ~
- Opera
- Opera 15 ~
モダンブラウザは問題ありません。
