HTML : ルビ(ふりがな)の打ち方

このように漢字(かんじ)振り仮名(ふりがな)を打つための、HTMLコードの説明。

<!-- HTML -->
これは<ruby>
	漢字
	<rp>(</rp>
		<rt>かんじ</rt>
	<rp>)</rp>
</ruby>です。

上記のコードの出力は以下になります。

これは 漢字 ( かんじ ) です。

これを<ruby>タグに対応していない古いブラウザで見ると以下のようになります。

これは 漢字 ( かんじ ) です。

簡単に解説します。

  1. <ruby>タグで、全体を囲う。
  2. ふりがなは<rt>タグで囲う。(例では「かんじ」)
  3. 古いブラウザ用の区切り文字は<rp>タグで囲う。(例では「(」と「)」)

ただし、このコードでは前後にスペースが入っていて、間延びしています。よって、以下のようにスペースを無くした方が見やすいでしょう。

<!-- HTML -->
これは<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>です。

実行結果。

これは漢字(かんじ)です。

<ruby>タグに対応していないブラウザの場合。

これは漢字(かんじ)です。

以上。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA