コーディング

2022.07.20

【HTML5】ふりがなを振ろう!ruby要素などルビ関連要素の使い方

ruby要素はふりがなをつけるためのHTML要素で、rubyはそのままルビ(ふりがな)のことを意味します。

ルビ関連の要素はruby要素を含めていくつかあり、その使い方を混同してしまったりするので、記事にまとめてみました!

ruby要素

ruby要素は、 ルビ関連要素の大枠となるもので、他の全てのルビ関連要素はruby要素内で使用します。

ルビ関連要素は他に、rt要素、rb要素、rp要素、rtc要素の4つがあります。

rt要素

rt要素は「ruby text」の略で、ルビとして表示させたいテキストはこの要素を指定します。

この要素が一番の肝となる要素です。

See the Pen ruby要素① by spiqa design (@spiqa_design) on CodePen.

rb要素

rb要素のbは「base text」を意味し、その内容がルビを振る対象となることを表します。

上の例を見ていただければわかる通り、必ずしもrb要素で囲わなくても大丈夫です。

漢字とふりがなとで別々にスタイルを調整したい時は、漢字をrb要素で囲うといいでしょう。

See the Pen ruby要素② by spiqa design (@spiqa_design) on CodePen.

rp要素

ルビ要素に未対応のブラウザでは、漢字とルビが同じ大きさでそのまま続けて表示されてしまいます。

上記例だと、そのまま「寿司すし」と表示されます。

rp要素は未対応のブラウザでルビ要素を表示させた時、ルビに()をつけることができる要素です。
表示を「寿司(すし)」と表示されるようにします。

対応ブラウザではrp要素の内容は表示されません。

rp要素のpは「parentheses(丸かっこ)」という意味です。

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

rtc要素

rtc要素は、rt要素をグループ化する要素です。

rtcは「ruby text container(rt要素の入れもの)」という意味です。

たとえばひらがなのルビだけでなく、下にローマ字のルビも振りたい時などに、それぞれのルビを区別するためにrtc要素を使用します。
※下の例では特にスタイル調整していないのでローマ字部分がそのまま続けて表示されています。

See the Pen ruby要素④ by spiqa design (@spiqa_design) on CodePen.

ルビ関連要素の使い方まとめ

関連要素がruby要素も含めると合計5つもあるので、こんがらがってしまいますよね。

自分の備忘録としてもこの記事を書きました。そんなに頻繁に使用するHTMLタグでもないので、使い慣れるまではこの記事をぜひ参考にしてください!

こちらの記事もおすすめ

この記事をシェアする

関連記事

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2022.11.15

    Wordpressで多言語対応をする方法

    コーディング

    制作

  • 2022.10.24

    超簡単!?たった15分でカウントダウンを作成する方法

    コーディング

    制作

おすすめ記事

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2022.06.09

    この世界はコードでできている#1

    コーディング

    制作

×