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

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

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

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

関連記事：CSSでWEBサイトの文章を縦書きにする方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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