HTMLでルビ（ふりがな）を振る方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、HTMLでルビを振る方法をご紹介します。

普通に生きていたらまず間違いなくルビを振るなんて案件に携わることないと思っていたんですが、昨年ある案件でルビを振らざるを得ない状況になり調べた時の備忘録です笑

それでは参ります。

HTMLでルビを振れるようになろう！

実装イメージ

いかがですか？ルビ振りたくなってきましたか？笑

実装のポイント

今回の実装のポイントは、

となります。

コードを見ながら確認していきましょう。

テキストをrubyタグで囲い、ふりがなをrtタグで表現する

ハイキュー!!の主人公の名前にルビを振ってみます。

<p>
  雑草出身
  <ruby>
    日向翔陽<rt>ひなたしょうよう</rt>
  </ruby>
</p>

超簡単ですね！

サンプルコード

ハイキュー!!の主役2人でサンプルを作ったのでご覧になって下さいまし(^o^)

↓↓↓

See the Pen
zYxPzGL by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、HTMLでルビを振る方法をご紹介しました。

いつの日か、漢字にルビを振らなければいけない案件に携わった時に本記事を思い出していただければ幸いです(^o^)

最後までご高覧いただきありがとうございました！