【rubyタグとは?】フリガナを振るrubyタグの基本解説+応用編

日本語のサイトを作成しているときに、「この漢字にフリガナが振れたらな…」と思うことはありませんか?実はHTMLにはフリガナを振るための要素があり、位置指定などを細かく設定できるのが特徴です。

HTMLの要素を使ってフリガナを振る方法とは?

今回は、フリガナを振るrubyタグ

・基本的な使い方
・フリガナの細かい位置指定
・フリガナのサイズ調整方法
・フリガナの装飾方法

について説明します。

rubyタグとは

rubyタグの読み方

rubyタグ [読み方:ルビタグ]

rubyタグの説明

rubyタグ難読漢字などの上にフリガナを振るために使用されるタグです。他にも、小説のタイトル、人物名など、固有名詞にもrubyタグを活用することが出来ます。

フリガナは日本独自のもので、海外ではrubyタグを注釈を付け加える際に使用されています。しかしこの方法はかなりマイナーなため、rubyタグは日本語圏で活躍するフリガナ専用のタグと言って良いでしょう。

rubyタグで利用できる属性

rubyタグでは以下のグローバル属性のみが使用可能です。グローバル属性はHTML全要素で使用できるタグです。

属性 説明
  accesskey属性  キーボードのショートカットの生成し、簡易なアクセスを可能にする
class属性   要素に任意の名称を与える(同じclass名を複数の要素に与えられる)
 dir属性  テキストの書字方向を示す
・ltr:「left to right」左から右
・rtl:「rght to left」右から左
・auto:自動的に書字方向を決定する
 hidden属性  要素に関連性がないことを示す
id属性  要素に任意の名称を与える(同じidは使用できない:一意性)
 lang属性  要素の言語を定義する
style属性   要素にCSSスタイル宣言を適用する

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 5
Edge 12
Firefox  38
nternet Explorer  5
Opera  15
Safari  5
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  38
Android 版 Opera  14
iOS版Safari  完全対応
Samsung Internet  完全対応

rubyタグの基本的な使い方

rubyタグの使い方

rubyタグrpタグrtタグとセットで使用します。

  • rtタグ – フリガナを囲むタグ
  • rpタグ – 括弧などを使用する際に使うタグ

rubyタグでフリガナを振りたい文字を囲い、その中でrtタグとrpタグを使用してフリガナを設定します。括弧を付けるためのrpタグですが、使わなくてもフリガナは表示されます。

表示例

rpを省略する

実行結果は変わりません

文章内でrubyタグを使用した場合

ちなみに文章内で漢字だけにフリガナを振ることもできます。少しコードがややこしくなりますが、しっかりrubyタグとrtタグを使用しないと、フリガナとして表示されません。

rubyタグの応用的な使い方

フリガナの位置を調整する

漢字がメインのサイトを作るとき、どの漢字がどのフリガナに対応しているのか明確に定義したい場合があります。

このようなときは、以下のように少し細かくrubyタグを設定してみましょう。

調整前

調整後

調整前と調整後を比べると、漢字1文字ずつにフリガナが振られているのが分かります。rubyタグはrtタグに設定されたフリガナを均等に配置するので、細かく設定したいという方は、漢字1文字ずつにrtタグを使用しましょう。

漢字それぞれにフリガナがついたことが分かります。

【css】rubyタグ内のフリガナのサイズを調整する

次はフリガナのサイズを調整しましょう。どうしても漢字よりフリガナの方が長くなる傾向があるので、漢字の範囲内に収まるようにCSSでサイズを調整します。

実はフリガナはこれ以上小さくすることが出来ません。デフォルト値が最小サイズなので、代わりにフリガナを振られる方の文字を大きくします。

【CSS】rubyタグ内のフリガナの色を変える

サイズを変えることはできませんが、フリガナの色を変えることはできます。ここではrtタグ内でCSSを指定するstyle属性を指定し、色の名前に沿った色コードを指定しました。

表示例

まとめ

今回はフリガナを指定するrubyタグについて解説しました!rubyタグは日本語のサイトを扱う際に必ず必要になるタグなので、覚えておきましょう。

参考文献:
<ruby> – MDN Web Docs