【簡単】htmlテキストにふりがなを表示する方法

html内のテキストで、難しい漢字にふりがなを入れたい!
このような疑問に回答します。
本記事ではrubyタグを使い、ふりがなをつける方法について解説します。
ふりがなを入れた例(コードペン参考)
See the Pen htmlテキストにふりがなをふる方法 by Kohei (@kouk05) on CodePen.dark
上記が、ふりがなをつけた参考例です。「 纏う 」にふりがなをつけてみました。
やり方は実に簡単!
フリガナをつけたい、漢字+フリガナをrubyタグで囲い、さらにフリガナ部分をrtタグで囲えばOK
<p><ruby>纏<rt>まと</rt>う</p>
以上で完了です。
まとめ
とても簡単に実装できましたが、そんなに使用頻度が高いわけでもないので、、意外と忘れそうな事でした。。
以上で解説を終わります。
目次