文字

テキストに読み方(ルビ)を付ける方法(HTMLタグ)
公開:2019.08.07 更新:2019.09.10

こんにちは、らいどらです。

この字なんて読むの?って時に役に立つ、上に書いてある読み方のあれ。(ルビっていうらしい)実装するにはどうしたらいいのでしょうか?

今回はHTMLタグを使ったルビの実装方法を紹介していきたいと思います!

ルビ表示のタグ

実装には複数のHTMLタグを組み合わせる形をとります。使うのは下記の3種です。

<ruby>(ルビ)ルビを振る範囲を示す際に使います。
<rt>(ルビテキスト)ルビを振る場合、<rt>タグに対象テキストの読み方を記述します
<ruby>鯑<rt>かずのこ</rt></ruby>
上記例文を実験→ かずのこ

基本は上記の例のように書けば無事表示されます。

ですが、これはあくまでもブラウザのVerに依存します。

ですので、古いVerの場合は表示することが出来ていません。その場合に備えるには<rp>タグを使います。

<rp>(ルビパレンシス)ruby要素に対応しない一部のブラウザにおいて、使用するタグ。出力後は対象テキストの後ろに、括弧()に入って表示される。

<rp>タグを使う場合の書式は以下の通りです。

<ruby>鯑<rp>(</rp><rt>かずのこ</rt><rp>)</rp></ruby>
上記例文を実験(使用ブラウザが対応している場合は変わりません。)→ かずのこ

ルビ表示の基本としてはこれで終了です。でも….なにか忘れているような…..?

複数字で読み方が付随するテキスト

そう、日本語には特に三文字集まって特殊な読み方をする言葉がありますね。分かりやすいものだと、旧暦の月や気象などでしょうか。

例:五月雨(さみだれ)、如月(きさらぎ)、霧雨(きりさめ)など……。

ありがたいことにHTMLタグには、既にその時用のタグが用意されております。テキストのまとまりとしての読み方を表すには、<rb>、<rtc>タグを使います。

<rb>(ルビベース)<rb>タグはまとまりルビの対象となるテキストを定義します。
<rtc>(ルビ・テキスト・コンテナー)まとまりルビを定義する場合に、読み方の集まりを定義する為に使います。

実例文は次のように書きます。

<ruby>
<rb>五</rb><rb>月</rb><rb>雨</rb>
<rtc>
<rt>さ</rt><rt>み</rt><rt>だれ</rt>
</rtc>
</ruby>

五月雨を使った実例文↓

だれ

皆さんは表示されましたか?

……実はまとまりルビの実装がされているブラウザは「Firefox」のみとなっているので、表示されない方もいるかもしれないんです。ここは少し残念ですね…..。

まとめ

さあ、どうだったでしょうか。最後のブラウザ限定は少し残念でしたが、逆に言えばルビ付けで今後使いそうなタグは<ruby>、<rt>、<rp>の三種ぐらいになりそうですね。

ぜひ、使ってみてください!

私もあなたが素晴らしいルビ付けライフを送れることを願っています。それでは!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。