htmlでルビを振る方法

htmlの文章にルビを振る際のタグです。
基本的なコーディングテクニックですが、今まで使わないで来てしまったので覚書として。

<ruby>
<rb>本気</rb>
<rp></rp>
<rt>マジ</rt>
<rp></rp>
</ruby>

こんな感じで表示されます。

本気 マジ

<ruby>→ルビを振る文字のタグ

<rt>→ルビのタグ

<rp>→このタグ間の文字はルビ非対応ブラウザの時に表示されます

ですので、ルビ非対応のブラウザでは

本気(マジ)

と表示されます。

<ruby>の動作環境

HTML 4.01では定義されていませんのでご注意ください。
ブラウザでは、Internet Explorer 5以降、 Google Chrome 5以降、 Safari 4.1以降対応となっています。
2021年6月30日現在、各ブラウザの最新バージョンはInternet Explorer 11、Google Chrome 91、Safari 14.1ですのでほぼ対応していると言ってよいと思いますが、念のため非対応のためのタグを振っておくと安心だと思います。

Home
つくる
特長
無料相談
公式LINE
問合せ