サイト上の漢字にふりがな（ルビ）を振る方法とは？？

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

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

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

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

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

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

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

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

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

山<rt>やま</rt>

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

まとめ

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