htmlでふりがな（ルビ）の振り方

こんにちは。明けましておめでとうございます＾＾
まだ体が本調子ではないのですが笑、いつも通りブログを書いていきたいと思います！

今日はhtmlでふりがなを振る方法について書きます(^○^)

↑ブラウザで見るとこんな感じです

使う要素

使う要素はrubyです。

この要素内に対象のテキストを配置してrt要素でふりがなを指定します。

言葉で説明するより見た方がわかりやすいのでコードをのせますね＾＾

使い方

        <div class="txt">お<ruby>正月<rp>（</rp><rt>しょうがつ</rt><rp>）</rp></ruby></div>

『正月』にふりがなを振りたいのでこの2文字を<ruby>で囲います。

そして、ふりがなである「しょうがつ」を『正月』の後ろに記述し、<rt>で囲います。

ここで、もう一つ、<rp>という要素があるのにお気づきでしょうか？＾＾

これは非対応ブラウザ対策でつけているもので、この中にカッコを入れると非対応ブラウザでだけふりがながカッコ付きで表示されるようになります。

↓こんな感じで

他にも要素はありますが、個人的には基本的にこの3つを抑えておけばいいかなと思っています。

では今日はここまで〜〜