文字列にルビ（ふりがな）をふる方法

それではruby関連要素の基本的な使い方を確認していきましょう。

1. まず、ルビをふりたい文字列を<ruby>の開始タグと終了タグでマークアップします。

   <ruby>一石二鳥</ruby>

2. そしてruby要素の中、文字列の後の位置にルビを<rt>の開始タグと終了タグでマークアップします。

   <ruby>一石二鳥<rt>いっせきにちょう</rt></ruby>

以上です。とても簡単ですね！
コピペ用のコードは以下に用意しておきましたので、必要があればご利用ください。

    <ruby>一石二鳥<rt>いっせきにちょう</rt></ruby>

実際のWebページでの表示のされ方は下のようになります。（目立つように太字かつ赤字にしています）

一石二鳥いっせきにちょう

上記は「一石二鳥＝いっせきにちょう」とルビをふった例ですが、「一」と「石」と「二」と「鳥」で分けたい場合もあるかと思います。
何が言いたいかというと、以下のような表記にしたいということです。

一いっ石せき二に鳥ちょう

上記のようにルビを振りたい場合も考え方は同じで、下のように一文字つずマークアップすればOKです。

    <ruby>一<rt>いっ</rt>石<rt>せき</rt>二<rt>に</rt>鳥<rt>ちょう</rt></ruby>

POINT!
1. ・ルビを振りたい文字列をrubyタグでマークアップ！
2. ・ruby要素の中、文字列の後にルビをrtタグでマークアップ！
3. ・文字ごとにルビを振りたい場合は、一文字ずつrtタグでマークアップしよう！

rbタグやrpタグは必要？

ネットで「HTML ルビ」などと検索すると、この記事の他にも様々な記事がヒットしますが、中には<rb>、<rp>タグを使って説明しているものもあります。
前章で、rubyとrtタグだけで文字列にルビをふることができると説明しましたが、このrbとかrpも必要なのでしょうか？

結論から言うと、どちらも必要ありません。

どちらもrubyが非対応のブラウザの場合に備えたものですが、2022年5月現在、全ての主要なブラウザでサポートされているので、ほとんど気にする必要はありません。

▼参考（MDN Web Docsサイトによるruby要素対応状況）

https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby

さらに言えば、たとえ非対応の古いブラウザからの閲覧だったとしても、rb/rp要素でマークアップしていないことで致命的な問題が起こるわけでもありません。

どうしても万が一の場合に備えておきたい場合は、rpタグのみ使用して保険をかけておくと良いでしょう。
rbタグは非標準とされているので、rbタグでマークアップする必要性は全くありません。

以下はMDN Web Docsサイトからの引用です。

“<rb>ルビベース要素
非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。
ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。”

https://developer.mozilla.org/ja/docs/Web/HTML/Element/rb

rp要素でマークアップする場合は、以下のように（　）まるかっこをrpの開始・終了タグで囲むようにマークアップします。

	<ruby>
		一石二鳥<rp>(</rp><rt>いっせきにちょう</rt><rp>)</rp>
	</ruby>

表示結果はruby対応ブラウザでは特に変わらず、ちゃんとルビが表示されます。
ごく一部の非対応ブラウザでのみ、一石二鳥（いっせきにちょう）というふうに、ルビの部分が（ ）で囲まれて違和感なく表示されます。

どんな人がどんなブラウザで見ても大丈夫なように設計しておかなければならない市町村や病院などのホームページでは、rp要素で保険をかけておくのも良いと思います。
が、最初に述べたように普通の企業、ブログサイトなどでは必要なしと考えて良いと思います。

POINT!
1. ・rbタグやrpタグでマークアップする必要は基本的にない！
2. ・一応、rpタグにはルビ表示が非対応の場合の保険にはなる！
3. ・2022年現在、主要なブラウザはルビ表示対応なので、一般的なサイトを作成する場合はあまり気にしなくて良い！

ルビのカスタマイズ

ruby関連要素でマークアップしたルビは、CSSやJavaScriptでカスタマイズすることが可能です。

実用性があるかどうかは別として、カスタマイズ例をご紹介します。

カスタマイズの仕方は他の要素に対する方法と変わらず、rt要素にクラス（id）名をつけてCSSでフォントカラーやサイズの指定を行うだけです。

ルビのフォントサイズはどうしても小さくなってしまうので、例えばマウスオーバーでルビのフォントサイズが大きくなるような仕組みがあればUIの改善につながるかもしれませんね。

ただし、小さな文字が見づらい人に配慮するのであれば、ルビをふるのではなく「文字列（もじれつ）」という表記にした方が良いとは思います。

また、そもそもルビをふらないと読めないであろう漢字は使わず、ひらがなにしてしまうというのも有効な手段と言えるでしょう。

POINT!
1. ・ruby関連要素も他の要素と同じようにCSSでカスタマイズすることができる！
2. ・例えばルビの色や大きさを変えることで、ルビを読みやすくできる（かも）！
3. ・ルビの読みやすさを重視する場合は、（ ）の中にふりがなを記載する方が良いことも！

縦書きの場合

WebページはCSSのwriting-modeプロパティの設定を変えることで縦書きにもできます。
では、縦書きのルビはどのようになるのでしょうか？

百聞は一見にしかずということで、実際にどうなるのか表示を見てみましょう。
下のサンプルをご覧ください。

	<div style="writing-mode: vertical-rl;">
		<ruby>縦書<rt>たてが</rt>き</ruby>
	</div>

…とまあ、普通に違和感なくルビをふってくれるので、縦書き（writing-mode: vertical-rl）だとruby関連要素が使えないとか、表示がおかしくなるといったことはありません。

むしろ、ルビ（ふりがな）は日本語ならではの発明と言えるので、日本語ならではの縦書きの場合にこそ積極的に使いたい機能です。

和食の料理店のサイトや旅館のサイトなど「和」の雰囲気が求められるサイトでは、縦書き＆ルビの組み合わせが和の雰囲気とマッチするので、デザインの際に提案してみるのも良いのではないでしょうか。

POINT!
1. ・縦書き（writing-mode: vertical-rl）の場合でも問題なくruby関連要素は使用できる！
2. ・日本語ならではの縦書きと、日本語ならではのルビはむしろ相性抜群！
3. ・和の雰囲気が求められるようなサイトでは、縦書き＋ルビの組み合わせを試してみるのも良いかも！