【HTML】rubyでテキストにルビを振る方法

こんにちは朱夏です。

今回は、HTMLのrubyを使ってテキストにルビを付ける方法を解説したいと思います。

朱夏

テキストにルビを振るにはどうしたらいいんだろう？

ルビとはこんな感じで振り仮名ルビを付ける事です。
私のブログでも最近よく使っていますね。

それではやっていきましょう。

ルビの書き方

サンプルはこちらになります。

See the Pen
NWGpVXp by 朱夏 (@syunatsu1)
on CodePen.

HTMLの書き方はこちらです。

ルビを付けたいテキストを<ruby>～</ruby>の間に書きます。
更に、ルビを付けたいテキストの後ろにルビのテキストを<rt>～</rt>の中に書きます。

CSSの記述では、振り仮名を付ける位置を指定するプロパティ「ruby-position: before;」を付けています。
そのほかにも「ruby-position: after;」などもありますが、適用されるブラウザが少ないのであまり意味はないかもしれません。
Chromeでも適用されませんでした。

あとがき

というわけで、簡単ですがテキストにルビを振る方法を解説してみました。

まとめはこちらになります。

• ルビを付けたい場合は<ruby>～</ruby>の中に書く
• <rt>～</rt>にルビの内容を書く
• CSSは無くても良い

ルビは使っていて割と便利だったので紹介してみました。
割と簡単なので、使っていきたいと思います。

今回は以上です。
次回もよろしくお願いします。