ケイビーエス 社員ブログ

多言語『翻訳・DTP・印刷・WEB』 ケイビーエス株式会社 社員のブログです。

Webにおけるルビ(ふりがな)の表現

Posted by : よこさわ.

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲このページのトップへ