SYNCERのロゴ
アイキャッチ画像

読み仮名を振る方法

文中で一般的でない難しい漢字を使用する時は、読み仮名を振るのが親切です。難しい技術は必要なく、ruby要素、rt要素、rp要素で実現できます。

サンプルコード

例えば、「薔薇」に読み仮名を振りたい場合は、薔薇の後ろにrt要素で囲った読み仮名を付けて下さい。そして全体をruby要素で囲みます。

<ruby>薔薇<rt>ばら</rt></ruby>が綺麗ですねー。

今は非対応のブラウザはありませんが、もし、ruby要素、rt要素に非対応のブラウザの場合、「薔薇ばら」のように表示されてしまいます。念のため、非対応のブラウザ向けのフォローをしたい場合は、rt要素の前後にrp要素で囲った括弧を加えておきましょう。これなら、非対応のブラウザでは「薔薇(ばら)」というように表示されます。rp要素は、ruby要素、rt要素に対応している場合は非表示、対応してない場合は表示される、という働きをする要素です。

<ruby>薔薇<rp>(</rp><rt>ばら</rt><rp>)</rp></ruby>が綺麗ですねー。

デモ

読み仮名を振った例です。非対応ブラウザ向けのrp要素は、対応しているブラウザにとっては何の意味もありません。

<!-- このコードは編集できます。 -->

<p>
	<ruby>薔薇<rt>ばら</rt></ruby>が綺麗ですねー。
</p>

<p>
	<ruby>阿修羅像<rp>(</rp><rt>あしゅらぞう</rt><rp>)</rp></ruby>は怖いですねー。
</p>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月5日 (土)
コンテンツを公開しました。