HTMLでルビを振る

低年齢層向けの商品などでは漢字や読みにくい英語つづりに対して「ルビ」(ふりがな)を添えることも検討したほうが良い場面があると思います。

それ以外にも強調するためにわざとルビを打つとか、厨ニ的な読ませ方をしたい場合とか…
活用できる場面は以外にあるかもしれないのでご紹介します。

JavascriptとかCSSを駆使しなくてもHTMLだけで、ある程度表現できてしまいます。

コード

<ruby>
   <rb>浄化</rb>
   <rp>(</rp>
   <rt>カタルシス</rt>
   <rp>)</rp>
</ruby>

表示

浄化カタルシス

ざっくり解説

<rb>

ルビのボディ部、ルビを振る対象の部分ってこと

<rp>

ルビに未対応のブラウザの場合に表示する部分
上記の例では括弧の部分に<rp>を設定しているので、未対応ブラウザの場合、浄化(カタルシス)という感じに表示される

<rt>

ルビのテキスト部分。
実際に振られるテキストはココに記載する。

これら3つ以外にも <rbc>とか <rtc>タグを使うことで管理しやすくなったりしますが、基本は上記で十分なのではないでしょうか?