当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

【HTML】文章にルビを振る方法を解説

アイキャッチ画像
みきてぃ
口コミ用キャラクターアイコン

HTMLで文章にルビを振りたいけど、どうやったらいいの?

プロフィール用アイコン
みきてぃ

文章にルビを振ることができるHTMLタグは以下の通りだよ。

rubyタグ文章にルビを振るために必要なタグ
rbタグルビを振りたい文章を指定するタグ
rtタグ文章にルビを入れるタグ
rpタグrubyタグ非対応ブラウザで表示した場合、括弧内にルビが表示されるように示すタグ
rtcタグ複数のルビを振るために使われるタグ
プロフィール用アイコン
みきてぃ

手っ取り早く文章にルビを振りたいなら、pタグの中にrubyタグとrtタグを入れるだけで、文章にルビを振ることができるよ!

1<p>
2<ruby>
3天の川<rt>あまのがわ</rt>
4</ruby>
5</p>

▼ブラウザ(Microsoft Edge)で表示

HTML rubyタグの使い方

というわけで、この記事では「HTMLで文章にルビを振る方法」について解説していきます。

HTMLで文章にルビを振る方法

冒頭にも書きましたが、HTMLタグで文章にルビを振る場合は、以下のタグを使います。

  • rubyタグ
  • rbタグ
  • rtタグ
  • rpタグ
  • rtcタグ

rubyタグ

文章にルビを振るために必要なタグです。これが無いと、文章にルビを振ることができません。

rbタグ

ルビを振りたい文章を指定するタグです。

rtタグ

文章に入れるルビテキストを指定するタグです。

rpタグ

文章に振られたルビテキストを示すためのタグです。

rubyタグに非対応ブラウザで表示したい場合は、rpタグを用いて括弧内にルビを表示することができます。

rtcタグ

文章に複数のルビを振りたい時に使われるタグです。

なお、rtcタグはFirefoxでしか対応していませんので、この記事でのサンプルコードは割愛させていただきます。

サンプルコード

シンプルな使い方

1<p>
2<ruby>
3天の川<rt>あまのがわ</rt>
4</ruby>
5</p>

▼ブラウザ(Microsoft Edge)では、以下のように表示されます。

HTML rubyタグの使い方

rbタグを使って対象を指定した場合

1<p>
2<ruby>
3<rb></rb>
4<rb></rb>
5<rb></rb>
6<rt></rt>
7<rt></rt>
8<rt>さん</rt>
9</ruby>
10</p>

▼ブラウザ(Firefox)では、以下のように表示されます。

HTML rubyタグの使い方

非対応ブラウザで表示した場合、括弧付きルビに置き換える

1<p>
2<ruby>
3富士山
4<rp></rp>
5<rt>ふじさん</rt>
6<rp></rp>
7</ruby>
8</p>

▼ブラウザ(Microsoft Edge)では、以下のように表示されます。

HTML rubyタグの使い方
プロフィール用アイコン
みきてぃ

rubyタグに対応していないブラウザで開いた場合は、括弧内にルビが表示されるよ。

まとめ

今回は「HTMLで文章にルビを振る方法」について解説しました。

最後にまとめです。

rubyタグ文章にルビを振るために必要なタグ
rbタグルビを振りたい文章を指定するタグ
rtタグ文章にルビを入れるタグ
rpタグrubyタグ非対応ブラウザで表示した場合、括弧内にルビが表示されるように示すタグ
rtcタグ複数のルビを振るために使われるタグ

文章にルビを振る機会は少ないと思いますが、難しい読み方を分かりやすくするために使われることもありますので、ぜひ覚えておいてくださいね。

出典

小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

スポンサーリンク
記事URLをコピーしました