MILK2016/7/1更新HTML5における<rb>タグの使い方11タイトルとURLをコピー<rb>タグは、ルビを振る際に使用するタグの1つです。Baseというものの略で、ルビを振る対象になる文字を指定します。今回は、HTML5における<rb>タグの使い方をご紹介します。HTML5における<rb>タグの使い方<rb>はルビを振る対象になる文字を指定して、テキストをブロック分けしたい時に使用します。通常ルビを振りたい場合は、<ruby>タグで全体を囲み、<rt>タグでルビを囲むことでルビを振ることができます。実際には以下のようになります。<ruby>料理<rt>りょうり</rt></ruby>1<ruby>料理<rt>りょうり</rt></ruby>表示サンプルです。此のように、ルビを振ることができました。これを、文字ごとに分割してルビを振りたい場合に、<rb>タグを使い、文字ごとに囲んで使用します。<rt>も<rb>で囲んだものと同様に区切って囲んでください。<ruby><rb>料</rb><rb>理</rb><rt>りょう</rt><rt>り</rt></ruby>1<ruby><rb>料</rb><rb>理</rb><rt>りょう</rt><rt>り</rt></ruby>これで区切りごとにルビを表示させることができます。chromeなどの未対応のブラウザでは以下のように表示されてしまうことがあります。最初のコードは、以下のような状態になっているのと同じことになります。<rb>タグが省略されている状態ということです。<ruby><rb>料理</rb><rt>りょうり</rt></ruby>1<ruby><rb>料理</rb><rt>りょうり</rt></ruby>まとめ今回は<rb>タグの紹介を行いましたが、HTML5では一番最初のコード例のように<ruby>タグで省略することができます。文字ごとに区切ってルビを振りたい場合は<rb>タグを使いましょう。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。