HTMLでルビを表示する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでルビを表示する方法について、基本的な方法と未対応ブラウザへの対策に分け、簡単に解説していきます。

基本的な方法

ルビを表示するには、rubyタグとrtタグを使います。

rubyタグで全体を囲い、rtタグでルビそのものを囲みます。

<ruby>
見<rt>み</rt>
本<rt>ほん</rt>
</ruby>

上記のコードでは、見本の文字をみほんのルビ付きで表示しています。

未対応ブラウザへの対策

ルビ関連のタグに対応していないブラウザもあります。

その対策として、rpタグを使い、ルビを括弧書きさせておきます。

<ruby>
見<rp>(</rp><rt>み</rt><rp>)</rp>
本<rp>(</rp><rt>ほん</rt><rp>)</rp>
</ruby>

上記のコードでは、見本という文字をみほんのルビ付きで表示しています。

ルビの表示位置の変更方法

ルビの表示位置はデフォルトでは対象の文字列の上部です。

スタイルのruby-positionプロパティの値を変えると下部に変更できます。

ruby{
    ruby-position:under; /* underでルビを下部に表示 */
}

上記のコードでは、ルビの表示位置を対象の文字列の下部に指定しています。