HTML5のrubyタグを使ってみる

HTML5のrubyタグを使ったことがなかったので、試しに使ってみました。

対応ブラウザ

対応ブラウザはこちら
部分的にはまだサポートできていないようですが、基本的には主要なブラウザで使えるようです。

サンプルコード

ルビを振りたい部分をrubyタグで囲い、実際のルビ部分はrtタグで指定します。

HTML

<dl>
	<dt><ruby>小鳥遊<rt>たかなし</rt>六花<rt>りっか</rt></ruby></dt>
	<dd>現役中二病患者で、無口無表情キャラにして「<ruby>邪眼<rt>イービルアイ</rt></ruby>」になりきる「<ruby>邪王真眼<rt>じゃおうしんがん</rt></ruby>」の使い手。</dd>
</dl>

rubyのデモページ
　

rubyをサポートしていないブラウザ向けに対応する場合、rpタグを使用します。

HTML

<dl>
	<dt><ruby>小鳥遊<rp>(</rp><rt>たかなし</rt><rp>)</rp>六花<rp>(</rp><rt>りっか</rt><rp>)</rp></ruby></dt>
	<dd>現役中二病患者で、無口無表情キャラにして「<ruby>邪眼<rp>(</rp><rt>イービルアイ</rt><rp>)</rp></ruby>」になりきる「<ruby>邪王真眼<rp>(</rp><rt>じゃおうしんがん</rt><rp>)</rp></ruby>」の使い手。</dd>
</dl>

rubyに対応していないブラウザの場合、rpタグの部分が表示されるようになります。
　

【参考サイト】

• ruby 要素 – HTML | MDN