ルビ(フリガナ)生成ツール

テキストと読み仮名のペアを入力し、HTMLの<ruby>タグコードを生成します。プレビューでフリガナの表示を確認してからコードをコピーできます。

テキスト(漢字など)読み仮名(ふりがな)
漢字かんじ

使い方

  1. STEP 1
    「テキスト」欄にルビを振りたい文字(漢字など)を入力します。
  2. STEP 2
    「読み仮名」欄にふりがなを入力します。
  3. STEP 3
    「プレビュー」でルビの表示を確認し、「HTMLコード」タブでコードをコピーします。
  • 生成されるHTMLは<ruby>テキスト<rt>かな</rt></ruby>形式(HTML5準拠)です。<rb>タグはHTML5で延小を2022年に削除済みのため使用していません。
  • 読み仮名が空欄の行はそのままのテキストとして出力されます。

活用のヒント

1

難読地名・人名・専門用語にルビを振ることでユーザーの読み間違いを防げます。

2

教育コンテンツや子供向けWebサイトでルビは標準的な配慮です。

3

CSSで rt { font-size: 0.5em; } などとスタイルを調整してお使いください。

よくある質問

  • Q1

    Wordpressでルビを使うには?

    WordpressのビジュアルエディターではなくHTMLエディターに切り替えて、生成したコードを貼り付けてください。

  • Q2

    rubyタグはすべてのブラウザで表示されますか?

    モダンブラウザ(Chrome・Firefox・Safari・Edge)ではすべて対応しています。

  • Q3

    ルビ(フリガナ)のCSSカスタマイズはできますか?

    はい。生成したHTMLにCSSクラスを追加するか、rt要素にスタイルを適用することでサイズや色を変更できます。

関連記事

関連ツール