こんにちは！フロントエンドの世界へようこそ。
HTMLを書いていると、たまに「漢字の読み方を添えたいな」と思うことはありませんか？例えば、難読な人名や、情緒あふれる文学作品など。そんな時、ただ括弧で囲むだけでは少し味気ないですよね。
実はHTMLには、そんな「ルビ（ふりがな）」を美しく、かつ正確にマークアップするための専用タグが用意されています。今回は、その「ruby（ルビ）要素」について、まるで手紙に添える一言のような温かさを持って解説していきますね。
—
ルビを振るための「3つの仲間たち」
HTMLでルビを扱うには、基本的に3つのタグを使います。これらはチームで動くので、まずはそれぞれの役割を「お弁当箱」に例えてみましょう。
1. ``：お弁当箱そのもの。ルビを使うよ！という宣言です。
2. `：お箸やスプーン。「Ruby Text」の略で、読み仮名そのものを指します。
3. `：仕切り板。これが重要なんです。
実際に書いてみよう
まずは一番シンプルな構成を見てみましょう。
読売
これだけで、ブラウザは「読売」の上に「よみうり」と綺麗に表示してくれます。まるで魔法みたいですよね。
—
なぜ「rp」が必要なの？（フォールバックという優しさ）
ここで一つ、少しだけ心配な話をします。実は、世界中のすべてのブラウザが、昔からルビ表示を完璧にこなせるわけではありませんでした。
もし、ルビに対応していないブラウザで、ただ `` と `
そこで登場するのが、`です。
これは、「もしブラウザがルビに対応していなかったら、代わりにこの括弧を表示してね！」という、古いブラウザに向けた「小さな配慮」なんです。
賢い書き方を見てみましょう
最新
このように書いておくと、モダンなブラウザでは綺麗にルビが表示され、もし古いブラウザで見たとしても「最新(さいしん)」というように、自然な形で表示されるようになります。
これぞ、Web制作者が持つべき「誰にとっても読みやすいページを作る」という心遣いですね。
—
つまずきやすいポイント：焦らなくて大丈夫！
「ルビが思った位置に出ない！」とか「表示が崩れて見える……」と悩むこともあるかもしれません。でも、大丈夫です。
- 親要素はしっかり囲む： `` タグを閉じ忘れると、ページ全体が崩れてしまうことがあります。迷ったら、まず開始と終了のタグが揃っているか確認しましょう。
- CSSで調整する： ルビのフォントサイズや、漢字との距離が気になる時は、CSSで `ruby { font-size: 0.8em; }` のように調整してあげるだけで、ぐっとプロっぽい仕上がりになります。
—
最後に：Webに「情緒」を添えるということ
Webページは単なる情報の羅列ではなく、人が読むための場所です。ルビを振るという行為は、その言葉を「正しく伝えたい」「読みやすくしたい」という、書き手から読み手への思いやりそのものだと私は思います。
最初は難しく感じるかもしれませんが、まずは今回紹介した3つのタグを組み合わせて、お気に入りの言葉にふりがなを振ってみてください。
Web制作は、こうした小さなタグの積み重ねが、誰かの読書体験をより豊かに変えていく素晴らしい仕事です。ぜひ、怖がらずに色々と試してみてくださいね。また何か分からないことがあれば、いつでも聞きに来てください。応援しています！
コメント