ルビを使いこなすやり方

キャプチャ画像

ルビふりがな機能が付いてると文章が読みやすく、かっこよさも出てきます。

 

ルビ(フリガナ)機能は決まったパターンで表示可能なので、ひな形を登録しておいて必要部分だけを修正すればあっという間にフリガナが振れます。


ルビ(フリガナ)機能の設定方法

ホームページというのはルビ(フリガナ)が苦手です。

 

代替方法としてよく見かけるのは『林檎(りんご)』みたいに(かっこ)を使ってフリガナっぽく見せることでしょう。

 

なぜあまり普及しなかったかと言えば、専用のタグが複雑だからです。

 

しかしながらブラウザの進化と共に、それもかなりシンプルになってきました。

 

たとえば『SIRIUS』という文字に『シリウス』というフリガナを付けようとしたら、

 

<ruby>SIRIUS<rt>シリウス</rt></ruby>

 

という書き方でほぼ問題なくコチラ↓のように表示されます。

 

実際の表示例

SIRIUSシリウス

 

どうでしょう、あなたのブラウザではきちんとコチラ↓の画像のように見えてますか?

 

キャプチャ画像

ルビ機能のひな形

コチラ↓がルビ(フリガナ)機能のひな型になります。

 

コード画像

<ruby>※フリガナを付けたい漢字や文字<rt>※実際の読み方(フリガナ)</rt></ruby>

 

つまりWindowsの単語登録やSIRIUSの文字装飾設定などに<ruby>※漢字<rt>※フリガナ</rt></ruby>と登録しておけば、あとは”※漢字”の部分と”※フリガナ”のところを修正するだけで自動的にルビ(フリガナ)が付くというわけです。

 

古いバージョンのブラウザにも適用させたいということであれば、書き方は少々複雑になりますが下のような書き方で対処することができます。

<ruby><rb>漢字</rb><rp></rp><rt>かんじ</rt><rp></rp></ruby>

 

<ruby> ~ </ruby>
ルビ(フリガナ)専用のタグです。
<rb> ~ </rb>
ルビ(フリガナ)を振りたいテキストになります。
<rt> ~ </rt>
実際のルビ(フリガナ)テキストになります。
<rp> ~ </rp>
ルビ未対応ブラウザでのみ表示される記号などです。
ここでは『』と『』になります。

 

この結果、ルビ対応ブラウザでは漢字かんじとなり、ルビ未対応ブラウザだと漢字(かんじ)に自動変換表記してくれます。

この辺はあなたがどのブラウザまでを閲覧対象とするか次第です。

たとえばMicrosoft EdgeやGoogle Chrome、新しめのOSを搭載したiPhoneやAndroidのブラウザだけを対象とするならシンプルなタグの方だけで充分でしょう。

いやいやInternet Explorerの古いバージョンまで対応させたいというのであれば複雑な方のタグが必要になってきます…が、現状では古いブラウザは動作保証対象外にしているアプリがほとんどなのでシンプルな方の書き方だけで問題はないはずです。。

ルビ(フリガナ)機能のバリエーション

ルビ(フリガナ)の振り方ですが、全部の文字を対象に一気にルビ(フリガナ)を振る方法と、文字ごとにルビ(フリガナ)を振る2つのやり方があります。

 

たとえば林檎(りんご)という漢字。

 

<ruby>林檎<rt>りんご</rt></ruby>

 

と打ち込むと、フリガナにあたる「りんご」という文字は林檎という文字の上に均等配置されます。

 

林檎りんご

 

ところが「林」と「檎」にフリガナを分けて、

 

<ruby>林<rt>りん</rt>檎<rt>ご</rt></ruby>

 

と打ち込んだ場合はそれぞれ振り分けた漢字の上にフリガナが配置されます。

 

りん

 

このあたりはフリガナをどう振り分けるかの違いだけなので、うまく使い分けるといいでしょう。

 この記事をシェア