Web制作の入り口に立った皆さん、こんにちは！
HTMLを学び始めると、`
`といった大きな骨組みを作るタグにはすぐ慣れるものですが、文字単位の装飾や、少し変わった役割を持つタグに出会うと「これ、いつ使うの？」と迷ってしまうことがありますよね。
今日は、そんな中でも「日本語ならではの粋な表現」であるルビ（振り仮名）を、HTMLでどう美しく扱うかについてお話しします。
「ルビなんて、文字を小さくして横に並べればいいんじゃないの？」なんて思う方もいるかもしれませんが、実はHTMLにはそのための専用タグが用意されているんです。これを知っておくと、あなたのWebサイトはグッと「丁寧な作り」になりますよ。
—
ルビを支える「3つの役割」
HTMLでルビを振るには、大きく分けて3つの要素を使います。これ、お料理に例えるとすごく分かりやすいんです。
- ``（ルビの全体像）： お皿です。この中に「本体」と「ルビ」を盛り付けます。
- ` 振り仮名そのものです。お皿に添える「付け合わせ」ですね。
- ` 「ルビに対応していない古いブラウザ」のためのガードレールです。
実際にコードを見てみましょう。
標高
なぜ `` が必要なの？
昔のブラウザや、一部の古い読み上げソフトでは、ルビという概念が通じず、いきなり「標高ひょうこう」と繋がって表示されてしまうことがありました。
`
—
現場で直面する「ブラウザの気まぐれ」
さて、ここからが少しだけ「現場のリアル」な話です。
実は、ルビの表示はブラウザ（Chrome、Safari、Firefoxなど）によって、わずかに余白の取り方やフォントのバランスが異なることがあります。特に困るのが、ルビが長すぎるときや、行間が詰まってしまうとき。
そんなときは、CSSで少しだけ「交通整理」をしてあげましょう。
/ ルビの微調整をするための魔法のコード /
ruby {
/ ルビと本体の距離を少しだけ確保して、読みやすくする /
line-height: 2;
}
rt {
/ ルビのフォントサイズを本体の半分くらいにするとバランスが良いです /
font-size: 0.5em;
/ 文字が詰まりすぎないように少しだけ隙間を空けます /
letter-spacing: 0.1em;
}
「あれ、思ったより崩れちゃうな」と感じたら、まずは`line-height`（行の高さ）を調整してみてください。ルビが表示される分、その行だけが他の行より背が高くなってしまうので、全体的に少しゆとりを持たせると、画面がとても落ち着いた印象になりますよ。
—
なぜわざわざ「専用タグ」を使うのか？
「CSSだけで見た目を作ればいいのでは？」と思う方もいるかもしれません。でも、Webの世界では「意味を正しく伝えること」が何よりも大切です。
検索エンジンや、目の不自由な方が使うスクリーンリーダー（読み上げソフト）は、``タグがあることで、「あ、これは読み方が添えられているんだな」と正しく理解してくれます。ただ見た目を似せるのではなく、中身の構造を正しく伝える。これこそが、私たちが目指すべき「優しいWeb制作」の第一歩なんです。
—
つまずいたときは「深呼吸」
最初は、``と`
まずは、お気に入りの単語にルビを振ることから始めてみてください。HTMLが少しずつ、自分の中で「意味のある言葉」として組み立てられていく感覚は、きっと楽しいはずです。
もし分からなくなったら、いつでもこの記事を読み返してくださいね。皆さんのWeb制作ライフが、より温かく、そして素晴らしいものになりますように！
コメント