HTMLのrubyタグで文字にふりがな(ルビ)を振る方法

更新日:2022年12月13日 /  投稿日:2022年12月12日

HTMLのrubyタグで文字にふりがな(ルビ)を振る方法

本や新聞等を読んでいる時、難しい漢字や知らない英単語が出てきても、ふりがなが入っている事ですんなりと文章を読む事が出来ます。

WEBサイトでも同じようにHTMLでふりがな(ルビ)を振る事ができます。

今回はHTMLで漢字や英語にふりがな(ルビ)を振る方法についてご紹介したいと思います!

WEBサイトの漢字や英語にふりがな(ルビ)を振る方法

WEBサイトの漢字や英語にふりがな(ルビ)を振るには、rubyタグを使います。

では、さっそく使い方を見ていきましょう。

漢字にふりがな(ルビ)を振る

ruby要素の中に漢字を入力し、その漢字に対してrt要素でひらがなをマークアップします。

<ruby>
  漢字<rt>かんじ</rt>
</ruby>

以下は、上記のコードの実行結果です。

漢字かんじ

漢字ごとにふりがな(ルビ)を振る方法

漢字の1文字づつにふりがな(ルビ)を振りたい場合には、以下のようにコードを書きます。

<ruby>
  漢<rt>かん</rt>字<rt>じ</rt>
</ruby>

以下は、上記のコードの実行結果です。

かん

英語にもふりがな(ルビ)を振れます

英語にも同じようにふりがな(ルビ)を振る事ができます。

以下のようにコードを書きます。

<ruby>
  Design<rt>デザイン</rt>
</ruby>

以下は、上記のコードの実行結果です。

Designデザイン

ふりがな(ルビ)を振る時の注意点

一見、便利そうに見えるルビですが、注意も必要です。

ふりがな(ルビ)の文字が長すぎる

文字が長すぎるとかえって以下のように文章が見ずらくなるので使う

このように隙間が出来てXYZエックスワイゼット文章が見ずらくなります

ふりがな(ルビ)が効かないブラウザがある

ブラウザの種類やバージョンによっては、ふりがな(ルビ)が効かないものもあります。

そうした場合には、以下のような表示になります。

漢字かんじ

※現在はほとんどの主要ブラウザで対応済みです。

まとめ

HTMLで漢字や英語にふりがなを振る方法についてご紹介いたしましたが、いかがだったでしょうか。

難しい漢字や知らない英語がある文章ではふりがな(ルビ)を振る事で、読みやすさは上がるでしょう。

ほんの少しの気配りではありますが、この気配りが有ると無いとでは読みやすさが大きく変わってくる事もあります。

ご興味のある方は、是非お試し下さい!

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら