コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

HTMLにて るび をつけるときにはrubyタグを使う

Railsやってるとまじで混乱するタグ

仕様

<ruby> - HTML: HyperText Markup Language | MDN

使い方

るび、いわゆるふりがなを振りたい文字列を <ruby></ruby> で囲んで、<rt></rt> でふりたい文字を書く。

rubyタグに対応していないブラウザは、そのまま字が出るので、補足として出したい文字を<rp> タグで囲むと、非対応のときはでる(という話だが昨今非対応のブラウザがなくなって来てるので確認しづらい)

<ruby>
魑魅魍魎<rt>ちみもうりょう</rt>
</ruby>
が押し寄せてくる

と書くと

f:id:shinkufencer:20190802000150p:plain
上にちょこんと乗る

と出る

ちなみに

<ruby>
<rt>ちみもうりょう</rt>魑魅魍魎
</ruby>

と書くとNG

f:id:shinkufencer:20190802000211p:plain
不適当な位置に出る

関連サイト