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

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

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

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

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

について説明します。

目次 [非表示]

1 rubyタグとは
2 rubyタグの基本的な使い方
- 2.1 rubyタグの使い方
3 rubyタグの応用的な使い方
4 まとめ

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タグですが、使わなくてもフリガナは表示されます。

<ruby>鯵<rp>(</rp><rt>あじ</rt><rp>)</rp></ruby>

1	<ruby>鯵<rp>(</rp><rt>あじ</rt><rp>)</rp></ruby>

表示例

rpを省略する

<ruby>鯵<rt>あじ</rt></ruby>

1	<ruby>鯵<rt>あじ</rt></ruby>

実行結果は変わりません

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

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

<p><ruby>鯵<rt>あじ</rt></ruby>は<ruby>刺身<rt>さしみ</rt></ruby>や<ruby>寿司<rt>すし</rt></ruby>の<ruby>他<rt>ほか</rt></ruby>、<ruby>焼魚<rt>やきざかな</rt></ruby>や<ruby>煮魚<rt>にざかな</rt></ruby>、フライなど、<ruby>多<rt>おお</rt></ruby>くの<ruby>料理<rt>りょうり</rt></ruby>に<ruby>利用可能<rt>りようかのう</rt></ruby>な<ruby>魚<rt>さかな</rt></ruby>です。</p>

1	<p><ruby>鯵<rt>あじ</rt></ruby>は<ruby>刺身<rt>さしみ</rt></ruby>や<ruby>寿司<rt>すし</rt></ruby>の<ruby>他<rt>ほか</rt></ruby>、<ruby>焼魚<rt>やきざかな</rt></ruby>や<ruby>煮魚<rt>にざかな</rt></ruby>、フライなど、<ruby>多<rt>おお</rt></ruby>くの<ruby>料理<rt>りょうり</rt></ruby>に<ruby>利用可能<rt>りようかのう</rt></ruby>な<ruby>魚<rt>さかな</rt></ruby>です。</p>

rubyタグの応用的な使い方

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

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

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

調整前

<ruby>手前味噌<rt>てまえみそ</rt></ruby>

1	<ruby>手前味噌<rt>てまえみそ</rt></ruby>

調整後

<ruby>手<rt>て</rt>前<rt>まえ</rt>味噌<rt>みそ</rt></ruby>

1	<ruby>手<rt>て</rt>前<rt>まえ</rt>味噌<rt>みそ</rt></ruby>

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

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">

    <!-- CSS -->
    <style>
      .size {
        font-size: 30px; /* 2行目の文字を30pxに */
      }
    </style>
  </head>

  <!-- HTML -->
  <body>
    <p><ruby>一蓮托生<rt>いちれんたくしょう</rt></ruby></p>

    <p class="size"><ruby>一蓮托生<rt>いちれんたくしょう</rt></ruby></p>
  </body>
</html>

<!DOCTYPE html>

<head>

<style>

.size {

font-size: 30px; /* 2行目の文字を30pxに */

}

</style>

</head>

<body>

<ruby>一蓮托生<rt>いちれんたくしょう</rt></ruby>

<ruby>一蓮托生<rt>いちれんたくしょう</rt></ruby>

</body>

</html>

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

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

<ruby>次縹<rt style="color: #008DBD;">つぎはなだ</rt></ruby><br><br>

<ruby>中縹<rt style="color: #004F80;">なかはなだ</rt></ruby><br><br>

<ruby>錆御納戸<rt style="color: #406F79;">さびおなんど</rt></ruby><br><br>

み<ruby>空色<rt style="color: #6C9BD2;">そらいろ</rt></ruby><br><br>

<ruby>花色<rt style="color: #0086AD;">はないろ</rt></ruby><br><br>

<ruby>鉄紺<rt style="color: #003149;">てつこん</rt></ruby><br><br>

<ruby>薄水色<rt style="color: #BCE1DF;">うすみずいろ</rt></ruby><br><br>

<ruby>次縹<rt style="color: #008DBD;">つぎはなだ</rt></ruby>

<ruby>中縹<rt style="color: #004F80;">なかはなだ</rt></ruby>

<ruby>錆御納戸<rt style="color: #406F79;">さびおなんど</rt></ruby>

み<ruby>空色<rt style="color: #6C9BD2;">そらいろ</rt></ruby>

<ruby>薄水色<rt style="color: #BCE1DF;">うすみずいろ</rt></ruby>

表示例

まとめ

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

参考文献：
＜ruby＞ – MDN Web Docs

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。