2014年の秋に正式にW3Cから勧告されたHTML5では、

それまで一部のブラウザ用に作られたタグで、

正式なタグとして採用されたものがいくつかあります。

その中でも、利用すると便利だと思われる<ruby>というタグがあります。

このタグは感じなどに読み仮名などをルビとして表示させるためのものです。

 

↓表示例(ひょうじれい)

DEMO

 

基本的には、以下のように記述して使います。

まず、<ruby>でルビを付ける対象の文字全体を囲みます。

次に、ルビを付けたい文字のあとに、<rt>タグでルビの文字を記述すれば完了です。

 

ただ、Firefoxでは、現時点(Firefox36)ではrubyの表示に対応しておらず(プラグインが必要; 38より正式に対応予定 →追記(2015/05/22)：無事38から正式に対応されたようです<参考>)、

そういったruby非対応のブラウザに配慮したい場合は、以下のように記述します。

ここではルビの文字を括弧で括(くく)るようにします。

<rp>で囲った文字は、

<ruby>に対応したブラウザでは表示されず、非対応のブラウザのみで表示されるため、

非対応のブラウザではカッコ書きでルビの文字が表示されるようになります。

 

ルビがたくさんあって記述が面倒な場合は、以下のように<rt>や<rp>の閉じタグを省略することも可能です。

 

 

以下のように、ルビを付けたい文字を<rb>で囲む方法もあります。

<rb>はHTML5が正式に勧告される前に廃止されそうになったのですが、

より複雑なルビの表記に対応させるために、採用されることになりました。

また、さらに<ruby>タグ内全体のルビを下付けで表示させる<rtc>というタグも採用されていますが、

ブラウザで表示に対応しているものが殆(ほとん)どないようですので、省略いたします。

 

使ってみると意外と簡単に使えますので、

ぜひお試しください。

 

参考サイト

&lt;ruby&gt;－HTML5タグリファレンス

HTML5

ruby 要素 – テキストレベルの意味づけ – HTML要素 – HTML5 タグリファレンス – HTML5.JP

Firefox 38でルビ機能が有効化へ – Mozilla Flux