こんにちは、ティウェブ宮本です。 Webサイトを見ているときに、「この文字、読み方が分からないな」と思ったことはありませんか？ <ruby>タグを使用すればHTML上で振り仮名を表示させることができます。 今回は<ruby>タグについてご紹介します。

<ruby>タグとは

<ruby>タグは、HTML5で導入された要素で、ルビ（ふりがな）を表示するために使用されます。 主に日本語、中国語、韓国語などの東アジア言語で、漢字の読み方を示すために活用されています。

何故<ruby>タグを使用するのか

<ruby>タグを使用することで以下のようなメリットが考えられます。

<ruby>タグの基本的な構造

<ruby> タグは、主に以下の3つの要素を組み合わせて使います。

元の文章

お茶を淹れる最中、ふと栗最中の優しい甘さを思い出した。
あの仕事の締め切りの最中、疲れた心にその甘さが染み渡ったのを覚えている。

ルビを振った文章

お茶を淹れる最中(さいちゅう)、ふと栗最中(もなか)の優しい甘さを思い出した。
あの仕事の締め切りの最中(さなか)、疲れた心にその甘さが染み渡ったのを覚えている。

HTMLコード

<p>
お茶を淹れる<ruby>最中<rp>(</rp><rt>さいちゅう</rt><rp>)</rp></ruby>、ふと栗<ruby>最中<rp>(</rp><rt>もなか</rt><rp>)</rp></ruby>の優しい甘さを思い出した。<br>
あの仕事の締め切りの<ruby>最中<rp>(</rp><rt>さなか</rt><rp>)</rp></ruby>、疲れた心にその甘さが染み渡ったのを覚えている。
</p>

同じ漢字でも読み方が複数ある日本語の場合、ルビを振ることで文章が分かりやすくなります。

ジェネレーターを使用

長い文章に一つずつルビを振っていくのはなかなか大変な作業かと思います。
ジェネレーターや生成AIを使用することで簡単に<ruby>を入力することも可能です。
今回、ティウェブでもクリック一つでルビを振ってくれるジェネレーターを用意しましたのでお試しください。

本ジェネレーターではTakuya Asano氏の kuromoji.js を利用しています。

生成AIを使用

生成AIにルビを振ってもらうという手段もあります。

「<ruby>タグを使用して次の文章にルビを打ってほしい」のように指示するとAIが<ruby>タグを使用した文章のコードを生成してくれます。

注意点
※ジェネレーター同様、誤りが含まれている可能性があります。必ず確認しましょう。

オンラインサービスや生成AIはボタン一つで簡単に生成ができる代わりに、情報漏洩のリスクもあります。 使用に関しては適切に判断しましょう。

ルビを振るデメリット

多くのブラウザにおいて、ルビが振られた文をコピーすると、ルビもコピーされるため、テキストエディタなどに貼り付けた際に非常に読みにくいものになります。

例えば、
「漢字(かんじ)の文章(ぶんしょう)に読(よ)み仮名(がな)があると嬉(うれ)しい」
をコピー＆ペーストすると
「漢字かんじの文章ぶんしょうに読よみ仮名がながあると嬉うれしい」
のように、ふりがな込みの文がそのまま貼り付けられるため、編集の手間が増えます。

コピーして利用されることが想定されるコンテンツの場合、コピー用にルビのないものを別途用意する、あるいはそこではルビを振らないなど、配慮しましょう。
　例）交通アクセスやお問い合わせのページにある住所など。

まとめ

いかがだったでしょうか。 Webサイトを訪れる人にとって、必ずしも「日本語を読むことが簡単にできる」とは限りません。 <ruby> タグは、ウェブコンテンツの可読性とアクセシビリティを向上させるために非常に重要なHTML要素です。 これを適切に使用し、多様なユーザーにとって情報がアクセスしやすいサイトを目指しましょう。

Web制作・印刷物制作でお困りならティウェブまで

Web・DTPデザイン制作、翻訳、情報配信サービス、顧客管理など、各種お問い合わせはお電話もしくはメールフォームよりお気軽にご相談ください。

mail form

おすすめコンテンツ