【CSS】ルビの位置を調整（本体から離す）方法

CSS

2023.07.19

ルビの位置を本体から離す調整方法の説明

ルビの基本的な使い方

ルビをつけたい箇所を<ruby>で囲って、その中でルビ文字を<rt> で囲みます。

↓このようにHTMLで記載すると…

よしひこは、<ruby>痛恨<rt>つうこん</rt></ruby>　の<ruby>一撃<rt>いちげき</rt></ruby>をくらった。

↓こんな感じになります。



よしひこは、痛恨つうこんの一撃いちげきをくらった。

この場合は、CSSは不要ですが、ブラウザによっては、ルビが本体にくっつきすぎたり離れたりするので、CSSで位置を調整した方が良いかと思います。
（今見ているブラウザで位置がちょうどよくても他のブラウザやスマホ、PCなどではルビの位置がずれる）

位置を固定する場合、CSSで以下のように設定します。

rt {
  position: relative;
  top: -0.8em;
  transform: translateY(-0.8em);
}

※ 一応、Chrome、Safari、Firefox、Edge／iPhone、Androidに対応していますが、ブラウザのバージョンによってはCSSが効かない場合もあるかもしれません。（要動作確認）

※あと、使用フォントによってルビの位置が変わってくるので、最低でもfont-familyの設定はしておいた方が良いかもしれません。

※あと、レイアウトきっちりしたい場合は、ルビ機能は使用しない方が良いかもしれません……。