テキストにルビ(ふりがな)を振るには?
rubyタグ、rtタグ、rpタグの書式
- <ruby> ~ <rt> ~ </rt></ruby>
ruby>
~ <rp>(</rp><rt> ~ </rt><rp>)</rp>
</ruby>
rubyタグ、rtタグ、rpタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
rubyタグ、rtタグ、rpタグの属性一覧
rubyタグ、rtタグ、rpタグの解説
<ruby>、<rt>、<rp>の各要素は、それぞれ、テキストにルビ(ふりがな)を振って表示させるための要素です。
<ruby>タグは、ルビを振る範囲を表すために使用します。ルビを振る対象を<ruby> ~ </ruby>で囲みます。
<rt>タグは、ルビとして表示させるテキストを表すために使用します。
<ruby>の子要素として、ルビを振る対象のテキストの直後に指定します。
<rp>タグは、ルビに対応していないブラウザでの表示を想定した要素です。
<rp> ~ </rp>で囲まれたテキストは、ルビに対応したブラウザでは表示されません。
そのため、「<ruby>春<rp>(</rp><rt>はる</rt><rp>)</rp></ruby>」のように指定し、ルビに対応していないブラウザでは<rt>内のテキストを括弧内に表示させる、といったような用途で使用します。
rubyタグ、rtタグ、rpタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<section>
<h1>巻層雲</h1>
<p>
<ruby>
巻層雲<rp>(</rp><rt>けんそううん</rt><rp>)</rp>
</ruby>
は雲の一種です。別名うす雲ともいいます。・・・
</p>
</section>
</body>
</html>
rubyタグ、rtタグ、rpタグのサンプル画面1
rubyタグ、rtタグ、rpタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<section>
<h1>事務所移転のお知らせ</h1>
<p>2011年12月1日より事務所を下記に移転することになりました。</p>
<p>
<ruby>
東京都豊島区池袋<rp>(</rp><rt>とうきょうととしまくいけぶくろ</rt><rp>)</rp>
</ruby>
1-1-1-1
<ruby>
ABC<rp>(</rp><rt>エービーシー</rt><rp>)</rp>
</ruby>
ビル
</p>
</section>
</body>
</html>
rubyタグ、rtタグ、rpタグのサンプル画面2
rubyタグ、rtタグ、rpタグの関連項目