【入門編】ruby, rt, rpタグによるルビの振りとインライン配置 – HTML実践ガイド

こんにちは！Web制作の学習、毎日お疲れ様です。HTMLを書き始めたばかりの頃って、「このタグ、いつ・どんな時に使うの？」と迷うことがたくさんありますよね。

今日は、そんな数あるタグの中でも、ちょっと特別で、どこかレトロで可愛らしい「ルビ（ふりがな）」の振り方についてお話しします。

本や新聞で見かける「漢字の上の小さなひらがな」。あれをWebページで再現するには、``という少し不思議な名前のタグを使います。専門用語が並ぶと難しそうに見えますが、実はとってもシンプル。一緒に見ていきましょう！

—

``という名前を聞いて、宝石のルビーを思い浮かべた方もいるかもしれませんね。実は、印刷業界ではふりがなを振るための活字のことを「ルビ」と呼んでいて、それがそのままタグの名前になったんです。

このタグは、「親文字（漢字）」と「ルビ（ふりがな）」をひとまとめにして、「これはセットですよ！」とブラウザに教えてあげる役割を持っています。

ルビを振るには、以下の3つのタグをセットで使うのが基本です。

1. ``: 「ここからルビが始まりますよ」という箱。
2. ``: 実際のふりがな（Ruby Text）。
3. ``: ルビに対応していない古いブラウザのための括弧（Ruby Parentheses）。

「えっ、3つも覚えるの？」と不安になりましたか？大丈夫です！まずは「漢字を `` で囲んで、そのすぐ後に `` でふりがなを書く」とだけ覚えてください。

—

たとえば、「Web（ウェブ）」という言葉にふりがなを振るなら、こんな風に書きます。

Web
(
ウェブ
)

``: これが実際に画面に表示されるふりがなです。
``: これが実は隠れた名脇役なんです。「もしブラウザがルビに対応していなかったら、`Web(ウェブ)`のように表示してね」という保険のようなもの。最近のブラウザは優秀なので普段は表示されませんが、どんな環境でも困らないように添えておくのが、優しいWeb開発者のマナーですね。

—

ここが少しだけ混乱しやすいポイントなのですが、``タグは「インライン要素」です。

これは、文章の途中に「ポコッ」と埋め込める、という意味。例えば、こんな感じで段落の中に混ぜることができます。

私が学んでいるのは
HTML(エイチティーエムエル)
という言語です。

このように、文章の流れを止めることなく、自然にふりがなを添えられるのが強みです。

—

最後に、プロの現場でよくある「つまずきポイント」をひとつだけ共有しますね。

ルビを振ると、その行だけ「行間」が少し広くなることがあります。これはブラウザが「ふりがなを表示するために、少しスペースを空けておきますね！」と気を利かせてくれるからなのですが、デザインによっては「隙間が気になる…」となることもあります。

そんな時は、焦らずCSSで `line-height` を調整してあげれば大丈夫。最初から完璧を目指さず、「まずは表示できた！」という成功体験を大切にしてくださいね。

—

``タグは、ただの装飾ではなく、読者に対する「読みやすさへの配慮」です。難しい専門用語や、読み方が特殊な言葉にふりがなを添えるだけで、そのページはグッと親しみやすいものになります。

これさえ押さえておけば、もう怖くありません。ぜひ、あなたのブログや練習用のページで、大切な言葉にルビを振ってみてくださいね。

皆さんのWeb制作ライフが、今日よりも少しだけ楽しくなりますように！また次の記事でお会いしましょう。