このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

ruby”要素:ルビを振るテキストを指定HTML5で追加

記事Apr. 18th,2015
July 7th,2020
ルビを振るテキストを指定する要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

ruby”要素はrt”要素で表したルビを振る範囲を指定するための要素です。

日本語での振り仮名などのテキストの読み方、翻訳、その他の説明や注釈をつけるのに使用することができます。

ruby”要素に対応していないブラウザで表示するための括弧をrp”要素で提供することができます。

サンプルコード

モノ・ルビ

<p>
彼女は<ruby>平<rt>へい</rt>安<rt>あん</rt>京<rt>きょう</rt></ruby>で暮らしている。
</p>

彼女はへいあんきょうで暮らしている。

グループ・ルビ

<p>
意を決した彼女は<ruby>高機能携帯電話端末<rt>スマートフォン</rt></ruby>を手にとった。
</p>

意を決した彼女は高機能携帯電話端末スマートフォンを手にとった。

ruby”要素は入れ子にすることができます。

<p>
意を決した彼女は
<ruby>
<ruby>
高<rt>こう</rt>
機<rt>き</rt>
能<rt>のう</rt>
携<rt>けい</rt>
帯<rt>たい</rt>
電<rt>でん</rt>
話<rt>わ</rt>
端<rt>たん</rt>
末<rt>まつ</rt>
</ruby>
<rt>スマートフォン</rt>
</ruby>
を手にとった。
</p>

意を決した彼女は こうのうけいたいでんたんまつ スマートフォン を手にとった。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

要素の内容

ruby”要素の内容は以下のうちどちらかを1組以上を配置します。

さらに以下のうちどちらかを1組以上を配置します。

ルビと行間

多くのブラウザではルビが存在する行とルビが存在しない行が混在していると行間がバラバラになって見た目が悪くなってしまいます。行の高さがルビを振るのに足りない場合に行の高さが変わってしまうために起こります。

<p>
<ruby>清少納言<rt>せいせうなごん</rt></ruby>こそ、したり<ruby>顔<rt>がほ</rt></ruby>にいみじうはべりける人。さばかりさかしだち、<ruby>真名<rt>まな</rt></ruby>書き散らしてはべるほども、よく見れば、まだいと足らぬこと<ruby>多<rt>おほ</rt></ruby>かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、<ruby>行末<rt>ゆくすゑ</rt></ruby>うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>

清少納言せいせうなごんこそ、したりがほにいみじうはべりける人。さばかりさかしだち、真名まな書き散らしてはべるほども、よく見れば、まだいと足らぬことおほかり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末ゆくすゑうたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。

line-height”プロパティで行の高さをルビを含むことができる高さに調整すると見た目を整えることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルの文書</title>
<style>
.text-withruby {
line-height: 2.4;
}
</style>
</head>
<body>

<p class="text-withruby">
<ruby>清少納言<rt>せいせうなごん</rt></ruby>こそ、したり<ruby>顔<rt>がほ</rt></ruby>にいみじうはべりける人。さばかりさかしだち、<ruby>真名<rt>まな</rt></ruby>書き散らしてはべるほども、よく見れば、まだいと足らぬこと<ruby>多<rt>おほ</rt></ruby>かり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、<ruby>行末<rt>ゆくすゑ</rt></ruby>うたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。
</p>

...

清少納言せいせうなごんこそ、したりがほにいみじうはべりける人。さばかりさかしだち、真名まな書き散らしてはべるほども、よく見れば、まだいと足らぬことおほかり。かく、人に異ならむと思ひ好める人は、かならず見劣りし、行末ゆくすゑうたてのみはべれば、艶になりぬる人は、いとすごうすずろなる折も、もののあはれにすすみ、をかしきことも見過ぐさぬほどに、おのづからさるまじくあだなるさまにもなるにはべるべし。そのあだになりぬる人の果て、いかでかはよくはべらむ。

font-size”プロパティでルビ自体の大きさを小さくして調整することもできますが、ブラウザによっては表示する文字の最小サイズが制限されています。

仕様書

ruby”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<ruby>
定義なし

定義あり

定義あり

定義あり

定義あり
DOMインターフェース

ruby”要素は“HTMLElement”インターフェイスを使用します。

UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

ruby {
display: ruby;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク