Written by Kasumi

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

html内のテキストで、難しい漢字にふりがなを入れたい!

このような疑問に回答します。

本記事ではrubyタグを使い、ふりがなをつける方法について解説します。

ふりがなを入れた例(コードペン参考)

See the Pen htmlテキストにふりがなをふる方法 by Kohei (@kouk05) on CodePen.dark

上記が、ふりがなをつけた参考例です。「 纏う 」にふりがなをつけてみました。

やり方は実に簡単!

フリガナをつけたい、漢字+フリガナをrubyタグで囲い、さらにフリガナ部分をrtタグで囲えばOK

<p><ruby>纏<rt>まと</rt>う</p>

以上で完了です。

まとめ

とても簡単に実装できましたが、そんなに使用頻度が高いわけでもないので、、意外と忘れそうな事でした。。

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

【Contact Form 7】Form data to kintoneでkintone側に二重送信されるのを防ぐ【確認画面が原因】

2022.03.17
1254
WordPress プログラミング

【簡単】wordpressのショートコードを使って、投稿記事内にphpファイルを呼び出す方法

2022.02.04
2606
HTMLCSS

【CSS】flexboxで最後の要素は右寄せ・最初の要素は左寄せにする方法

2022.07.14
6017
WordPress プログラミング

【popular posts】WPP_Queryクラスを使い、ランキングをカスタマイズして表示しよう。

2021.10.20
3145