HTML & CSS - 読みがなのルビを表示する
読みがなのルビを表示する
読みがなのルビを表示するには、ruby 要素、rt 要素、および rp 要素の中に記述します。
テキストにルビ (ふりがな) を振るには、ルビを振る対象のテキストがわかるようにするだけでなく、ルビとして表示させるテキストを指定し、必要に応じてその他の関連要素も使用しなければなりません。ruby 要素は、そのようなルビに関連するテキストや要素全体を括る要素です。
rt 要素は、ruby 要素内でルビ (ふりがな) として表示させるテキストを示すために使用します。
rp 要素は、ブラウザがルビ (ふりがな) をサポートしていない場合に、ルビのテキストが ( ) 内に表示されるようにするために使用する要素です。rp 要素 要素の要素内容としては文章内コンテンツを入れることができますが、この要素内容はルビに対応したブラウザではそのまま表示されます。そのため日本語の場合は、ルビとして表示させるテキスト全体の直前に <rp>(</rp> を配置し、直後に <rp>)</rp> を配置するのが一般的な使用方法です。
<!DOCTYPE html>
<html lang="ja">
...
<p>
...
<ruby>
山茶花 <rp>(</rp><rt>さざんか</rt><rp>)</rp>
</ruby>
...
</p>
...
</html>読みがなのルビを表示する