構文
<p>・・・
<ruby>
<rb>・・・</rb>
<rp>・・・</rp>
<rt>・・・</rt>
<rp>・・・</rp>
</ruby>
・・・</p>
説明文
<rt>タグは,漢字や単語のルビ記述する。<rt>タグは<ruby>~</ruby>の中に記載する必要がある。また,非対応のWebブラウザの為に<rt>タグの後に記載する。もし,先に<rt>タグを記載すると,非対応のWebブラウザではルビは始めに表示されてしまう。
<rt>タグは,HTML 5から新たに制定された。そのため,多くのWebブラウザがルビ表示に対応していない。例えば,Internet Explorerは対応しているが,Firefoxはルビの表示は行えない。ただし,HTML 5に含まれたことにより,各Webブラウザも対応が進むものと考えられる。
サンプル
HTMLソース
<p>春になり
<ruby>
<rb>土筆</rb>
<rp>(</rp>
<rt>つくし</rt>
<rp>)</rp>
</ruby>
が生えてきた。</p>
ブラウザ表示例
対応状況
HTML |
IE |
Firefox |
Opera |
4 strict |
4 Transitional |
5 |
6 |
7 |
2 |
3 |
8 |
9 |
× |
× |
○ |
○ |
○ |
× |
× |
× |
× |
要素,タグ
タグ要素 |
ルビ要素 |
包括可能要素 |
インライン要素 |
タグ記述条件 |
開始タグ:必須 終了タグ:省略可 |
属性
よく利用する属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
rbspan=値 |
ルビを振る文字列に関連付けるルビの数を指定する |
× |
× |
HTML 5 |
その他の属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
class=クラス名 |
このタグのクラス名。CSSでスタイルを指定する場合などに利用される |
× |
× |
HTML 5,IE |
dir=方向 |
タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する |
× |
× |
HTML 5,IE |
id=ID |
タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する |
× |
× |
HTML 5,IE |
lang=言語 |
タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する |
× |
× |
HTML 5,IE |
style=スタイル |
タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 |
× |
× |
HTML 5,IE |
title=タイトル |
タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する |
× |
× |
HTML 5,IE |
マウスやキーボードの状況変化に関わる属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
onclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
ondblclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
onmousedown=スクリプト |
このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
onmouseup=スクリプト |
このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
onmouseover=スクリプト |
このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
/tr>
onmousemove=スクリプト |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する |
× |
× |
HTML 5,IE |
関連項目