ホームページの漢字にふりがな（ルビ）を振る方法をご紹介します。

HTMLの<ruby>要素でふりがな（ルビ）を振る

漢字のふりがな（ルビ）など文字の発音を表示する場合には、HTMLの<ruby>要素を使います。<ruby>要素を使うと、テキストの周辺に注釈を小さく表示させることができます。

プレビューイメージ

有限会社 ( ユウゲンガイシャ ) カナメグローバルホールディングス

サンプルコード

<p>
  <ruby>
    有限会社
    <rp>(</rp>
    <rt>ユウゲンガイシャ</rt>
    <rp>)</rp>
  </ruby>
  カナメグローバルホールディングス
</p>

ふりがな（ルビ）を振りたい漢字を<ruby>要素で囲い、ふりがな（ルビ）を<rt>要素で記述しています。

<rt>要素で記述したふりがな（ルビ）を<rp>要素とカッコで囲むように記述すると、<ruby>要素を使用した注釈の表示をサポートしていないブラウザでWebページを閲覧したときに、代替の形式でふりがな（ルビ）を表示させることができます。

1文字ごとにふりがな（ルビ）を振る

<rt>要素を1文字ごとに記述することで、ふりがな（ルビ）もその様に表示させることができます（少々HTMLの可読性が悪くなりますが...）。

プレビューイメージ

有 ( ユウ ) 限 ( ゲン ) 会 ( ガイ ) 社 ( シャ ) カナメグローバルホールディングス

サンプルコード

<p>
  <ruby>
    有
    <rp>(</rp>
    <rt>ユウ</rt>
    <rp>)</rp>

    限
    <rp>(</rp>
    <rt>ゲン</rt>
    <rp>)</rp>

    会
    <rp>(</rp>
    <rt>ガイ</rt>
    <rp>)</rp>

    社
    <rp>(</rp>
    <rt>シャ</rt>
    <rp>)</rp>
  </ruby>
  カナメグローバルホールディングス
</p>

まとめ

ホームページの漢字にふりがな（ルビ）を振る方法をご紹介しました。

ホームページについて何かお困りのことがあればカナメグローバルホールディングスまでご相談ください。