文字にルビをふる。（RUBYタグ）

  • 一喜一憂 いっきいちゆう

  • 切磋琢磨 せっさたくま

  • 臥薪嘗胆 がしんしょうたん

    以下のタグをHTMLの表示したい場所に貼り付けてください。 
    <RUBY>
<RB>表示したい文字
<RT>振りたいルビ
</RUBY>


    ■解説
    文字にルビを振るにはスタイルシートなどを使っても不可能では無いのですが、細かな設定などが必用になってしまいます。ここで紹介したRUBYというタグはルビの配置を簡単に行ってくれます。
    二つ目のサンプルではRTタグにはスタイルシートで色を設定しているのでルビのみ色がオレンジ色に変わっています。また三つ目のサンプルではRUBYタグには独自のスタイルシートruby-alignが用意されていてルビの振られる文字の配置を調節出来ます。

    ■ruby-alignに指定できる値
    left：表示したい文字と振りたいルビをともに左に寄せる。
    center：表示したい文字と振りたいルビをともに中央に寄せる。
    right：表示したい文字と振りたいルビをともに右に寄せる。
    distribute-letter：ルビの均等貼り付け。
    distribute-space：両端にスペースを入れてのルビの均等貼り付け。
    line-age：ルビが短い場合は中央寄せ、ルビが長い場合は左寄せ。

    トップへ戻る