どんなタグ?
文字にルビ(ふりがな)をふるときに、
この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 ~
モダンブラウザは問題ありません。