【ウェブデザイン】たまにはルビ（ふりがな）を使ってみるのもいいモンだ

記事を書く時って、できるだけ簡単な言い回しで表現するように心がけてはいます。

でもね、時として難しい漢字の方がニュアンスが伝わりやすかったり、全部ひらがなだとかえってわかりにくいといった場合があることも確かなんです。

そんなときは読みにくい漢字の後ろに”かっこ（）”で囲ったふりがなをつけたりしますね。

曖昧（あいまい）・憂鬱（ゆううつ）、みたいに。

 

でも日本人ってルビ（ふりがな）を振った文章に慣れてるせいもあってか、ルビのついた文ってウェブページでも割と読みやすかったりするんですよ。

（そう思うのは私だけ？）

それにルビ（ふりがな）の振られた漢字って、なんとなく美しく見えませんか？

そんなわけで、普段私がたまに・・・使ってる基本的なルビの振り方をご紹介します。

（”たまに”の上についてる傍点もルビの応用です）

ただし難しい漢字を多用したりルビ（ふりがな）の使い過ぎはやっぱり読みにくいです。

かっこつけのためだけに使うんじゃなく、ここぞというところだけに使うことをおススメしますよ。

ルビ（ふりがな）の基本形

最初に基本の完成形からご紹介するんですが、ルビについていろいろ調べて実践してきた中で最終的に落ち着いた基本形（HTML）は次の通りです。

<ruby><rb>例文</rb><rp>（</rp><rt>れいぶん</rt><rp>）</rp></ruby>

『例文』にあたる部分がルビをつけたい漢字の挿入箇所で、『れいぶん』にあたる部分が表示されるルビ（ふりがな）になります。

実際にはこんな↓風に表示されます。

（※ブラウザによって若干の違いがあるとは思いますが、おそらくきちんとルビが振ってあるハズ？）

では個々の説明をちょっとだけ。

<ruby>～</ruby>

一番大外にあるタグで、ルビを振る時の必須タグ。

<rb>～</rb>

ルビを振りたい漢字を入力。

<rt>～</rt>

ルビ（ふりがな）を入力。

ルビ（ふりがな）の打ち方

ルビの打ち方、といっても基本的には2通りしかないです。

漢字全体に均等にルビを指定するか漢字ごとにルビを振り分けるかです。

わかりにくいので例で示しますね。

 

たとえば『浅知恵』という漢字にルビを振ったとします。

一気に指定する方法だと<ruby><rb>浅知恵</rb><rp>（</rp><rt>あさぢえ</rt><rp>）</rp></ruby>と言う書き方になり、実際の表示はコチラ↓になります。

一方、漢字ごとにルビを振り分ける方法だと書き方はコチラ↓。

<ruby><rb>浅</rb><rp>（</rp><rt>あさ</rt><rp>）</rp><rb>知恵</rb><rp>（</rp><rt>ぢえ</rt><rp>）</rp></ruby>

そして実際の表示がコチラ↓。

違いがおわかりでしょうか。

1つ目のやり方はルビが均等に幅調整されて表示されます。

2つ目のやり方だと漢字の読みに合わせてルビが振られます。

 

こんな例もあります。

『源頼朝』、これを一気に指定する1つ目の方法だと

<ruby><rb>源頼朝</rb><rp>（</rp><rt>みなもとのよりとも</rt><rp>）</rp></ruby>

となり、実際の表示がコチラ↓。

漢字ごとにルビを振り分ける2つ目の方法だと

<ruby><rb>源</rb><rp>（</rp><rt>みなもとの&nbsp;</rt><rp>）</rp><rb>頼朝</rb><rp>（</rp><rt>よりとも</rt><rp>）</rp></ruby>

となり、実際の表示がコチラ↓。

どっちがいいかはもはや好みですね。

厳密に読み方を区分けしたいのなら2つ目ですが、書き方がちょっと複雑（ルビ指定2つ分）になるというデメリットもあります。

漢字の長さやルビの長さ、意味合いなどを総合的に考えてうまく割り振るしかないでしょう。

ルビと行間・ルビと漢字との間隔問題

ルビを振った文を見てて気になったことが。

それがルビ（ふりがな）と漢字の離れ具合と、ルビを振った文だけ前後の文との行間がちょっと大きくなっちゃうってことです。

たとえばコチラ↓。

①と②は改行（<br>）されてるんですが、同じく改行されてる③と④の行間の方がルビを振ってある分だけ開いてますね。

これは行間を設定するスタイル（line-height）の値を大きくすれば①と②の間の行間が広がって見栄えは統一できそうです。

でもルビ振りの文のためだけに全体のline-heightを変更するのもちょっと、ね。

 

また④のルビ振り文ですが、できればもうちょっとだけルビを漢字寄りにくっつけたいと思ったとします。

これに関しては、行間やフォントサイズ・フォントファミリーなどいろいろ試してはみたものの、ここだけはどうやっても変更できませんでした。

仕様のようです。

 

結果として、ルビ（ふりがな）を振った文を載せたいと思ったら見栄え（見え方）に関してはブラウザ任せ、つまり訪問者が利用するブラウザ次第ってことになりそうです。

でも極端に古いバージョンのブラウザでない限りはほぼ似たような感じで表示されるはずなので、あまり気にする必要もないでしょう。

以上です。