HTML5<rp>タグ :<ruby>タグ非対応ブラウザで役に立つrpタグの使い方とは?

HTMLで難しい日本語の表記を多く用いる際、意外と必要になるのが漢字へのフリガナです。Webサイト作成時にルビがふれれば、より読者の幅も広がり、サイトとしての需要が広がりますよね。そんな時に役に立つのが<ruby>タグです。

HTMLでルビを振る方法とは?

今回は、rpタグの

・基本的な使い方
・類似タグ<ruby>・<rt>・<rb>との違い
・rpタグの具体的な使い方

について説明します。またルビを振るうえで欠かせない、<ruby>タグ、<rt>タグ、<rb>タグの動作も併せて確認!ルビに関する情報をまとめて解説します。

rpタグとは

rpタグの読み方

<rp>タグ:(読み方)ルビ・アールビータグ

Ruby Parenthesesの略で、Rubyはルビを、Parenthesesは括弧を表します。

rpタグの説明

rpタグはルビ非対応の環境で、<ruby>タグが使用できなかった際に使用するタグです。ルビを振る場合、通常であれば<ruby>タグ、<rt>タグ、<rb>タグでルビを振ることができます。

しかしブラウザがルビに未対応の場合は、ルビの表記が横に羅列されるため、非常に読みづらくなってしまうのです。

そんな時に役立つのがrpタグです。rpタグはrubyタグ非対応時に備え、ルビを括弧で囲います。rubyタグが対応している場合は、rpタグは表示されません。

rpタグで利用できる属性

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

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

対応ブラウザ

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

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

rpタグの基本的な使い方

 

rpタグの使い方

先述した通り、rpタグはrubyタグ対応環境では無視されます。以下のサンプルコードでは、通常のようにルビが漢字の上に振られていますが、これが非対応の場合は横に括弧でルビが表示されるのです。

See the Pen
rpタグ
by rabbittyu (@rabbittyu)
on CodePen.

以下のサンプルでは、2行目でrubyタグ非対応時の表示を示してあります。ruby未対応環境が用意できなかったため、あくまでも表示例ですが、このように<rp></rp>で囲った(括弧)がついたフリガナが横に表示されるのです。

See the Pen
rpタグ 比較
by rabbittyu (@rabbittyu)
on CodePen.

rpタグと類似する要素との違い

ここではルビを振るのに欠かせない、rubyタグ、rtタグ、rbタグの違いを見ていきましょう。それぞれの違いは以下の通りです。

rubyタグ -> ルビを振るタグの親要素

rtタグ -> ルビの内容を記述する

rbタグ -> ルビを振る文字を指定する(HTML5以降では省略)

どれもルビを振るのに欠かせないタグですが、rbタグはHTML5以降からは省略されるようになりました。元々Internet Explorerが独自に採用したものなので、今後も登場することはないでしょう。

rubyタグはルビを振る際に必ず親要素になります。またrtタグの中には、振りたいルビの内容を記述します。

rpタグの応用的な使い方

では少し応用的な使い方をご紹介します。ここでは先ほどと異なり、漢字1文字ずつにルビを振るようにサンプルコードを用意しました。

See the Pen
rpタグ 応用
by rabbittyu (@rabbittyu)
on CodePen.

上の例では、フリガナが対応する漢字1文字ずつについています。下の例と異なるのは、漢字1文字ずつにrpタグ、rtタグを用い、それぞれにフリガナを与えているという点です。

まとめ

今回はルビを振るのに欠かせないrpタグをご紹介しました。rubyタグは現在ほとんどのブラウザで対応していますが、読者の環境を考え、念のためrpタグで括弧を記述しておいた方が良いでしょう。

またルビを振る際は、余力があれば漢字1文字ずつ振ると、より正しくルビを振ることができます。状況により、使い分けてください。

参考文献:
MDN web docs <rp>: ルビのフォールバック用括弧要素
HTML5タグリファレンス:rp
HTML5タグリファレンス:ruby
HTMLタグリファレンス:RT
HTMLタグリファレンス:RB
HTMLタグリファレンス:RP
<rp>ルビを囲む記号を指定する
MDN web docs <ruby>
HTMLタグ一覧
HTML5における<rp>タグの使い方