CSSで、ルビの位置とそろえ方を変える方法

​2026年11月13日​2026年11月14日​CSS​HTML,Playwright,日本語組版

ルビ（ふりがな）は、ブラウザーの初期設定では文字の上に出ます。CSS の ruby-position に under を書くと、ルビを文字の下に移せます。ルビの文字を左に寄せるか、中央に置くか、均等に広げるかは、ruby-align で決めます。

ruby {
  ruby-position: under;
  ruby-align: center;
}

ruby-position: under で、ルビを文字の下に置く

ruby-position は、ルビを親文字のどちら側に置くかを決めるプロパティです。親文字は、ルビを振る対象の文字（<ruby>紫陽花<rt>あじさい</rt></ruby> なら「紫陽花」）のことです。

ruby-position は子要素に継承されます。そのため、<ruby> に書いても、段落や body に書いても、中の <rt> に効きます。検証環境でも、ruby に under を書くと、rt の計算値は under になりました。

縦書き（writing-mode: vertical-rl）では、over が右側、under が左側になります。検証環境で縦書きの段落を測ると、over のルビは親文字の右側に、under のルビは左側に出ました。CSS Ruby の仕様でも、over は横書きで上、縦書きで右と決められています。縦書きのページで「右」「左」を指定したいときも、書く値は over と under です。

ルビの分だけ、行の間隔が広がることがある

ルビは、行の上か下に場所をとります。line-height が小さいと、ルビのある行だけ間隔が広がります。

検証環境で、文字サイズ 20px、line-height: 1.5 の3行の段落を作り、2行目にルビを付けて、各行の位置を測りました。数字は、段落の上端から、その行の文字の上端までの距離です。

ルビが上にあると、1行目と2行目のあいだが2px広がりました。ルビが下にあると、2行目は動かず、2行目と3行目のあいだが2px広がりました。

同じ段落を line-height: 2 にすると、ルビが上でも下でも、行の位置は40px おきのままでした。行ごとに間隔がばらつくのを避けたいときは、ルビを付ける文章の line-height を大きめにします。

Chrome で使えるのは over と under だけ

仕様と MDN には、ruby-position の値がほかにもあります。alternate は、ルビを2段にしたときに、1段目を上、2段目を下のように交互に置く値です。inter-character は、台湾などで使われる注音符号のルビを、親文字の右側に縦に並べるための値です。

検証環境の Chromium 153 で CSS.supports() を使って調べると、受け付けたのは over と under だけでした。alternate と inter-character は false です。ruby { ruby-position: alternate; } と書いても無視され、rt の計算値は over のままでした。

何も指定しないときの計算値も over でした。仕様では初期値は alternate ですが、1段目のルビについては、alternate は over と同じ動きになると決められています。ルビが1段なら、どちらでも上に出ます。

互換性データでの対応状況は次のとおりです。

接頭辞の付いた標準外の書き方の -webkit-ruby-position も、検証環境の Chromium 153 では inter-character を受け付けませんでした。受け付けたのは before と after で、計算値はそれぞれ over と under になりました。

ruby-align で、ルビの文字の並べ方を変える

ルビが親文字より短いとき、余った幅にルビの文字をどう並べるかを決めるのが ruby-align です。値は4つあり、仕様での初期値は space-around です。検証環境でも、何も指定しないときの計算値は space-around でした。

検証環境で、文字サイズ 40px の「紫陽花」（幅 120px）に「あじさい」を付けて、ルビの各文字が描かれた位置を測りました。ルビの文字サイズは、親文字の半分の 20px になりました。「あじさい」の幅は 80px なので、余りは 40px です。表の数字は、start のときの位置から、何px右に動いたかです。

space-between では、40px の余りが文字のあいだの3か所に約13px ずつ入りました。space-around では、余りを4つに分けた 10px が文字のあいだに入り、両端には半分の 5px ずつが入りました。

ルビのほうが長いときは、親文字が並び直される

「蝸牛（かたつむり）」のようにルビのほうが長いときは、ruby-align は親文字の並び方を変えます。ルビは5文字で 100px、親文字は2文字で 80px なので、ruby 要素の幅は長いほうの 100px になり、親文字の側に 20px の余りができます。

検証環境で、親文字の2文字が描かれた位置を測りました。数字は、start のときから右に動いた量です。

このとき、ルビの5文字の位置は、どの値でも変わりませんでした。初期値の space-around では、上の画像の右側のように、「蝸」と「牛」のあいだが少し空いて見えます。親文字を詰めたまま中央に置きたいときは、center を指定します。

英字のルビは、space-between でも中央に置かれる

検証環境で「東京」（80px）に「Tokyo」のルビを付けると、space-around でも space-between でも、文字のあいだは空かず、ルビ全体が中央に置かれました。描かれた位置は、どちらの値でも、左端から 12px〜67px で同じでした。

仕様では、ブラウザーが rt に初期設定で text-justify: ruby を当てることになっています。これにより、文字のあいだを空けてよいのは、漢字やかななどの文字どうしのあいだだけになります。英字どうしのあいだは空けないので、仕様の ruby-align の節にある例のとおり、英字のルビは中央にそろいます。

ruby-align はどこに書いてもよい

ruby-align も継承されます。検証環境では、rt に直接書いても、ruby に書いても、外側の p に書いても、同じ並び方になりました。サイト全体でそろえるなら、body などの外側に1回書けば足ります。

互換性データでの ruby-align の対応状況は、Chrome・Edge が 128 から、Firefox が 38 から、Safari が 18.2 からです。4つの値はどれも、同じバージョンから使えます。