【HTML】ふりがな、ruby（ルビ）を入れる方法

2025.6.2

今回はふりがな（ルビ）を入れる方法をご紹介します。

例）檸檬レモン、薔薇ばら

こんな感じです。

HTML
<ruby>檸檬<rt>レモン</rt></ruby>

また、強調する時に文字の上に「・・・」をつける場合もrubyで入れることが出来ます。

HTML
レモンは<ruby>すっぱい<rt>・・・・</rt></ruby>ですよ。
CSS
ruby, rt {
    font-size: 24px;
    color: #fdf94a;
}
結果
レモンはすっぱい・・・・ですよ。

文字の大きさや色なども変更出来て、すごく簡単で良いですよね。
ぜひ使ってみてください。

他にもあるよ。関連記事

猫田ねこ

パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。