はじめに
「ホームページの漢字にふりがなを付けたいけれど、HTMLではどう書けばいいの？」
「ページ内の漢字すべてに、自動でルビを振ることはできるの？」と迷っていませんか。
子ども向けのページや、読み方が難しい固有名詞を掲載するページを作っていると、漢字の上に読み方を表示したくても、どこにどのタグを入れればよいのか分からず迷ってしまいますよね。
この記事では、HTMLでルビを付ける基本的な書き方から、自動でルビを付与する方法、導入前に確認したい注意点まで順を追って説明していきます。
ホームページにルビを振る基本的な方法
ホームページの文字にルビを表示する場合は、HTMLのrubyタグを使い、読み方をrtタグで指定します。
ここでは、ルビを表示する仕組みと各タグの基本的な書き方、ルビを振る単位について順に説明します。
HTMLのrubyタグを使えばホームページにルビを表示できる
ホームページの文字にルビを付けるには、読み方を付けたい文字をrubyタグで囲みます。
rubyタグの中に元の文字と読み方を記述すると、対応するブラウザでは文字の上にルビが表示されます。
必要な漢字や単語だけを指定できるため、読み方を補足したい部分に使いましょう。
ruby・rt・rpタグの基本的な書き方
rubyタグの中に元の文字を記述し、その直後のrtタグに読み方を指定します。
rpタグは、rubyタグに対応していないブラウザで読み方を括弧付きで表示するためのタグです。
基本的には、元の文字と読み方を対応させる形で記述すればルビを表示できます。
単語単位・1文字単位でルビを振る方法
単語全体にルビを付ける場合は、単語を1つのrubyタグで囲んで読み方を指定します。
漢字ごとの読み方を分かりやすくしたい場合は、1文字ずつrubyタグで囲んで設定します。
見せたい読み方に合わせて、単語単位と1文字単位を使い分けるとよいでしょう。
ホームページにルビを振る方法は2つある
ホームページにルビを振る方法は、必要な文字へHTMLで個別に設定する方法と、サイト内の文字へ自動で付与する方法に分けられます。
ここでは、個別設定と自動付与の違い、ルビの量に合わせた選び方を説明します。
必要な箇所だけならHTMLで個別にルビを設定する
数語や特定の漢字だけにルビを振る場合は、対象の文字にrubyタグとrtタグを設定します。
必要な箇所だけ指定できるため、ルビの範囲が限られている場合に向いています。
ただし、対象が増えるほど手作業も多くなる点には注意しましょう。
サイト全体にルビを振るなら自動付与する方法もある
複数のページやサイト全体にルビを振る場合は、読み方を自動で付与する方法もあります。
1か所ずつrubyタグを記述する手間を減らせるため、ルビを付けたい文字が多い場合に便利です。
広い範囲に設定したい場合は、自動付与できる仕組みを検討してみましょう。
WordPressで運営している場合は、HTMLを1か所ずつ編集せずにルビを設定できる方法も確認しておくと便利です。
▶WordPressでふりがな（ルビ）を付ける方法！自動表示する方法も解説
少量なら個別設定・大量なら自動付与を目安に選ぶ
ルビを振る箇所が少なければHTMLで個別に設定し、複数ページにわたって多くの文字に付けるなら自動付与が向いています。
どちらにするか迷ったときは、対象となる文字数やページ数を確認すると選びやすくなります。
ホームページにルビを振るときの注意点
ホームページにルビを振るときは、読み方を補うだけでなく、文章全体の読みやすさや表示状態も確認する必要があります。
ここでは、ルビの量、自動付与した読み方、デザインや表示速度の3点から注意点を説明します。
ルビの付けすぎは文章が読みにくくなることがある
ルビを多く付けると行間が広がり、かえって文章を追いにくくなることがあります。
すべての漢字に付けるのではなく、読み方が難しい漢字や補足が必要な語句に絞るとよいでしょう。
設定後は実際のページを確認し、文字や行の間隔が読みやすいか確かめてください。
自動付与では読み方が間違っていないか確認する
自動付与では、文脈によって読み方が変わる漢字を正しく判定できない場合があります。
設定後は元の文字とルビを確認し、間違っている箇所があれば対象から外すか、正しい読み方へ修正しましょう。
デザイン崩れや表示速度への影響を確認する
ルビを追加すると文字の高さや行間が変わり、レイアウトが崩れることがあります。
設定後はパソコンとスマートフォンで、文字の重なりやはみ出しがないか確認しましょう。
自動付与の仕組みを導入した場合は、ページの表示が遅くなっていないかも確認しておくと安心です。
スマートフォンで文字が重なったり、レイアウトが崩れたりする場合は、モバイル表示の確認方法もあわせて見直してみましょう。
▶ホームページをスマホで確認する方法！表示崩れのチェックポイントも解説
まとめ
ホームページのルビは、少ない箇所ならHTMLで個別に設定し、複数ページに多く付ける場合は自動付与を活用すると作業を減らせます。
ただし、ルビを付けすぎるとかえって読みにくくなるため、本当に必要な漢字や語句に絞ることが大切です。
設定後は読み方や表示の崩れを確認し、読みやすいページに整えてから公開しましょう。
