【HTML】ruby要素の使い方【テキストにルビ(ふりがな等)を表示させます】

Program

ruby要素を使えば、テキストにふりがなや読み方を示すことができます。

ruby要素の基本的な使い方

以下のプログラムと、ブラウザの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ruby要素</title>
</head>
<body>
    <p><ruby>一姫二太郎<rt>いちひめにたろう</rt></ruby>は慣用句の一つである。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、「一姫二太郎は慣用句の一つである。」と書かれた文章があります。

そして、用語「一姫二太郎」は、ruby要素でマークアップされ、ふりがなや読み方について、rt要素によって「いちひめにたろう」が指定されています。

このため、用語「一姫二太郎」は、ブラウザでの表示結果の通り、用語の上方に小さい文字で「いちひめにたろう」と表示され、ユーザーは「一姫二太郎」のふりがなや読み方を知ることができます。

用語の各文字の位置に合わせて、ふりがなの配置はアレンジできる?

次に、用語「一姫二太郎」の各文字ごとに、ルビ(ふりがな等)の位置を変えてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ruby要素,rb要素,rt要素</title>
</head>
<body>
    <p><ruby>一姫二太郎<rt>いちひめにたろう</rt></ruby>は慣用句の一つである。</p>
    <p>
        <ruby>
            <rb>一</rb><rb>姫</rb><rb>二</rb><rb>太</rb><rb>郎</rb>
            <rt>いち</rt><rt>ひめ</rt><rt>に</rt><rt>た</rt><rt>ろう</rt>
        </ruby>は慣用句の一つである。
    </p>
</body>
</html>

先ほどのプログラムに、文章を追加しました。

追加した文章では、「一姫二太郎」の文字を一文字ごとにrb要素にっよって分割し、ルビである「いちひめにたろう」についても、一文字ごとに分割された「一姫二太郎」の各文字に対応するように、rt要素によって分割しました。

そして、ブラウザでの表示結果の通り、ユーザーは「一姫二太郎」について、一(いち)、姫(ひめ)、二(に)、太(た)、郎(ろう)とする、読み方を確認することができます。

複数の種類のルビを表示させることはできるか?

複数の種類のルビを表示する場合について、更に文章を追加してみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ruby要素,rb要素,rt要素,rtc要素</title>
</head>
<body>
    <p><ruby>一姫二太郎<rt>いちひめにたろう</rt></ruby>は慣用句の一つである。</p>
    <p>
        <ruby>
            <rb>一</rb><rb>姫</rb><rb>二</rb><rb>太</rb><rb>郎</rb>
            <rt>いち</rt><rt>ひめ</rt><rt>に</rt><rt>た</rt><rt>ろう</rt>
        </ruby>は慣用句の一つである。
    </p>
    <p>
        <ruby>
            <rb>一</rb><rb>姫</rb><rb>二</rb><rb>太</rb><rb>郎</rb>
            <rtc>
                <rt>いち</rt><rt>ひめ</rt><rt>に</rt><rt>た</rt><rt>ろう</rt>    
            </rtc>
            <rtc>
                <rt>イチ</rt><rt>ヒメ</rt><rt>ニ</rt><rt>タ</rt><rt>ロウ</rt>
            </rtc>
            <rtc>
                <rt>ICHI</rt><rt>HIME</rt><rt>NI</rt><rt>TA</rt><rt>ROU</rt>
            </rtc>    
        </ruby>は慣用句の一つである。
    </p>
</body>
</html>

追加した文章では、用語「一姫二太郎」について、用意した三種類のルビ(ひらがな、カタカナ、ローマ字)を、rtc要素によってそれぞれ指定しました。

そして、ブラウザでの表示結果の通り、ユーザーは、『一(いち)、姫(ひめ)、二(に)、太(た)、郎(ろう)』とする読み方、『一(イチ)、姫(ヒメ)、二(ニ)、太(タ)、郎(ロウ)』とする読み方、『一(ICHI)、姫(HIME)、二(NI)、太(TA)、郎(ROU)』とする読み方、を確認することができます。

なお、表示結果の通り、三種類のルビは、「一姫二太郎」のテキストの上方及び下方において、HTMLに記述された順に、上と下に交互に表示されることなります。

ruby要素に対応していないブラウザもある?

ruby要素とrt要素を使っても、小さく表示できないことがある?

最初に紹介した、ruby要素とrt要素だけを使った方法は、用語(例えば「一姫二太郎」)の上方に小さい文字でルビを表示させるための、最もシンプルなマークアップの方法です。

Microsoft EdgeやGoogle Chromeなどの主要なブラウザでは、既にこの方法による「ルビの表示」に対応しており、表示結果に問題はないと考えられます。

しかし、(主要とは言えない)その他のブラウザの中には、ruby要素に対応していないブラウザも存在し、多くのユーザーによって使用されているのが現状です。

具体的に、そのようなブラウザを使った場合には、例えば、

<ruby>一姫二太郎<rt>いちひめにたろう</rt></ruby>

と記述した際に、

一姫二太郎いちひめにたろうは慣用句の一つである。

と表示されてしまいます。

このため、「いちひめにたろう」がふりがな等であることを示すため、rp要素を使って、

<ruby>一姫二太郎<rp>(</rp><rt>いちひめにたろう</rt><rp>)</rp></ruby>

とマークアップすることが、推奨されています。

この記述方法にしておくことで、ブラウザがruby要素に対応している場合には、先に一例として画像表示した通り、「一姫二太郎」の文字の上方に、小さい文字でルビを表示させることができ、

ブラウザがruby要素に対応していない場合には、

一姫二太郎(いちひめにたろう)

と、表示することができ、「いちひめにたろう」がふりがな等であることを示すことができます。

つまり、ブラウザがruby要素に対応している場合には、「<rp>(</rp>」と「<rp>)</rp>」が無視されるよう、ブラウザ内で自動処理されることになります。

各種ブラウザでの表示結果

ruby要素は、ブラウザごとの対応状況がバラバラみたいだね。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
ruby要素+rt
ruby要素+rt+rb×××××
ruby要素+rt+rb+rtc×××××
ruby要素+rt+rb+rtc+rp××××
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

用語の文字ごとにルビの振り分け表示を行うrb要素や、複数の種類のルビを表示させるrtc要素は、主要なブラウザでも、未だ対応状況が揃っていないのが、現状です。

このため、用語へのルビ(ふりがな等)の表示は、先に述べた通り、最もシンプルな、ruby要素とrt要素だけを使った方法に留めておき、そのマークアップの記述の中に、rt要素を含めておくことが、最も確実な方法と言えます。

以上、ruby要素の使い方について、ご参考になさってくださいねー。

タイトルとURLをコピーしました