神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

サイト上の漢字にふりがな(ルビ)を振る方法とは??

2019.11.24
HTML

 たまにサイトで、漢字にふりがな(ルビ)を振ってあるところを見かけます。

例えば以下のような感じ。

やまかわうみ

難しい漢字が表記されていた時に、ふりがながあるとその漢字も読めるので、とても便利だなぁ、と思うのですが、このふりがなを振る方法について調べてみました!

HTMLでふりがなを記述する!

 漢字にふりがなを振る方法としては、思っていたよりかは複雑ではなく、HTMLで漢字に対してふりがなを記述することで表示可能でした!

見本としては以下のような感じです。

<ruby>山<rt>やま</rt>川<rt>かわ</rt>海<rt>うみ</rt></ruby>

まず大元の部分を<ruby>~</ruby>で挟み、その中でふりがなを振りたい漢字の直後に<rt>~</rt>でふりがなを記述することで表示可能となります。

上に紹介した見本では、“山”という漢字に対して“やま”とふりがなを振りたかったので、大元となる部分を<ruby>~</ruby>で挟み、そのうえで

山<rt>やま</rt>

という風に記述することでふりがなを振っています!

まとめ

 Webサイト上で漢字に対してふりがなを振りたい…という際には、今回紹介した方法が使えるかと思いますので、是非ともご活用ください!

関連記事

スポンサーリンク
検 索