【HTML Living Standard】rb要素の使い方
rb要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rbオブジェクトは、HTMLのルビ注釈において、基底となるテキスト（ルビをふる対象の文字列）を表すオブジェクトです。ウェブページ上で、主に漢字などの文字の上に読み仮名や注釈を小さな文字で表示する組版形式を「ルビ」と呼びます。このルビは、東アジアの言語圏でテキストの読みやすさや理解を助けるためによく用いられます。
rb要素は、このルビ注釈システムの中で、実際にルビが適用される元のテキスト部分を明確に指定する役割を持っています。単独で使用されることはなく、必ず<ruby>要素の内部に配置され、その子要素として機能します。通常、<rb>要素の直後には、基底テキストの上に表示されるルビの文字を囲む<rt>要素が続きます。また、ルビをサポートしない古いブラウザ向けに、ルビの前後を括弧などで囲むフォールバックテキストを提供する<rp>要素と組み合わせて使用されることもあります。
例えば、日本語の漢字に読み仮名を付ける場合、「HTML」というテキストに「エイチティーエムエル」というルビを振る際に、基底となる「HTML」の部分を囲むためにrb要素が使用されます。これにより、コンテンツの構造が意味的に明確になり、視覚的な表現だけでなく、スクリーンリーダーなどのアクセシビリティツールに対しても適切な情報が提供され、ユーザーの理解を深める重要な役割を果たしています。
構文(syntax)
1<rb>基底テキスト</rb>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML rbタグでルビのベーステキストを定義する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML rbタグのサンプル</title> 7</head> 8<body> 9 <h1>rbタグの基本的な使用例</h1> 10 11 <p> 12 <!-- ruby要素はルビ（振り仮名）を定義します --> 13 <ruby> 14 <!-- rb要素はルビの対象となるベーステキスト（本文）を定義します --> 15 <rb>漢字</rb> 16 <!-- rt要素はルビのテキスト（振り仮名）を定義します --> 17 <rt>かんじ</rt> 18 </ruby> 19 </p> 20 21 <p> 22 複数のrb要素を組み合わせて、ベーステキストの区切りを示すこともできます。 23 </p> 24 25 <p> 26 <ruby> 27 <rb>東</rb><rb>京</rb> 28 <rt>とう</rt><rt>きょう</rt> 29 </ruby> 30 </p> 31 32</body> 33</html>
HTMLのrbタグは、ウェブページで振り仮名を表示する「ルビ」機能において、その対象となる「本文」の部分を定義するために使用されます。rbは"ruby base"の略で、ルビを振りたい元のテキストを囲む役割を持ちます。
このタグは単独では機能せず、必ず<ruby>タグの子要素として配置されます。<ruby>タグはルビ全体を定義し、その中に<rb>タグでベーステキスト、<rt>タグでルビのテキスト（振り仮名）を記述するのが基本的な構造です。rbタグ自体には特別な引数や戻り値はなく、あくまでテキストの内容をマークアップするための要素として機能します。
サンプルコードでは、まず<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>と記述することで、「漢字」という文字に「かんじ」という振り仮名を表示するように指定しています。これは、ウェブブラウザがこの部分をルビとして適切に処理するための指示となります。
また、複数のrbタグを組み合わせて、ベーステキストを細かく区切ることも可能です。例えば、<ruby><rb>東</rb><rb>京</rb><rt>とう</rt><rt>きょう</rt></ruby>のように記述すると、「東」に「とう」、「京」に「きょう」と、それぞれの文字に独立したルビを対応させることができます。これにより、より細かい単位でのルビ表示を実現できます。
rbタグは、必ず<ruby>要素の内部に配置して使用する専用のタグです。単体では意味を持たず、機能しませんのでご注意ください。このタグは、ルビ（振り仮名）を振る対象となる「ベーステキスト（本文）」を定義する役割があります。ルビのテキスト自体は、セットとなるrtタグで定義しますので、それぞれのタグの役割を混同しないようにしましょう。
サンプルコードのように複数のrbタグを連続して記述することで、ベーステキストを細かく区切ってルビを振ることも可能です。ただし、ブラウザやOSの環境によってはルビの表示方法が異なる場合がありますので、実際の表示を確認することが重要です。正しく利用することで、読みやすいコンテンツ作成とアクセシビリティの向上に繋がります。
HTMLのrb要素でルビのベーステキストを定義する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML rb要素のサンプル</title> 7</head> 8<body> 9 <h1>rb要素の基本的な使用例</h1> 10 <p> 11 <!-- rb要素は、ruby要素内でベースとなるテキスト（例：漢字）を定義します。 --> 12 <!-- rt要素は、そのベーステキストに対するルビ（ふりがな）を定義します。 --> 13 <!-- rp要素は、ルビ非対応ブラウザ向けに、ルビテキストを括弧で囲むための代替テキストを提供します。 --> 14 <ruby> 15 <rb>日本</rb><rp>(</rp><rt>にほん</rt><rp>)</rp> 16 </ruby>は美しい国です。 17 </p> 18</body> 19</html>
rb要素は、HTMLで漢字などの文字にふりがな（ルビ）を振る際に使用される要素です。主に<ruby>要素の子要素として利用され、ルビを振りたい元のテキスト、つまり「ベースとなるテキスト」を定義する役割を持ちます。この要素自体には、特定の引数や戻り値はありません。
<ruby>要素は、ルビ表示全体を定義するためのもので、その中に<rb>要素で元のテキストを、<rt>要素でそのふりがなを記述します。さらに、<rp>要素を使用することで、ルビに対応していないブラウザ向けに、ルビテキストが括弧で囲まれて表示されるように代替テキストを提供することができます。
サンプルコードでは、「日本」という漢字に「にほん」というふりがなを振る例が示されています。具体的には、<ruby>要素の中に<rb>日本</rb>でベースとなるテキスト「日本」を定義し、<rt>にほん</rt>でそのルビ「にほん」を定義しています。また、ルビ非対応ブラウザ向けに<rp>(</rp>と<rp>)</rp>を配置することで、ルビが非表示の場合でも「日本(にほん)」のように表示され、情報が失われないように配慮されています。rb要素は、このように日本語の文書において、テキストの読みやすさを向上させるために重要な役割を果たします。
rb要素は、単独では機能せず、必ず親要素の<ruby>要素内で使用し、ルビを振りたい元のテキスト（例：漢字）を定義します。この要素は、ルビ（ふりがな）を定義する<rt>要素や、ルビ非対応ブラウザ向けの代替テキストを提供する<rp>要素と組み合わせて使うことで、正しくルビを表現できます。rbを明示的に使用することで、ルビ構造が明確になり、コードの可読性やアクセシビリティが向上します。また、古いブラウザや特定の環境ではルビが正しく表示されないことがあるため、<rp>要素を適切に記述し、代替表示を提供することが重要です。これにより、幅広い環境での表示互換性を保ち、ユーザー体験を損なわないように配慮することができます。