ルビ

ルビ（ふりがな）HTML生成

漢字にルビを付ける ruby タグを作成
入力（青空文庫式）

記法：漢字《よみ》＝直前の漢字列にルビ／｜任意《よみ》＝｜から 《 までをルビ対象に指定（範囲を明示したいとき）。

プレビュー
ここに表示されます
HTML

ルビ（ふりがな）HTML生成とは

漢字などにふりがな（ルビ）を付けるHTML（<ruby>タグ）を生成する無料ツールです。青空文庫でおなじみの記法で入力でき、生成したHTMLをコピーしてブログやWebページに貼り付けられます。プレビューで実際の見た目を確認しながら作れます。

使い方

  1. 本文をルビ記法で入力する（漢字《よみ》）
  2. プレビューで確認する
  3. 「HTMLをコピー」して貼り付ける

入力の記法

  • 漢字《かんじ》：《》の直前にある漢字のまとまりにルビが付きます。
  • ｜任意《よみ》：ルビを付ける範囲を ｜（全角）で明示します。ひらがな交じりや範囲が曖昧なときに使います。例：｜大人気《だいにんき》。

生成されるHTMLの例：

<ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby>

rp フォールバックとは

<rp> は、ルビに対応していない古い環境でふりがなを丸括弧で囲んで表示するための要素です。付けておくと、対応環境では通常のルビ、非対応環境では「漢字（かんじ）」のように読めます。現在の主要ブラウザはルビに対応しているため必須ではありませんが、互換性のために付けておくと安心です。

よくある質問

ひらがな交じりの語にルビを付けるには？
｜で範囲を指定してください。例：｜受け付け《うけつけ》。自動判定では漢字部分だけが対象になります。
ルビの位置や大きさは変えられますか？
CSSで rt{ font-size:.5em } のように調整できます。本ツールはHTML構造の生成を担当します。
WordPressのビジュアルエディタに貼れますか？
「コード」表示（HTML）に貼り付けてください。ビジュアル側だとタグがそのまま文字として表示されることがあります。

無料・インストール不要のブラウザツール ／ ルビ（ふりがな）HTML生成