ホームページ作成/テキストの配置・装飾 (HTML,CSS)

文字にルビ(フリガナ)を振る

漢字の読み方を示したり、英単語の発音を示したりするのに、「ルビ」(フリガナ)が使われますね。XHTMLには、漢字などにルビ(フリガナ)を振る要素が用意されています。これを使えば、簡単にルビを表示できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

読み方を示すルビ(フリガナ)を振る

漢字の読み方を示したり、英単語の発音を示したりするのに、「ルビ」(フリガナ)が使われますね。 文字の上に小さく書かれた平仮名や片仮名が「ルビ」です。
この「ルビ」は、ウェブ上でも簡単に実現可能です。

XHTMLには、ルビを実現するための「ruby要素」が用意されています。 ruby要素のほか、対象文字を指定するrb要素や、ルビ本体を指定するrt要素などがあり、それらを合わせて使うことで「ルビ」を表示できます。

以下は、Internet Explorer 6で、実際にruby要素を使ってルビを表示してみた例です。 文字の上に小さなサイズでルビ(フリガナ)が表示されています。

ルビ(ruby要素など)の表示例(IE6)
▲Internet Explorer 6 での表示例

標準ではルビに対して何のスタイルも適用しないブラウザでも、下図のようにカッコ付きで表示できますので、おかしくはなりません。

ルビ(ruby要素など)の表示例(Firefox2)
▲Firefox2でのデフォルトの表示例

これらのブラウザでもルビ関連のタグ自体は認識しているため、スタイルシートを活用したり機能を拡張するアドオンを導入したりすることで、ルビを文字の上に小さく表示させることも可能です。

ルビ(ruby要素など)の表示例(Firefox2+XHTMLルビサポート)
▲Firefox2で、アドオン「XHTMLルビサポート」を使った表示例

ruby要素などのルビに関する要素は、XHTMLの文法で定義されていて、HTMLでは定義されていません。 しかし、HTML中で使っても(文法的には問題がありますが)表示はされます。 おそらく現在、最も利用者数が多いと思われる Internet Explorer 6 でも表示可能ですので、ルビ(フリガナ)を振る必要があるようなら活用してみましょう。

それでは、ruby要素を使ったルビの記述方法へ >>

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます