ルビを使いこなすやり方
ルビ(フリガナ)機能は決まったパターンで表示可能なので、ひな形を登録しておいて必要部分だけを修正すればあっという間にフリガナが振れます。
ルビ(フリガナ)機能の設定方法
ホームページというのはルビ(フリガナ)が苦手です。
代替方法としてよく見かけるのは『林檎(りんご)』みたいに(かっこ)を使ってフリガナっぽく見せることでしょう。
なぜあまり普及しなかったかと言えば、専用のタグが複雑だからです。
しかしながらブラウザの進化と共に、それもかなりシンプルになってきました。
たとえば『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>
と打ち込んだ場合はそれぞれ振り分けた漢字の上にフリガナが配置されます。
林檎
このあたりはフリガナをどう振り分けるかの違いだけなので、うまく使い分けるといいでしょう。