アイキャッチ画像
HOME > ウェブデザイン > 【ウェブデザイン】たまにはルビ(ふりがな)を使ってみるのもいいモンだ
公開日:2017.10.31
更新日:2019.3.26
この記事は約7分で読めます。

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

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

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

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

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

 

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

(そう思うのは私だけ?)

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

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

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

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

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

追記 -2019.3.25-

このあとでご紹介しているルビの振り方は、古いブラウザでも読めるように工夫された万能型の書き方になってます。

しかしそういった古いブラウザを使ってる方はもはや少数派と思われ、昨今は以下のような簡単な書き方に変わりつつあります。

漢字全体にルビを均等に振る

<ruby>例文<rt>れいぶん</rt></ruby>

実際の表示例がこちら↓。

例文れいぶん

漢字に合わせてルビを振る

<ruby>浅<rt>あさ</rt>知恵<rt>ぢえ</rt></ruby>

実際の表示例がこちら↓。

あさ知恵ぢえ

どうです、あなたのブラウザでもちゃんとルビが振ってありますでしょ?

上記の(簡単な)ルビ振りコードも参考に読み進めてみてください。

SIRIUSレビューイメージ画像

ルビ(ふりがな)の基本形

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

<ruby><rb>例文</rb><rp>(</rp><rt>れいぶん</rt><rp>)</rp></ruby>

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

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

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

例文れいぶん

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

<ruby>~</ruby>
一番大外にあるタグで、ルビを振る時の必須タグ。
<rb>~</rb>
ルビを振りたい漢字を入力。
<rt>~</rt>
ルビ(ふりがな)を入力。

※<rp>~</rp>について

ルビに未対応のブラウザでは漢字の直後にふりがなが続いて表示されるそうです。

私は見たことがないのでなんとも言えませんが、今回の例で言えば「例文れいぶん」と表示されるんでしょう。

でもこれだとふりがなっぽく見えず、誤植と間違えられかねません。

そこでこれまでのようにふりがなを”かっこ”でくくってやればふりがなと認識されやすくなります。

その”かっこ”をルビ未対応ブラウザでのみ表示させるタグが<rp>~</rp>ということです。

ちょっとわかりにくいですが、『例文』の直後<rp>(</rp>と”左かっこ”を<rp>~</rp>ではさんでますでしょ。

さらに『れいぶん』の直後<rp>)</rp>と”右かっこ”を付けてます。

これで例文(れいぶん)と表示されるというわけです。

ルビ未対応ブラウザって何があるんでしょうね。

少なくともIE11、Edge、Chrome、Firefox、Safari(iPhone)、Chrome(Android)では問題なく表示されるようです。

残るはOperaかな。
でもOperaを使ってる人の割合ってかなり少ないと思うのでもはや無視していいレベルかと個人的には思うのですが。

そうなると<rp>~</rp>はなくてもいいのかもしれません。

ルビ(ふりがな)の打ち方

ルビの打ち方、といっても基本的には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を変更するのもちょっと、ね。

 

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

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

仕様のようです。

 

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

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

以上です。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

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

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)