HTML・CSS：ルビを振るrubyタグ、rubyタグに対応していないブラウザにルビを対応させるrpタグ、ルビをふる対象の文字を指定するrbタグ、ルビの内容となるテキストを指定するrtタグ

<ruby>タグ、<rp>タグ、<rb>タグ、<rt>タグとは

<ruby>タグ、<rp>タグ、<rb>タグ、<rt>タグとは、文字通りルビを振るためのタグになります。ルビってなんぞ？って方はこちらをごらんください。↓

君くん子しは和わして同どうぜず。

このように、難読漢字にふりがなを振ったり、例えば中二病…えっとゲームの技名にフリガナをふったり、人名の読み仮名を上に表示するときに使います。

永遠の光エターナルライト

一いちもんじ

これらのタグは一つだけでは成立せず、最低でも<ruby>タグと<rt>タグの２つは必要になります。

<ruby>タグは、そこがルビを振るための文字だよ～って大きな枠を指定します。上に付ける読みがなの内容はまた別のタグを使うので、どこからどこまでがルビのための文字なのかという範囲を<ruby>と</ruby>の間に挟んで使います。

<rt>タグは、ルビの内容を指定します。さきほどの例で言うと「エターナルライト」の部分です。

<ruby>タグは基本それだけで使用することはありません。最低でも<rt>タグと合わせて使用します。
使い方としては、ルビを振りたい単語とそれに関する読み仮名のタグを<ruby>と</ruby>で挟むイメージです。

<ruby>永遠のハゲ<rt>エターナルハゲ</rt></ruby>

これを表示するとこうなります↓

永遠のハゲエターナルハゲ

この場合「永遠のハゲ」にエターナルハゲというルビを振るまで<ruby>と</ruby>タグで囲っています。
例えばですが「永遠」の部分のみにルビを振りたいときはこうなります。↓

<ruby>永遠<rt>エターナル</rt></ruby>のハゲ

永遠エターナルのハゲ

では「永遠のハゲ」の「永遠」の部分と「ハゲ」の部分にルビを振りたいときはどうすればいいでしょうか？そうです、簡単ですね。こうすればOKです。

<ruby>永遠<rt>エターナル</rt></ruby>の<ruby>ハゲ<rt>ハゲ</rt></ruby>

永遠エターナルのハゲハゲ

ルビを振る部分部分に<ruby>タグと<rt>タグを両方つけてあげればOKです。

<rp>タグとは、<ruby>タグに対応していないブラウザのため（Internet Explorer）に使うタグです。

他サイトでfirefoxが対応していないという記事を拝見しましたが、実際にfirefoxで表示してみると普通にルビとして表示されたため、firefoxは対応しています。（もしかしたらバージョンによっては表示されないのかも知れませんが…。）

きちんと対応してくれるブラウザには表示されず、対応されないブラウザに関してのみ表示（処理）をしてくれるものです。もしもブラウザがInternet Explorerでこの<rp>タグを使っていない場合、単なるテキストとして表示されてしまうので↓

永遠のハゲエターナルハゲ

その前後に（）を付けてあげるためのタグです。
ちなみに<rp>タグを使った場合で具体的にどんな風に表示されるかというと、ルビを振りたい部分が（）の中に表示されるようになります。こんな感じです↓

永遠のハゲ（エターナルハゲ）

<rp>タグの使い方は、ちょっと複雑かもしれません。が、使い方は単純で<rp>タグの中には　（　か、もしくは　）　しか入りません。ルビを振りたい文字<rt>タグの前に<rp>タグで（を囲ってあげる必要があります。実際に見たほうが早いと思うので例題を示します↓

<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>

これを表示するとこうなります。↓

漢（かん）字（じ）

対応しているブラウザだと普通にルビが振ってある状態で表示されているでしょう。残念ながらIEをダウンロードするのが無理だったので確認ができないのですが、IEで表示をされている方にはこう表示されているのではないでしょうか。

永遠のハゲ（エターナルハゲ）

<rb>タグとは、ルビを振る対象を括る為のタグになります。例えばですが「風呂敷」という漢字にルビを振りたいとします。今までのやり方でルビを振るとこうなりますね。

風呂敷ふろしき

お分かりだろうか…？ルビと漢字がずれていますね。まあ普通に風と呂と敷に分けてルビを振ればいい話なんですけど、この<rb>タグを使ってもきれいにルビを振ることが可能です。

やり方はこの通り↓

<ruby><rb>風</rb><rt>ふ</rt><rb>呂</rb><rt>ろ</rt><rb>敷</rb><rt>しき</rt></ruby>

読ませたい文字を<rb>タグで囲み、その次にルビを<rt>タグで振る。これを表示させるとこうなります↓

風ふ呂ろ敷しき

まあぶっちゃけて言うと人名とかは大事ですしこうやって１文字１文字にきちんとルビを振ったほうが良いでしょうけれども、技名だとかどうでもよさそうなのにいちいちこんな手間をかけてらんないよねｗとは思います。

ちなみにこれと同じ表示結果にはこの方法でも可能です。

<ruby>風<rt>ふ</rt></ruby><ruby>呂<rt>ろ</rt></ruby><ruby>敷<rt>しき</rt></ruby>

風ふ呂ろ敷しき

こっちのほうが単純明快な気がしますね…。