ヨミガナをふりたい

子供あいてのサイトなどでふりがなを振りたいときがあるかもしれません

昔々(むかしむかし)、あるところに、お(じい)さんとお(ばあ)さんがおったそうな。

(じい)さんは、(やま)芝刈(しばか)りに、お(ばあ)さんは(かわ)洗濯(せんたく)()ったそうな。

上記のHTMLのソース

<ruby>昔々、<rp>(</rp><rt>むかしむかし</rt><rp>)</rp></ruby>あるところに、

 

<ruby><rp>(</rp><rt>じい</rt><rp>)</rp></ruby>さんと

 

<ruby><rp>(</rp><rt>ばあ</rt><rp>)</rp></ruby>さんがおったそうな。


<ruby><rp>(</rp><rt>じい</rt><rp>)</rp></ruby>さんは、

<ruby><rp>(</rp><rt>やま</rt><rp>)</rp></ruby>

<ruby><rp>(</rp><rt>しばか</rt><rp>)</rp></ruby>りに、


<ruby><rp>(</rp><rt>ばあ</rt><rp>)</rp></ruby>さんは

<ruby><rp>(</rp><rt>かわ</rt><rp>)</rp></ruby>

<ruby>洗濯<rp>(</rp><rt>せんたく</rt><rp>)</rp></ruby>

<ruby><rp>(</rp><rt>い</rt><rp>)</rp></ruby>ったそうな。

面倒くさそうでしょ?(笑)

正直いって面倒くさいし、大嫌いです。でも仕組みは比較的簡単

HTMLでは、ルビ(ヨミガナ)用のタグが用意されています。
以下が、その仕組みなんですが、JIMDOで以下のように入力すると<rb>と</rb>は削除されてしまうようです。(なくてもいいんですけどね)今後すべてのブラウザに対応するようになったら、<rp></rp>の括弧用タグは不要になります。

  1. ルビを付けたい文字を、<ruby></ruby>で囲います
  2. ルビに記載する文字を<rt></rt>で囲います。
  3. 非対応のブラウザ用に、<rp></rp>で括弧で括って、ルビの文字を挟みます。

※<rp>は ruby Parentheses(ルビ 括弧)の略だそうです。


やることはこれだけです。

対応ブラウザと非対応ブラウザの表示の仕組み図

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422