ルビ（フリガナ）HTML自動生成ツール
「ルビ（フリガナ）HTML生成ツール」は、漢字を入力するだけでタグ付きのHTMLと、ruby-position・ruby-alignなどのCSSコードを自動生成できる無料ツールです。文章を貼り付けると漢字のかたまりを自動で検出し、ふりがな入力欄がその場で表示されます。rpタグの有無や、ruby-position・ruby-alignの値、縦書き・横書き、ゴシック体・明朝体といった見た目のプレビューも切り替えながら確認でき、生成されたHTMLとCSSはそのままコピーしてコーディングに使えます。
検出された漢字にふりがなを入力してください
※検出された漢字ごとに、ふりがなを入力してください。
オプション
ルビ（フリガナ）HTML生成ツールとは？
漢字を含む文章を入力するだけで、ふりがなを付けたい漢字を自動検出し、タグを使ったHTMLコードとCSSコードをまとめて生成できるツールです。単にHTMLタグを出力するだけでなく、ruby-position・ruby-alignの調整や縦書き・フォントのプレビューまで確認できるため、Web制作者やコーダーがそのままコーディングに使える形でルビを設計できます。
各機能の説明
-
漢字の自動検出入力した文章から漢字のかたまりを自動抽出し、ふりがな入力欄をその場で生成します。
-
rpタグの有無選択ruby非対応ブラウザ向けの括弧表示（rpタグ）を含めるかどうかを選べます。
-
CSSプレビュー調整ruby-position・ruby-alignの値をリアルタイムに切り替えてプレビューできます。
-
縦書き／横書き切替writing-modeを切り替えて、縦書きレイアウトでのルビの見え方も確認できます。
-
フォント切替プレビューゴシック体・明朝体でのルビ表示の見た目の違いを比較できます。
-
HTML・CSSコピー生成したHTMLコードとCSSコードをタブで切り替えてワンクリックでコピーできます。
ruby-position・ruby-alignの設定値について
-
ruby-position: overルビを親文字の上（縦書き時は右）に表示する、もっとも一般的な配置です。
-
ruby-position: underルビを親文字の下に表示し、注釈のようなニュアンスを出したいときに使います。
-
ruby-align: center親文字とルビの文字数が異なる場合も、ルビを中央揃えで配置します。
-
ruby-align: space-between親文字とルビの両端をそろえ、文字間を均等に広げて配置します。
-
ruby-align: space-aroundルビ文字の左右の余白を均等に振り分けて配置します。
こんなときに使う
-
コーディング作業漢字の読みを正確にルビとしてマークアップし、そのままコードに組み込みたいとき。
-
SEO・アクセシビリティ対策地名や専門用語に読み仮名を付けて、可読性とアクセシビリティを高めたいとき。
-
子供向け・教育サイト制作漢字が読めない子供や学習者向けに、ふりがな表示を追加したいとき。
-
縦書きコンテンツ制作小説サイトや和風デザインで、縦書き×ルビの見え方を事前に確認したいとき。
-
デザインレビューゴシック体・明朝体でルビの見た目がどう変わるかを比較検討したいとき。
よくある質問
-
ふりがなの入力欄はどうやって表示されますか？
本文を入力すると、漢字のかたまりを自動検出し、それぞれの下にふりがな入力欄が自動生成されます。手動でペアを追加する必要はありません。
-
入力したテキストはサーバーに送信されますか？
送信されません。漢字の検出・HTML/CSSの生成はすべてブラウザ内のJavaScriptで完結しており、外部サーバーへのデータ送信は一切行われません。
-
ruby-positionとruby-alignの違いは何ですか？
ruby-positionはルビを親文字の上下どちらに配置するか、ruby-alignは親文字とルビの文字数差をどう揃えるかを指定するプロパティです。両方を組み合わせて調整します。
-
rpタグは常に付けたほうがよいですか？
rpタグはruby非対応の古いブラウザ向けに括弧表示するための補助タグです。現在の主要ブラウザはほぼ対応済みのため、対象環境によっては外しても問題ありません。
-
縦書きレイアウトでルビを使うときの注意点は？
writing-mode: vertical-rlを指定した際、ruby-positionのoverは親文字の右側に表示されます。実際のレイアウトに組み込む前に、本ツールのプレビューで見え方を確認するのがおすすめです。