【HTML Living Standard】ruby要素の使い方
ruby要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rubyオブジェクトは、東アジアの言語などで、振り仮名や短い注釈テキストを、ベースとなる主要なテキストに付与するために使用されるオブジェクトです。このHTML要素は、主に日本語や中国語といった表意文字を持つ言語において、漢字などの文字の読み方を示す発音ガイドや、短い意味の補足情報を表示することを目的としています。例えば、「漢字」の上に「かんじ」と振り仮名を振るような場合に利用されます。
ruby要素の内部には、注釈の対象となる主要なテキスト（ベーステキスト）と、その注釈であるルビテキストの両方を含めます。ルビテキストは通常<rt>要素を用いて指定され、ベーステキストの上部や隣に表示されます。また、ルビ表示に対応していない古いウェブブラウザや環境向けに、代替のテキスト（例えば括弧など）を表示するために<rp>要素と組み合わせて使用されることもあります。
この要素は、ウェブコンテンツの国際化対応において非常に重要です。読みづらい漢字に振り仮名を振ることで、テキストの可読性を高め、多様な読者層がコンテンツを正確に理解するのを助けます。ウェブサイトやアプリケーションにおいて、特定の言語圏のユーザー体験を向上させるために活用される、表現豊かなHTML要素の一つです。
構文(syntax)
1<ruby> 2 ベーステキスト 3 <rp>(</rp><rt>ルビテキスト</rt><rp>)</rp> 4</ruby>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML ruby要素でルビを振る
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Ruby Element Example</title> 7 <style> 8 /* ルビテキストが本文の上に表示されるように、簡単なスタイルを適用します */ 9 ruby { 10 font-size: 1.2em; /* 本文より少し大きく表示 */ 11 } 12 rt { 13 font-size: 0.6em; /* ルビテキストは小さく表示 */ 14 color: #555; /* ルビの色を少し薄く */ 15 } 16 </style> 17</head> 18<body> 19 <!-- 20 ruby要素は、東アジアの活字組版で使われるルビ（振り仮名）をマークアップするために使用します。 21 主に漢字に読み仮名を振る際などに利用されます。 22 --> 23 <p> 24 <ruby> 25 日本<rt>にほん</rt> 26 </ruby>は美しい国です。 27 </p> 28 29 <!-- 30 rt要素はルビテキスト（振り仮名）を指定します。 31 rp要素はルビ非サポートブラウザ向けに、ルビテキストを括弧で囲むためのフォールバックを提供します。 32 モダンブラウザでは通常表示されません。 33 --> 34 <p> 35 <ruby> 36 東京<rp>(</rp><rt>とうきょう</rt><rp>)</rp>タワー 37 </ruby>は高いです。 38 </p> 39</body> 40</html>
HTMLのruby要素は、東アジアの言語で使われるルビ（振り仮名）を、本文の文字の上に表示するために利用される要素です。主に漢字に読み仮名を振る際などに使用され、読み方を明確に伝える役割を持ちます。
この要素は、rt要素と組み合わせて使われます。rt要素は、ruby要素の内部でルビテキスト（振り仮名）自体を指定するために使用します。例えば、「日本」という文字に「にほん」とルビを振る場合、<ruby>日本<rt>にほん</rt></ruby>のように記述します。
また、rp要素は、ルビ表示に対応していない古いブラウザや環境向けに、ルビテキストを括弧で囲んで表示するためのフォールバック機能を提供します。モダンなブラウザでは通常、このrp要素は表示されません。サンプルコードでは、「東京」に「とうきょう」とルビを振り、非対応ブラウザ向けに括弧で囲む例を示しています。
ruby要素自体には、特定の引数や戻り値は存在せず、コンテンツに意味を付与することが主な役割です。サンプルコードでは、CSSを用いてルビの文字サイズや色を調整し、本文とルビが読みやすいようにスタイルを適用しています。これにより、日本語などのルビ文化を持つコンテンツを、より正確かつ分かりやすくウェブページ上で表現することができます。
ruby要素は、漢字などの本文に振り仮名（ルビ）を振る際に使用します。必ずrt要素を子要素として持ち、その中にルビの文字列を記述します。rp要素は、ルビ非対応ブラウザでルビテキストが括弧で囲まれて表示されるためのもので、現代の主要なブラウザでは通常表示されません。そのため、rpを省略しても問題ないケースが多いですが、古いブラウザへの互換性を考慮する場合は含めることを検討してください。ルビの見た目（文字サイズや色など）は、サンプルコードのようにCSSを用いて調整することで、より読みやすくすることができます。適切に利用することで、日本語などの表示のアクセシビリティと視認性を向上させることが可能です。