ルビの基礎知識から応用テクニックまで！HTML・CSS・JavaScriptで表現を極める

ruby 要素

ルビを振るためには、<ruby> タグを使用します。このタグで囲まれた範囲がルビの対象となります。

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

上記の例では、「漢字」という文字に「かんじ」というルビが振られます。

rb 要素

ルビの対象となる文字をより詳細に指定するために、<rb> タグを使用します。<ruby> タグ内に複数の <rb> タグを配置することで、それぞれの文字に個別に対象となるルビを指定することができます。

<ruby><rb>漢</rb><rt>かん</rt><rb>字</rb><rt>じ</rt></ruby>

上記の例では、「漢」という文字には「かん」というルビ、「字」という文字には「じ」というルビが振られます。

rt 要素

ルビの内容を記述するために、<rt> タグを使用します。<ruby> タグまたは <rb> タグ内に配置する必要があります。

<ruby>漢字<rt>かん</rt>字<rt>じ</rt></ruby>

上記の例では、「かん」と「じ」というルビ内容がそれぞれ表示されます。

ルビを括弧などの記号で囲むために、<rp> タグを使用します。ルビに対応していないブラウザで表示される場合に備えて、ルビの内容を括弧などで囲むことで、ルビがなくてもある程度意味が伝わるようにすることができます。

<ruby>漢字<rt>かん</rt>字<rt>じ</rt><rp>(</rp><rt>かん</rt><rt>じ</rt><rp>)</rp></ruby>

上記の例では、ルビに対応しているブラウザでは「漢字（かんじ）」と表示され、ルビに対応していないブラウザでは「漢字(かんじ)」と表示されます。

HTML5 では、<rtc> タグを使用してルビの向きを指定することができます。
ルビの位置やフォントサイズは、CSS で調整することができます。
ルビは、縦書きと横書きのどちらでも使用することができます。

Ruby on Rails でのルビの利用

Ruby on Rails でルビを利用するには、erb テンプレートエンジンを使用して ruby 要素を埋め込むことができます。

<%= raw("<ruby>漢字#{h.kanji}<rt>#{h.kanji_ruby}</rt>字#{h.ji}<rt>#{h.ji_ruby}</rt></ruby>") %>

上記の例では、h.kanji と h.kanji_ruby から取得した値をルビの内容として表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML の Elements でルビを振る</title>
</head>
<body>
  <h1>ルビの例</h1>
  <p>漢字<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>にルビを振りました。</p>
  <p>複数の文字にルビを振る場合:</p>
  <p><ruby><rb>漢</rb><rt>かん</rt><rb>字</rb><rt>じ</rt></ruby>にルビを振りました。</p>
  <p>ルビを括弧で囲む:</p>
  <p><ruby>漢字<rt>かん</rt>字<rt>じ</rt><rp>(</rp><rt>かん</rt><rt>じ</rt><rp>)</rp></ruby>にルビを振りました。</p>
</body>
</html>

ルビの例

漢字（かんじ）にルビを振りました。

複数の文字にルビを振る場合:

漢字（かんじ）にルビを振りました。

ルビを括弧で囲む:

漢字（かんじ）にルビを振りました。

class HomeController < ApplicationController
  def index
    @kanji = "漢字"
    @kanji_ruby = "かんじ"
    @ji = "字"
    @ji_ruby = "じ"
  end
end

# views/home/index.html.erb
<h1>ルビの例</h1>
<p>漢字<%= raw("<ruby>#{h.kanji}<rt>#{h.kanji_ruby}</rt>字#{h.ji}<rt>#{h.ji_ruby}</rt></ruby>") %>にルビを振りました。</p>

上記のコードを実行すると、以下のような結果が表示されます。

ルビの例

漢字（かんじ）にルビを振りました。

<rp>要素（ルビ代替表示用括弧要素）

<rp>要素は、ルビに対応していないブラウザでルビを表示する際に、ルビの内容を括弧などで囲むために使用されます。ルビの内容を括弧などで囲むことで、ルビがなくてもある程度意味が伝わるようにすることができます。

<ruby>漢字<rt>かん</rt>字<rt>じ</rt><rp>(</rp><rt>かん</rt><rt>じ</rt><rp>)</rp></ruby>

CSSによる疑似要素

CSSの::beforeおよび::after疑似要素を使用して、ルビを表現することができます。この方法は、ルビをより柔軟に制御することができますが、HTMLの構造を変更する必要がないため、利便性が高いというメリットがあります。

ruby {
  position: relative;
}

ruby::after {
  content: "[";
  position: absolute;
  top: 50%;
  left: -0.5em;
  transform: translateY(-50%);
}

ruby::before {
  content: "]";
  position: absolute;
  top: 50%;
  right: -0.5em;
  transform: translateY(-50%);
}

上記のCSSコードは、ルビ要素の前後に角括弧を追加します。

JavaScriptによるライブラリ

JavaScriptのライブラリを使用して、ルビを表現することができます。この方法は、ルビをより動的に制御することができますが、JavaScriptの知識が必要となるというデメリットがあります。

画像

ルビを画像として用意し、HTMLで表示する方法もあります。この方法は、複雑なルビ表現を可能にするというメリットがありますが、メンテナンス性やアクセシビリティが低くなるというデメリットがあります。

注意点

上記で紹介した代替方法はそれぞれメリットとデメリットがあります。どの方法を選択するかは、状況に応じて判断する必要があります。

また、いずれの方法を使用する場合も、ルビに対応していないユーザーがいることを考慮する必要があります。

上記以外にも、ルビを表現する方法として、以下のような方法があります。

ルビ専用のフォントを使用する
特殊文字を使用する