HTMLでルビ（ふりがな）と傍点を表示する方法｜ruby・rt・rpタグとtext-emphasis
Web ページでふりがなを振るには HTML の <ruby> タグ、傍点（圏点）を振るには CSS の text-emphasis を使います。どちらも今の主要ブラウザで表示でき、画像や記号を使わずに縦書き・横書きのどちらでも正しい位置に出せます。この記事では、<ruby>・<rt>・<rp> の役割と書き方、熟語ルビと1文字ずつのルビの違い、傍点の CSS と点の種類、縦書きで表示するときの指定、行間が崩れないようにするコツまでを、コピーして使える例つきで解説します。
<ruby>・<rt>・<rp> タグの基本
HTML のルビは、親文字と読みを <ruby> タグで囲み、読みの部分を <rt> タグに入れて書きます。いちばん短い形は「<ruby>漢字<rt>かんじ</rt></ruby>」で、ブラウザは「漢字」の上（縦書きでは右）に小さく「かんじ」を表示します。
| タグ | 役割 | 書く場所 |
|---|---|---|
| <ruby> | ルビのまとまり全体を囲む | 親文字と読みの外側 |
| <rt> | 読み（ルビの文字） | 親文字のすぐ後ろ |
| <rp> | ルビに対応していない環境で読みを括弧で囲む | <rt> の前後に「（」「）」を入れる |
| <rb>・<rtc> | 親文字・ルビの文字列のまとまり | 今の HTML の仕様では使わない（古い書き方） |
<rp> は、ルビを表示できるブラウザでは隠され、表示できない環境（一部のメールソフトやテキストの読み取りなど）でだけ見えます。「<ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>」と書いておくと、ルビ非対応の環境では「漢字（かんじ）」と括弧書きになり、読みが本文とつながって「漢字かんじ」と見える事故を防げます。
熟語ルビとモノルビ（1文字ずつのルビ）
熟語にまとめて読みを振る「熟語ルビ（グループルビ）」と、1文字ずつ読みを振る「モノルビ」では、HTML の書き方が変わります。モノルビは、親文字と <rt> を交互に並べます。
| 種類 | HTML | 向いている場面 |
|---|---|---|
| 熟語ルビ | <ruby>黄昏<rt>たそがれ</rt></ruby> | 熟字訓・当て字・キャラクターの名前など、字ごとに読みを分けられない語 |
| モノルビ | <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby> | 教材・子ども向けの文章など、1字ずつ読みを示したいとき |
モノルビは、行末で熟語が分かれても読みが字と一緒に移るので、改行位置が自由に決まる Web では読みやすくなる利点があります。一方、「黄昏」「今日」のように字ごとに読みを分けられない熟字訓は、熟語ルビで書くしかありません。
傍点（圏点）は CSS の text-emphasis で振る
傍点は、文字の意味ではなく見た目の強調なので、HTML ではタグで強調を示し、点は CSS で描きます。強調の意味を持つ <em> タグを使い、斜体を打ち消したうえで text-emphasis を指定するのが定番です。
HTML は「<em class="bouten">禁書</em>」、CSS は「em.bouten { font-style: normal; -webkit-text-emphasis: filled sesame; text-emphasis: filled sesame; }」と書きます。-webkit- をつけた行は、古い Safari や Chrome 向けの保険です。
| text-emphasis の値 | 見た目 | 主な用途 |
|---|---|---|
| filled sesame | 黒いゴマ点 ﹅ | 日本語の縦書き・横書きの傍点の標準 |
| open sesame | 白いゴマ点 ﹆ | 白ゴマ傍点 |
| filled dot | 黒い丸 • | 横書きでの軽い強調 |
| filled circle / open circle | 大きめの黒丸・白丸 | 丸傍点・白丸傍点 |
| "★" など任意の1文字 | 指定した文字 | 特殊な演出 |
ルビの位置・行間・縦書きの CSS
- 行間を広めにとる：ルビのある行だけ高くなって行間がばらつくのを防ぐため、本文の line-height を 1.8〜2 程度にしておきます。
- ルビの大きさ：<rt> は既定で親文字の半分ほどの大きさです。小さすぎるときは rt { font-size: 0.55em; } のように調整します。
- ルビを下に出す：ruby-position: under; で横書きのルビを親文字の下に表示できます。
- 縦書きにする：本文を囲む要素に writing-mode: vertical-rl; を指定すると、ルビは字の右、傍点も字の右に自動で移ります。
- 傍点の位置を変える：text-emphasis-position で横書きの上下、縦書きの左右を指定できます。日本語は over right（横書きは上・縦書きは右）が基本です。
- 縦書きの数字：2桁の数字を横向きに並べるときは text-combine-upright: all; を使います。
ruby-position の inter-character（台湾の注音符号のような字の横のルビ）などは、ブラウザによって対応状況が違います。使う前に対象のブラウザで表示を確かめてください。
ルビとコピー・読み上げ・検索の関係
<rt> の中の読みも HTML の文字なので、ページのテキストとして扱われます。そのため、使い方によっては次のようなことが起きます。
- コピーすると読みも一緒に貼り付けられることがある：ブラウザによっては「黄昏たそがれ」「黄昏（たそがれ）」のようになります。<rp> を入れておくと括弧つきになり、どこが読みか区別しやすくなります。
- 読み上げソフトが親文字と読みを続けて読むことがある：ルビを多用すると「たそがれ たそがれ」のように二重に読まれる環境があります。教材などでは、実際に読み上げで確かめておくと安心です。
- ルビは必要な語に絞る：すべての漢字に振ると、ページの文字量が増えて読みにくくなります。難読語や固有名詞に絞るのが基本です。
ページに「<ruby>」のような記号の並びがそのまま見えるときは、タグが文字としてエスケープされた状態です。ブログの編集画面では、ビジュアル編集ではなく HTML の編集モードに貼り付けてください。
小説の本文を一括で HTML のルビと傍点にする
なろう・カクヨム・pixiv の書き方で書いた小説を Web サイトやブログに載せるときは、ルビと傍点を1つずつタグに書き換えるのは現実的ではありません。小説のルビ・傍点 変換に本文を貼り付けて、変換先で「HTML」を選ぶと、まとめて書き換えられます。
- ルビは <ruby> と <rt> に、傍点は <em class="bouten"> になります。「傍点の CSS をコピー」で、この記事で紹介した text-emphasis の CSS もコピーできます。
- 「<rp> を入れる」を選ぶと、ルビ非対応の環境で「漢字（かんじ）」と表示される形で出力します。
- 改行は <br /> にするか、「改行ごとに <p> で段落にする」かを選べます。
- HTML の <ruby> を読み取って、なろう・カクヨム・pixiv の書き方に戻すこともできます。モノルビも読み取れます。
ほかの形式との対応は小説の転載でルビが崩れるときの直し方にまとめています。
よくある質問
- HTML でふりがなを振るには？
- 親文字と読みを <ruby> で囲み、読みを <rt> に入れて「<ruby>漢字<rt>かんじ</rt></ruby>」と書きます。ルビ非対応の環境向けに <rp>（</rp> と <rp>）</rp> を <rt> の前後に入れておくと、括弧書きで表示されます。
- rp タグは必要ですか？
- 今の主要ブラウザはルビに対応しているので、なくても表示は崩れません。ただ、ルビ非対応の環境やテキストとして取り出されたときに、読みが本文とつながって見えるのを防げるため、入れておくと安全です。
- CSS で傍点を振るには？
- 傍点を振りたい文字を <em> などで囲み、「text-emphasis: filled sesame;」を指定します。<em> を使うときは font-style: normal; で斜体を打ち消し、古いブラウザ向けに -webkit-text-emphasis も書いておきます。
- 縦書きでルビを右側に表示するには？
- 本文を囲む要素に writing-mode: vertical-rl; を指定すると、ルビは自動で字の右側に表示されます。傍点も同じように字の右側に移ります。
- rb タグは使わないほうがいいですか？
- 今の HTML の仕様では <rb> と <rtc> は使わない要素とされています。親文字は <ruby> の中に直接書き、1文字ずつ振るときは親文字と <rt> を交互に並べてください。
この記事で紹介したツール
あわせて読みたい
カクヨムのルビと傍点の書き方｜《《傍点》》と｜《で記号を表示する方法
カクヨムでは、ルビを「｜漢字《かんじ》」、傍点を「《《傍点》》」と書きます。なろうとよく似ていますが、傍点の専用の書き方がある、括弧はルビにならない、ルビではない《を「｜《」と書いて表示できる、といった違いがあります。この記事では、カクヨムのルビと傍点の書き方、縦棒を省けるときと省けないとき、二つ名や作中の書名に《》を使いたいときの書き方、なろう・pixiv との行き来で崩れない変換のしかたを解説します。
記事を読む →pixiv小説のルビと傍点の振り方｜[[rb:]]の書き方となろう・カクヨムからの一括変換
pixiv 小説のルビは「[[rb:漢字 > かんじ]]」と書きます。なろうやカクヨムの「｜漢字《かんじ》」とはまったく違う書き方なので、作品を転載すると《》が記号のまま表示されてしまいます。また pixiv には傍点の専用の書き方がなく、1文字ずつ「・」のルビを振るのが定番です。この記事では、pixiv 小説のルビと傍点の書き方、[newpage] などほかの特殊タグとの付き合い方、なろう・カクヨムとの間でルビを崩さずに一括変換する手順を解説します。
記事を読む →なろうのルビの振り方｜縦棒｜の使い方・傍点・括弧が勝手にルビになるときの対処
小説家になろうでは、本文に「｜漢字《かんじ》」と書くだけでルビ（ふりがな）が振れます。ところが、縦棒（｜）を省いたらルビの位置がずれた、送りがなまで含めたら《》がそのまま表示された、「彼（かれ）」と書いた括弧がふりがなに化けた、という失敗がとても多い書き方でもあります。この記事では、なろうのルビの3つの書き方と親文字になる範囲、縦棒が必要になる場面、専用の書き方がない傍点の振り方、括弧や《》が意図せずルビになるときの直し方までをまとめます。
記事を読む →