<rt>

ルビに当たる文字列

HTML5 ~ 利用可能

最終更新日: 2020.09.28

どんなタグ?
文字にルビ(ふりがな)をふるときに、
この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と同等のスタイルが適用されます。
sample要素のデフォルトスタイル
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 ~

あいっこモダンブラウザは問題ありません。

このリファレンスを書いた人

あいっこ

あいっこ

2020年8月から、Shibajukuに参加しています。 おえかきと、本と、おいしいものがすきです。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて