<ruby> - ルビ

トップ > HTMLリファレンス > <ruby>

■ 概要

項目説明
形式<ruby>〜</ruby>
サポートH5+ / e5+ / Ch5+ / Sa4.1+
タグの省略開始タグ:必須、終了タグ:必須
包含可能要素rb / rbc / rp / rt/ rtc

■ 説明

ruby、rbrbcrprtrtc は、日本語などの言語で「ルビ」をふるための要素です。2001年5月31日にW3Cから勧告(http://www.w3.org/TR/ruby/)されました。一部の仕様は HTML5 でも採用される予定です。

■ シンプルな使用方法

ルビのシンプルな利用方法を下記に示します。rb はルビをふる対象(ルビボディ:Ruby Body)を、rt はルビのテキスト(ルビテキスト:Ruby Text)を意味します。ルビボディとルビテキストを rubyタグで囲みます。

<ruby>
  <rb>紫陽花</rb>
  <rt>あじさい</rt>
</ruby>

ルビに対応したブラウザでは、次のように表示されます。

あ じ さ い
紫陽花

■ ルビ未対応ブラウザへの配慮

ルビに未対応のブラウザに対応するために、rp要素を用います。rp はルビ括弧(Ruby Parentheses)を意味します。

<ruby>
  <rb>紫陽花</rb>
  <rp>(</rp>
  <rt>あじさい</rt>
  <rp>)</rp>
</ruby>

ルビに対応したブラウザでは、rp要素は無視され、次のように表示されます。

あ じ さ い
紫陽花

ルビに対応していないブラウザでは、タグが無視され、次のように表示されます。

紫陽花(あじさい)

■ 複雑な使用方法

複雑な使用方法では、「山田太郎」の「山」に「やま」を、「田」に「だ」のルビをふることができます。

<ruby>
  <rbc>
    <rb>山</rb>
    <rb>田</rb>
    <rb>太</rb>
    <rb>郎</rb>
  </rbc>
  <rtc>
    <rt>やま</rt>
    <rt>だ</rt>
    <rt>た</rt>
    <rt>ろう</rt>
  </rtc>
  <rtc>
    <rt rbspan="4">凸凹会社社長</rt>
  </rtc>
</ruby>

rbc はルビボディのコンテナ(Ruby Body Container)、rtc はルビテキストのコンテナ(Ruby Text Container)を示します。<ruby>〜</ruby> の中には、ひとつの rbc要素と、ひとつかふたつの rtc要素を含みます。通常、ひとつ目の rtc は横書きの場合はルビの主体の上側、縦書きの場合はルビの主体の右側に表示されます。ふたつ目の rtc は横書きの場合はルビの主体の下側、縦書きの場合はルビの主体の左側に表示されます。rbspan属性には、対応する rb要素の数を指定します。複雑な使用方法では、rp要素は使用することができません。

ただし、この使用方法は、サポートしているブラウザは少なく、HTML5 でも採用の予定が無く、未対応ブラウザへの配慮も困難なため、使用するのは避けたほうがよさそうです。

■ HTML5での採用予定

HTML5では、rb、rbc、rtc を除く、ruby, rp, rt の3つのタグが採用される予定です。<ruby>〜</ruby> に囲まれ、rp要素でも rt要素でも無いテキストがルビボディであることは明確なため、rb要素は不要と判断されたのかもしれません。

<ruby>
  紫陽花
  <rp>(</rp>
  <rt>あじさい</rt>
  <rp>)</rp>
</ruby>

■ 属性

【一般属性】
属性意味
class=classH5+/e5+。クラスを指定します。
id=idH5+/e5+。ID を指定します。
style=styleH5+/e5+。スタイルシートを指定します。
title=titleH5+/e5+。タイトルを指定します。
dir=dirH5+/e5+。文字の表示方向を指定します。
lang=langH5+/e5+。言語を指定します。
accesskey=keyH5+。アクセスキーを指定します。
tabindex=nH5+。タブインデックスを指定します。
contenteditable=boolH5+/e55+。要素を編集可能にします。
contextmenu=idH5+。コンテキストメニューを指定します。
draggable=boolH5+。ドラッグを可能にします。
dropzone=valueH5+。ドロップを可能にします。
hiddenH5+。要素を非表示にします。
spellcheck=boolH5+。スペルをチェックします。
IE拡張属性他にもIEで拡張された属性が指定可能です。

■ 使用例

HTMLソース
<ruby>
紫陽花
<rp>(</rp>
<rt>あじさい</rt>
<rp>)</rp>
</ruby>
が咲いてます。

ブラウザ表示例(対応ブラウザの場合:模倣)
あ じ さ い
紫陽花が咲いてます。

ブラウザ表示例(対応ブラウザの場合:実例)
紫陽花 ( あじさい ) が咲いてます。

ブラウザ表示例(未対応ブラウザの場合)
紫陽花 ( あじさい ) が咲いてます。

■ 関連項目

<rb><rbc><rp><rt><rtc>

Copyright (C) 1996-2012 杜甫々
初版:2000年10月9日 最終更新:2012年3月26日
http://www.tohoho-web.com/html/ruby.htm