皆さんは<ruby>タグは知っていましたか？あまり、知っている人はいないのではないでしょうか？自分は今回の課題で初めて知る事になりました。

<ruby>要素とは

<ruby>要素とは、テキストにルビ（ふりがなや読み方）を振る際にルビを振る範囲全体を囲むために使用されます。<ruby>要素は、<rb>要素,<rt>要素,<rp>要素の３つの要素と組み合わせて使用される要素です。

rb要素、rt要素

rb要素は、ルビを振る対象となるテキストを指定するための要素です。

rt要素は、ルビとして表示するテキストを指定するための要素です。

See the Pen Untitled by 後藤匠 (@espancgx-the-sans) on CodePen.

rp要素

ルビに対応していないブラウザで、ルビテキストを囲むための括弧を指定するための要素です。書き方はルビを振りたい字の後ろに<rp>(</rp><rt>読み仮名</rt><rp>)のように書きます。

See the Pen Untitled by 後藤匠 (@espancgx-the-sans) on CodePen.

<ruby>要素とbefore疑似要素の違い

ruby要素もbefore疑似要素は共にテキストになんらか装飾をするために使われますが、役割と機能がそれぞれ異なります。ruby要素は主に漢字などにルビ（ふりがなや読み方）を使用される一方で、before疑似要素は要素の前に追加のコンテンツを挿入するために使用され、ルビとは関係がありません。

まとめ

ruby要素はテキストにルビを振るための要素です。ですが、ふりがなならbefore疑似要素でも良くないと思われる人もいると思います。しかし、それはあまり良くないので、テキストに読み仮名を振りたいと思った時にはruby要素を使いましょう。テキストに装飾をしたいと思ったときに、before疑似要素を使うように使い分けるようにもしましょう。