HOME
ルビをふるには？
紙の印刷物などと同様にWebページの文字にもルビ（ふりがな）をふることが可能です。
文字にルビをふるにはHTMLのrubyタグをはじめとした専用のタグを使用します。
ユーザビリティ向上のためにも、難読漢字などにはふりがなを付けて読みやすくしておきましょう。
rubyタグの使い方
HTMLで文字にルビをふるには、rubyタグをはじめとした次の4つのタグを組み合わせて使用します。それぞれ単体では機能せず組み合わせてはじめてルビを表示させることができます。
- rubyタグ
- rtタグ
- rbタグ
- rpタグ
rubyタグ
rubyタグはルビをふりたい文字を指定するために使用します。rubyタグで文字全体を囲み、次のrtタグでルビを記述します。
rtタグ
rt（ruby text）タグは、 ルビを記述するために使用します。ruby要素の子要素としてルビをふりたい文字の後ろに配置します。（前に記述しても正しく表示されません）
HTML
<ruby>
難読漢字<rt>なんどくかんじ</rt>
</ruby>
プレビュー
難読漢字一文字づつにルビをふることもできる
上記の使い方の場合、漢字一文字ではなく単語全体にルビがふられていますが、下記のような記述の仕方にすれば漢字一文字ごとに対してルビをふっていくことが可能です。
HTML
<ruby>
<ruby>難<rt>なん</rt>読<rt>どく</rt>漢<rt>かん</rt>字<rt>じ</rt></ruby>
</ruby>
プレビュー
難読漢字rbタグ
rb（ruby base）タグは、ルビをふる対象を明示させたい場合に使います。省略可能な要素なので、先程のようにrbタグをつけなくてもルビは表示できます。
もしrbタグを使いたい場合は次のように記述します。
rp
rp（ruby parentheses）タグは、rubyタグが非対応ブラウザの場合に有効になる要素です。
rubyタグ非対応ブラウザではrt要素はルビとして文字の上に表示されず、ルビなのかどうかわかりづらくなってしまいます。
HTML
<ruby>
難読漢字<rt>なんどくかんじ</rt>
</ruby>
非対応ブラウザの場合
そこでrpタグを使って下の例のように記述しておくことで、非対応ブラウザではカッコの中にルビを表示するようにできます。なお、rubyタグに対応しているブラウザでは表示されません。
HTML
<ruby>
難読漢字<rp>（</rp><rt>なんどくかんじ</rt><rp>）</rp>
</ruby>
非対応ブラウザの場合
ルビを調整するCSSプロパティ
ルビのサイズや配置などはCSSのプロパティを使って調整することができます。
ルビの文字サイズを変更する【font-size】
ルビに関しても文字サイズを調整するfont-sizeプロパティで変更することが可能です。
rtをセレクターにして任意のサイズに変更します。（rtにクラスなどを付けて指定してもOK）
CSS
rt.sample1{
font-size:10px;
}
rt.sample2{
font-size:16px;
}
プレビュー
難読漢字 難読漢字CSSのfont-sizeプロパティについて詳しくはこちらのページをご覧ください。
CSSのfont-sizeプロパティの使い方
font-sizeは、その名の通り文字の表示サイズを指定するプロパティです。px、%、em（rem）、vw（vh）などの単位によって絶対・相対的な値を指定することができます。このページでは基本的な書き方から単位ごとの特徴と使い分けについて説明します...【もっと読む】
ルビの文字寄せを変更する【text-align】
text-alignプロパティを使えば、ルビを中央や左右に寄せることができます。（※わかりやすいようにletter-spacingで文字間を狭めています）
CSS
rt.sample3{
text-align:left;
}
rt.sample4{
text-align:center;
}
rt.sample5{
text-align:right;
}
プレビュー
難読漢字 難読漢字 難読漢字ルビの上下の位置を変更する【ruby-position】
ruby-positionプロパティは、ルビを文字の上につけるか下につけるかを変更できるプロパティです。
rubyタグに対して指定し、「over」で上、「under」で下にルビを表示させます。
CSS
ruby.sample6{
ruby-position:over;
}
ruby.sample7{
ruby-position:under;
}
プレビュー
難読漢字 難読漢字まとめ
以上がHTMLでルビをふるrubyタグの使い方です。
手間は掛かるかもしれませんが、読み手のことを考えてふりがなを付けてあげれば読みやすいページができあがるのではないでしょうか？