loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
アイキャッチ画像
Home > [ウェブデザイン] > 【ウェブデザイン】たまにはルビ(ふりがな)を使ってみるのもいいモンだ
この記事は約6分で読めます。

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

投稿日:2017.10.31

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

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

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

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

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

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

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

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

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

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

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

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

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つ分)になるというデメリットもあります。

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

 

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

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

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

たとえばコチラ↓。

①投稿記事への入力例です。
②投稿記事への入力例です。

③投稿記事への入力例です。
投稿とうこう記事きじへの入力例にゅうりょくれい

⑤投稿記事への入力例です。

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

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

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

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

これに関して、
行間やフォントサイズ・フォントファミリーなどいろいろ試してはみたんです。

でもここだけはどうやっても変更できませんでした。

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

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

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「AMORE (TCD028)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

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

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

先頭へ