【HTML】ふりがな（ルビ）を振りたい時に！rubyタグの使い方のご紹介！サンプル付き！

普段、WEBサイトや本を読んでいるとたまに遭遇する、読み方がよくわからない文字列。

そんな時に役に立つのが「ふりがな（ルビ）」です。文字の上にちょこんと読み方が載っているのを、書面とかでよく見ると思います。

これを、WEBサイト上でやるには、rubyタグを使用します。また、セットで、rbタグ、rtタグ、rpタグも使います。

今回は、WEBサイト上で、ふりがなをつける方法を解説します。

ふりがなを付ける時に使用するタグについて

冒頭でも触れていますが、WEBサイト上で、ふりがなを振るには、ryby（ルビ）タグとrb（ルビベース）タグ、rt（ルビテキスト）タグ、rp（ルビパレンシス）タグを使用します。

まずは、サンプルをご覧ください。

<p>彼の名前は、
  <ruby><rb>山田太郎</rb><rp>(</rp><rt>やまだだろう</rt><rp>)</rp></ruby>です。
</p>

ブラウザ上では、下記のように表示されます。

彼の名前は、山田太郎(やまだだろう)です。

お悩みさん

なんかすごい、ごちゃごちゃしてますね..

お助け猫

ごちゃつかせてる要因は、rpタグです。では、それぞれ意味を見ていきましょう。

rybyタグで、対象となる文字を囲んで、rbタグでふりがなを振る文字列が入って、rtでふりがなが入る。この3つは至ってシンプルですが、最後のrpタグだけ、複雑になっていますね。これがどういう為の指定なのか、言葉だけでは伝わりづらいと思いますので、詳しく解説します。

rpタグについて

rpタグは、「ルビに対応していないブラウザで、代わりに括弧付けで表示する為の指定」であると解説しましたが、どういう事なのか、スクショをご用意しまた。

未対応のブラウザだと、上記のように、文字が繋がって表示されてしまうので注意が必要です。

「<rp>(</rp><rp>)</rp>」の指定は、上記のように、ふりがなの部分に代わりに括弧を付ける為の指定という事です。

正直、rpタグを使う必要はあるのか？

rpタグは、rubyタグに対応していない場合の緊急の措置として使用するものですが、正直、対応していないブラウザは少ないです。

なので実際、rpタグを使わない方もいます。rpタグを抜けば、下記のようにサンプルも非常にシンプルなものになります。

<p>彼の名前は、
  <ruby><rb>山田太郎</rb><rt>やまだだろう</rt></ruby>です。
</p>

普段から利用しているブラウザを確認し、必要なければ、使用しなくても問題ないと思います。

まとめ

今回は、WEBサイト上で、ふりがなを付ける方法について解説しました。

難しい漢字をよく使うサイトでは、便利なテクニックだと思いますので、是非使い方を覚えていただければと思います。