HTMLでルビを表示する方法【現役エンジニアが解説】
今回は、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でルビを下部に表示 */
}
上記のコードでは、ルビの表示位置を対象の文字列の下部に指定しています。