HTML5

Webページで、ルビ(ふりがな)をふる時の正しいHTMLの記述

ふりがな

Webページで、読み方がわかりづらい時には、親切なサイトだとふりがなを記述していくれているところもありますが、ほとんどのサイトでは、カッコで括って、表示しています。

これが間違いだということもないと思いますが、HTMLではふりがなをふるためのタグというものが、ちゃんと用意されています。

ふりがなにはrubyとrtを組み合わせて使用する

ふりがなをふる時には、漢字(漢字とは限りませんが)とそのふりがなを<ruby></ruby>で囲んで、さらにふりがなの部分には、<rt></rt>で囲みます。

言葉で説明すると、なんのこっちゃとなりますが、実際に記述すると、下のような表記になります。

rubyの使用例

松下村塾しょうかそんじゅくは、江戸時代末期に、現在の山口県萩市に存在した私塾である。

rubyタグに未対応のブラウザ対策

ただし、このruby要素に未対応のブラウザで表示すると、漢字の上にふりがなが、表示されずに、漢字の後にふりがなが続くだけになってしまいます。

>>松下村塾しょうかそんじゅくは、江戸時代末期に、現在の山口県萩市に存在した私塾である。

最近は、ruby要素に未対応のブラウザは、ほとんどありませんが、念のため対策をしておくなら、rp要素でふりがなを囲むカッコの部分をマークアップしておきます。

パッと見た所、ごちゃごちゃした感じで、慣れないと書きづらいですが、ふりがなのカッコは<rp></rp>で、2ヶ所囲むと、覚えておけば良いかと思います。

Related posts

HTML5の構文とDOCTYPE宣言

ItSpaceBiz

HTMLで略語と定義をマークアップする方法

ItSpaceBiz

HTML5のリスト表示をおさらい

ItSpaceBiz