ケイビーエス 社員ブログ

Webにおけるルビ（ふりがな）の表現

私は働きだすまでふりがなのことを「ルビ」と言うことを知りませんでした。なぜ「ルビ」と言うのか、深く考えず“ふ〜ん、そうなんだ”くらいにしか思っていませんでした。今はネットですぐに調べられる便利な時代。
語源由来辞典によると⎯⎯

ルビとは、振り仮名用の活字で、主に4〜6ポイントの小活字。振り仮名だけをさす場合もある。
【ルビの語源・由来】
5号活字の振り仮名に用いた7号活字の大きさが、イギリスで「ruby」と呼ばれる欧文活字と同じ大きさだったため、仮名用の活字を「ルビ」と呼ぶようになり、振り仮名のことも「ルビ」と呼ぶようになった。
「ruby」は宝石のルビーのことで、欧米では活字の大きさを宝石名で呼び、5ポイントを「pearl｛真珠（しんじゅ）｝」、5.5ポイントを「agate｛瑪瑙（めのう）｝」といった。

⎯⎯　とある。
さて、そんな「ルビ」をホームページで表現するときはどうするのか…？<ruby>タグはIE5の時代から既にあったのだけれど、ブラウザによって見え方が違ってしまったり、うまく表現できなかったため、私はほとんど使用していませんでした。CSSが一般的になる前は画像で作ったりして、それはそれは面倒な作業でした。CSSで表現する場合でも<div>タグを駆使して擬似的に表現していて、各ブラウザで同じように見せるのには、とても苦労していました。
今はブラウザの進化とともにhtml5 CSS3に対応しており、ルビの表現が簡単に、しかもきれいに表示さすことができるようになっています。
「漢字などにルビ（ふりがな）をふる方法」をCSS3 備忘録に追加しておきました。
Web Recipe《CSS3 備忘録》

備忘録ついでに……

html5でアンカーリンクの使い方が変わっています。以前は<a>タグにname属性とid属性をセットしていましたが、html5でアンカーを表す場合は、要素に関わらすid属性を指定することでアンカーを機能させることができるようになっています。
例：<h2 id=”ruby”>漢字などにルビ（ふりがな）をふる方法</h2>