<ruby>

文字のルビを表す

HTML5 ~ 利用可能

最終更新日: 2021.05.02

どんなタグ?
文字にルビをふる場合に
<ruby>タグを使う

コードサンプル
<p>
<ruby>吾輩<rp>(</rp><rt>わがはい</rt><rp>)</rp></ruby>は猫である
</p>

ruby (ルビ)要素は <ruby></ruby> タグで挟んだ箇所にルビを振ることができます。ruby要素内にrb要素でルビを振る対象テキストrt要素でふりがなを指定する必要があります。

ruby要素は、HTML5から標準仕様に追加されました。
元々Internet Explorer5.0の独自機能として実装され、ルビをふる対象文字を<rb>タグで囲んでいましたが、HTML5では、<rb>タグは省略して<ruby></ruby>内には、<rp>タグと<rt>タグのみ記述します。
どのカテゴリに属しているの?
ruby要素は フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
rubyタグに梱包できる要素コンテンツ・モデルは、フレージング・コンテンツただしruby要素なし、ruby要素の子孫なし です。

teru 主に難しい漢字にふりがなを付けるときに使うタグです。

どうやって使うの?
ルビをふる対象文字とルビの内容を、
<ruby> タグで挟んで使います。

rubyタグは<ruby></ruby> の中で、ルビの内容を<rt></rt>,ルビの内容を囲む記号を<rp></rp>で挟んで使用します。

rpタグで挟まれた箇所は、rubyタグに対応していないブラウザでのみ表示されます。
そのため、対象文字の始まりと終わりを示すカッコなどの記号を入れておくと、どのブラウザで見ても表示がおかしくなりません。

使い方
<ruby>ルビをふる対象文字<rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby>
コードサンプル
<p>
<ruby>凡例<rp>(</rp><rt>はんれい</rt><rp>)</rp></ruby>を調べる
</p>
ブラウザでの表示例
https://codehero.shibajuku.net/html/ruby/sample01/
どこでも使えるの?
rubyタグは フレージング・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
rubyタグに対応していないブラウザでも可読性を保つために、rpタグで「ルビ」の範囲を分かりやすくすることが大事です。

TERUrubyタグはrtタグ、rpタグとセットで覚えましょう!

使える属性は?
グローバル属性のみ使えます。

<ruby> タグには、どの要素にでも使えるグローバル属性のみ使えます。

TERU使えるのはグローバル属性のみです。

サンプルが見たい
<ruby>タグを使ったサンプルを
いくつか紹介。

<ruby> タグを使ったサンプルを紹介します。

基本的な<ruby>タグのサンプル

コードサンプル
<p>
 <ruby>薔薇<rp>(</rp><rt>バラ</rt><rp>)</rp></ruby>の花をもらった
</p> 
ブラウザでの表示例
https://codehero.shibajuku.net/html/ruby/sample02/

一文字ごとにふりがなを振るパターンのサンプル

コードサンプル
<p>
 <ruby>朝<rt>ちょう</rt>令<rt>れい</rt>暮<rt>ぼ</rt>改<rt>かい</rt></ruby>
</p> 
ブラウザでの表示例
https://codehero.shibajuku.net/html/ruby/sample03/

TERUコード上は読みにくいです

デフォルトスタイルは?
文章の段落などの
一行目のインデント幅が0です。

一般的なブラウザで ruby要素を表示した場合、一行目のインデント幅が0です。
具体的には、下記のCSSと同等のスタイルが適用されます。

ruby要素のデフォルトスタイル
ruby { text-indent: 0px; }

TERU特に問題ありません。

対応ブラウザは?
基本的にどのブラウザでも
バージョンが古くなければ大丈夫。

<ruby>タグは主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar 6 ~
Edge
Edge 12 ~
Google Chrome
Google Chrome 5 ~
Firefox
Firefox 38 ~
Safari
Safari 5 ~
Opera
Opera 15 ~

TERUどのブラウザでもバージョンが古くなければ問題ありません。

このリファレンスを書いた人

TERU

TERU

フリーランスのWEBエンジニア。 インフラSE10年→ITベンチャーへ転職→1年後にフリーランス(2019年8月~) WordPress、Shopifyを中心にサイト制作を行っています。 今はフリーランスチームでの活動に注力してます。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて