rubyタグ ルビ（ふりがな）を振る

catnose catnose · に最終更新

HTMLの<ruby>ルビタグは、テキストにルビ（ふりがな・よみがな）を振るために使います。

<p>中国にとって<ruby>熊猫<rt>パンダ</rt></ruby>は国宝です。</p>

目次
このページの目次

HTMLでルビ（ふりがな）を振る方法

ルビを振るためには<ruby>と<rt>の2つタグを使います。具体的には、以下のような書き方をします。

  1. 単語の右に<rt>ふりがな</rt>を書く
  2. <ruby>で単語とふりがな全体を囲う
<ruby>熊猫<rt>パンダ</rt></ruby>

👆特にCSSを指定しなくても、ブラウザで「ふりがな」らしく表示してくれます。のちほどCSSでフォントサイズなどを調整する方法を紹介します。

  • この書き方は全ての主要ブラウザに対応しています。
  • <rt>は「Ruby Text」の略です。

1文字ごとにルビを振る

単語1文字ごとにルビを振りたいこともあるかもしれません。「令和」は「レイ」＋「ワ」であることを明確に伝えたい…といった場合ですね。

<ruby>
  令<rt>れい</rt>和<rt>わ</rt>
</ruby>

<ruby>
  A<rt>エー</rt>B<rt>ビー</rt>C<rt>シー</rt>
</ruby>

👆その場合、ルビを振りたい文字列のすぐ右に<rt>ふりがな</rt>を書きます。別の文字列でも同じことをします。1つの<ruby>の中に複数の<rt>が入るわけですね。見づらくなるのが難点です。

HTMLで改行すると半角スペースが入ってしまうことも

<ruby>
  令<rt>れい</rt>
  和<rt>わ</rt>
</ruby>

👆改行を入れると読みやすくなりますが、ブラウザでその部分に半角スペースが入って表示されてしまう可能性があります。

😺この例だと「令 和」のように「令」と「和」の間に半角スペースが入って表示される可能性があります。

ルビが長いと見づらくなることも

<p>まずは<ruby>HTML<rt>えいちてぃーえむえる</rt></ruby>を学習しましょう。</p>

👆こればかりはどうにもなりませんが、<rt>内のテキストが長いと、ルビだけ長くなり、左右に隙間が空いてしまうことがあるので注意しましょう。

CSSでルビのスタイルを調整

ここからはCSSでルビ（ふりがな）のスタイルを調整する方法を紹介します。

文字サイズを変更する

ルビのスタイルは、主にrt { ~ }というCSSを書くことで調整できます。文字サイズはrtに対してfont-sizeを指定することで変更できます。

rt {
  font-size: 0.7em; /* 文字サイズを大きく */
}

😺Google Chromeの場合、デフォルトのfont-sizeは50%です。

一部のルビのスタイルだけ変える

.rt-larger {
  font-size: 0.7em; /* フォントサイズを大きく */
}

👆一部のルビのスタイルだけ変えたい場合には、HTMLで<rt>にクラス名を指定しておき、そのクラスに対してCSSで装飾を行えば良いでしょう。

ルビを左寄せにする

rt {
  text-align: left;
}

👆rtに対してtext-align: leftを指定すると、ルビが左寄せになります。

ルビを中央に寄せる（文字を詰める）

.rt-center {
  text-align: center;
}

👆デフォルトでは、単語に対してルビは均等割り付けされたように表示されます。text-align: centerを指定すると、文字がギュッと詰まります。

😿text-alignより柔軟にルビの位置を調整できるruby-alignというCSSプロパティがあるのですが、これは実験的な機能で、Firefoxなどの一部のブラウザにしか対応していません。

フォントを変える

Windows、Mac、iOS、Android、それぞれで標準搭載されているフォントは異なります。フォントが異なれば、ルビの位置も少なからずズレます。そのため、できればrubyには、複数のブラウザ共通で使用できるフォントを指定するのが良いでしょう。

😺Webフォントを使えばこの問題を回避できる可能性が高いです（それでも表示のされ方が異なることがありますが…）。

ruby {
  font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

ブラウザ対応

このページで解説している<ruby>と<rt>によるルビの振り方は、Internet Explorerを含め、すべての主要ブラウザで使用できます。

📙
参考リンク
rubyのブラウザ対応状況 - caniuse.com
開く

縦書きでは使わない

ただし、CSSのwriting-modeにより、テキストを縦書き表示にした場合には、正常に表示されないことがあります。通常の横書きのテキストでのみ使用することをおすすめします。

rpタグで未対応ブラウザ対策

基本的に不要かと思いますが、念のための未対応ブラウザ対策を行うこともできます。<ruby>内で<rp>タグを使うと、その内容がルビ未対応のブラウザでのみ表示されます。

<ruby>HTML<rp>（</rp><rt>えいちてぃーえむえる</rt><rp>）</rp></ruby>

👆<rp>にはカッコを入れています。<rp>内のテキスト（カッコ）は、ルビ表示未対応ブラウザでのみ表示されます。

rubyの未対応ブラウザ対策

対応ブラウザと、未対応ブラウザでそれぞれこのような表示になるわけですね。どんな環境でも確実にきれいに表示させたい場合は<rp>を使うと良いでしょう。

HTMLの記事をもっと見る