HTMLでふりがなを表示する方法!タグの使い方
こんにちは! あますた(@amaguristar)です。
サイトを作成してると、文字にふりがな(るび)を表示したい時ってありますよね?
例えばこんな感じ、
これを実現するには、<ruby>
タグを利用します。
具体的な使い方は、下記構造。
<ruby>
<rb>ルビをふる元の文字</rb>
<rp>(</rp><rt>ルビ</rt><rp>)</rp>
</ruby>
rb : Ruby Base の略、るびをふる元の文字
rt : Ruby Text の略、るびの文字
rp : Ruby Parenthesesの略、未対応ブラウザの際、表示する文字
<rp>
タグはルビに対応してないブラウザの場合に表示がおかしくならないようにする為のもの。基本的にルビは文字の上部に表示されますが、未対応だと続けて表示されます。具体的な例を示すと、未対応のブラウザの場合
<rp>で指定あり → 毘沙門天(びしゃもんてん)
<rp>なし → 毘沙門天びしゃもんてん
と表示されます。この時表示される()
を<rp>
で指定して分かりやすくしてます。
POINT!
ちなみに<rb>
は省略可能