• HOME > 
  • HTML > 
  • HTMLでルビ(ふりがな)をふる方法【rubyタグの使い方】

HTMLでルビ(ふりがな)をふる方法【rubyタグの使い方】

投稿日:

ルビをふるには?

紙の印刷物などと同様にWebページの文字にもルビ(ふりがな)をふることが可能です。

文字にルビをふるにはHTMLのrubyタグをはじめとした専用のタグを使用します。

ユーザビリティ向上のためにも、難読漢字などにはふりがなを付けて読みやすくしておきましょう。

ふりがなの例

rubyタグの使い方

HTMLで文字にルビをふるには、rubyタグをはじめとした次の4つのタグを組み合わせて使用します。それぞれ単体では機能せず組み合わせてはじめてルビを表示させることができます。

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

rubyタグ

rubyタグはルビをふりたい文字を指定するために使用します。rubyタグで文字全体を囲み、次のrtタグでルビを記述します。

rtタグ

rt(ruby text)タグは、 ルビを記述するために使用します。ruby要素の子要素としてルビをふりたい文字の後ろに配置します。(前に記述しても正しく表示されません)

rubyの書き方

HTML

<ruby>
    難読漢字<rt>なんどくかんじ</rt>
</ruby>

プレビュー

難読漢字なんどくかんじ

一文字づつにルビをふることもできる

上記の使い方の場合、漢字一文字ではなく単語全体にルビがふられていますが、下記のような記述の仕方にすれば漢字一文字ごとに対してルビをふっていくことが可能です。

HTML

<ruby>
    <ruby>難<rt>なん</rt>読<rt>どく</rt>漢<rt>かん</rt>字<rt>じ</rt></ruby>
</ruby>

プレビュー

なんどくかん

rbタグ

rb(ruby base)タグは、ルビをふる対象を明示させたい場合に使います。省略可能な要素なので、先程のようにrbタグをつけなくてもルビは表示できます。

もしrbタグを使いたい場合は次のように記述します。

rbの書き方

rp

rp(ruby parentheses)タグは、rubyタグが非対応ブラウザの場合に有効になる要素です。

rubyタグ非対応ブラウザではrt要素はルビとして文字の上に表示されず、ルビなのかどうかわかりづらくなってしまいます。

HTML

<ruby>
    難読漢字<rt>なんどくかんじ</rt>
</ruby>

非対応ブラウザの場合

非対応ブラウザの場合

そこでrpタグを使って下の例のように記述しておくことで、非対応ブラウザではカッコの中にルビを表示するようにできます。なお、rubyタグに対応しているブラウザでは表示されません。

HTML

<ruby>
    難読漢字<rp>(</rp><rt>なんどくかんじ</rt><rp>)</rp>
</ruby>

非対応ブラウザの場合

非対応ブラウザの場合

ルビを調整するCSSプロパティ

ルビのサイズや配置などはCSSのプロパティを使って調整することができます。

ルビの文字サイズを変更する【font-size】

ルビに関しても文字サイズを調整するfont-sizeプロパティで変更することが可能です。

rtをセレクターにして任意のサイズに変更します。(rtにクラスなどを付けて指定してもOK)

CSS

rt.sample1{
    font-size:10px;
}
rt.sample2{
    font-size:16px;
}

プレビュー

難読漢字なんどくかんじ 難読漢字なんどくかんじ
リンク先のサムネイル
CSSのfont-sizeプロパティの使い方

font-sizeは、その名の通り文字の表示サイズを指定するプロパティです。px、%、em(rem)、vw(vh)などの単位によって絶対・相対的な値を指定することができます。このページでは基本的な書き方から単位ごとの特徴と使い分けについて説明します...【もっと読む】

ルビの文字寄せを変更する【text-align】

text-alignプロパティを使えば、ルビを中央や左右に寄せることができます。(※わかりやすいようにletter-spacingで文字間を狭めています)

CSS

rt.sample3{
    text-align:left;
}
rt.sample4{
    text-align:center;
}
rt.sample5{
    text-align:right;
}

プレビュー

難読漢字なんどくかんじ 難読漢字なんどくかんじ 難読漢字なんどくかんじ

ルビの上下の位置を変更する【ruby-position】

ruby-positionプロパティは、ルビを文字の上につけるか下につけるかを変更できるプロパティです。

rubyタグに対して指定し、「over」で上、「under」で下にルビを表示させます。

CSS

ruby.sample6{
    ruby-position:over;
}
ruby.sample7{
    ruby-position:under;
}

プレビュー

難読漢字なんどくかんじ 難読漢字なんどくかんじ

まとめ

以上がHTMLでルビをふるrubyタグの使い方です。

手間は掛かるかもしれませんが、読み手のことを考えてふりがなを付けてあげれば読みやすいページができあがるのではないでしょうか?

関連する記事

サムネイル

HTMLのpタグ(段落)の使い方【改行タグbrとの違い】

2023年03月15日
pタグの「p」は段落・節を意味するParagraphの頭文字で、ひとかたまりの文章であることを指定するためのタグです。開始タグと終了タグからなる要素で、pタグを使用して段落を分けると前後の要素と改行されます。
サムネイル

Google Chromeのデベロッパーツールの使い方【画像……

2022年01月15日
最終更新日:2022年02月12日
デベロッパーツールとはWEBブラウザであるGoogle Chromeにはじめから備わっている機能の一つです。閲覧中のWEBサイトのページを構成しているHTMLやCSSといったソースコードを確認することができます
サムネイル

HTMLとCSSだけでアコーディオンメニューを作る方法【初心……

2020年12月18日
最終更新日:2022年07月05日
アコーディオンメニューとは、メニューの項目名をクリックすると非表示にされていたコンテンツが項目名の下に広がって表示される機能のことです。HTMLとCSSだけで簡単に実装することが可能です。
サムネイル

HTMLでスクロールバーを表示させる方法

2020年12月17日
最終更新日:2022年01月28日
HTMLで表示させるスクロールバーとは? HTMLとCSSを用いることでサイト内のコンテンツを一部だけ見えるようにし隠れた部分をスクロールして見るようにすること […]
サムネイル

HTMLにGoogle MAP(グーグルマップ)の埋め込みを……

2020年12月16日
最終更新日:2022年01月28日
Google MAPとは? 埋め込みとは? 自身のサイトのページの中に特定の場所を示したGoogle MAPを表示させることが出来ます。 簡単かつ無料なうえ、ペ […]
サムネイル

HTMLのtable(テーブル)タグの使い方

2020年12月15日
最終更新日:2022年01月27日
<table>タグとは? WEBサイトに表を表示させたい場合にHTMLの<table>(テーブル)タグを使用します。 単に表の作成に利用 […]
サムネイル

HTMLのformタグで入力フォームを作る方法

2020年12月14日
最終更新日:2022年01月28日
<form>タグとは? 「フォームで入力した内容を送信する」機能をもつHTMLタグです。 問い合わせフォームは、別に集計してメールを送る処理を記述し […]