【HTML5】文字にふりがな・注釈をつける<ruby>,<rt>,<rp>

この記事について

HTML5でのふりがな・注釈の付け方をさらっとまとめています。
各タグの詳細は、最下部の**「参照URL」**を参考にしてください。

<ruby>,<rt>で文字にふりがな・注釈をつける

下記のソースのようにふりがなを付けたい箇所を<ruby>タグで囲み、
ふりがな・注釈となる箇所については<rt>タグで囲みます。

ソース

ruby.html

<ruby>Qiita<rt>キータ</rt></ruby>

<hr>

ペンギンが<ruby>学<rt>がく</rt>習<rt>しゅう</rt></ruby>する

実際の表示

Qiitaキータ

---

ペンギンが学がく習しゅうする

rubyとは

ふりがなや注釈のことを英語でrubyと言います。
日本語で「ルビをふる」という表現をすることもあります。

<rt>タグについて

Edgeについては<rt>タグが未対応なため、
上記のふりがなについては下記のように表示されるかもしれません。
こちらについては筆者自身で試してはおらず、
MDNのサイトを参照しています。

Qiita キータ

---

ペンギンが学 がく 習 しゅうする

<rp>タグについて

今まで登場してきていませんが、<rp>タグというタグもあります。
こちらは、上記の`'タグが使えないEdgeでルビを表示する時に
ふりがなだとわかるような形で表示するために使用します。
具体的には下記のように使用します。

ソース

ruby.html

<ruby>Qiita<rp>(</rp><rt>キータ</rt><rp>)</rp></ruby>

実際の表示

Edge以外の場合

Qiitaキータ

Edgeの場合
  ※下記のように表示されるかもしれません

Qiita(キータ)

参照URL

• <ruby>タグについて | MDN
• <rt>タグについて | MDN
• <rp>タグについて | MDN