English 中文 العربية 日本語 Português

<ruby>: RUBY 要素

最終更新：2026-10-13

<ruby>RUBY 要素

東アジアのテキストに読み（ピンイン・かな）を追加します。注釈は rt で示し、必要に応じて rp で囲みます。

カテゴリテキスト内容
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </ruby> タグ
ステータス標準

📝 構文

<ruby>漢<rt>かん</rt></ruby>
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<ruby> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： ruby は注釈にネイティブ対応しています。非対応ブラウザーでは rt は無視されます。

❓ よくある質問

Qruby タグは何に使うものですか？
A<ruby> はルビ（注音）を表示します。基底の文字の上に小さな文字を載せる形で、日本語のふりがなや中国語の拼音（ピンイン）表記が典型です。たとえば <ruby>漢字<rt>かんじ</rt></ruby> と書くと、ブラウザが自動で読みを文字の上に配置します。
Qrt と rp はそれぞれ何ですか？
A<rt> はルビの本文（拼音やかな）です。<rp> はフォールバック用の括弧で、ruby 非対応のブラウザでは <rp>（</rp><rt>かんじ</rt><rp>）</rp> のように表示され、対応ブラウザでは自動で隠れます。現代のブラウザはすべて対応済みなので、rp は防御的な書き方という位置づけです。
Q中国語の拼音のルビはどう書きますか？
A1文字ずつ ruby の組にします：<ruby>漢<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>。単語まるごとを1つの ruby に入れると複数の拼音が寄って位置合わせが難しくなるため、1字ずつのグループ分けが最も安定する組版です。
<rt> <rp>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%