サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

【ruby関連要素】Webページでルビ(ふりがな)をふる

【ruby関連要素】Webページでルビ(ふりがな)をふる

この記事にはプロモーションが含まれています。

読むのが難しい地名や人名、専門用語などをWebページに掲載する際、ふりがながないと読めないことも多いですよね。

ふりがなを振る方法で最も簡単なのは、難読漢字の隣に( )を用いてそこにふりがなを記入する方法でしょう。
たとえば、【桧原(ひばる)】…といった具合です。

ですが、( )をつけるとその分だけ文章の文字数が長くなってしまいますし、見た目的にもスマートとはあまり言えません。
そこで活用したいのが、HTMLのruby関連要素です。
詳しくは本章で解説しますがruby関連要素でマークアップすることで、CSSやJavaScriptなど使わずに文字列にルビをふることができます、

というわけで今回は、rubyタグやそれに関連するタグの使い方について解説していきます。

– 目次 –

文字列にルビ(ふりがな)をふる方法

それではruby関連要素の基本的な使い方を確認していきましょう。

  1. まず、ルビをふりたい文字列を<ruby>の開始タグと終了タグでマークアップします。

    <ruby>一石二鳥</ruby>

  2. そしてruby要素の中、文字列の後の位置にルビを<rt>の開始タグと終了タグでマークアップします。

    <ruby>一石二鳥<rt>いっせきにちょう</rt></ruby>

以上です。とても簡単ですね!
コピペ用のコードは以下に用意しておきましたので、必要があればご利用ください。


    <ruby>一石二鳥<rt>いっせきにちょう</rt></ruby>

実際のWebページでの表示のされ方は下のようになります。(目立つように太字かつ赤字にしています)

一石二鳥いっせきにちょう

上記は「一石二鳥=いっせきにちょう」とルビをふった例ですが、「一」と「石」と「二」と「鳥」で分けたい場合もあるかと思います。
何が言いたいかというと、以下のような表記にしたいということです。

いっせきちょう

上記のようにルビを振りたい場合も考え方は同じで、下のように一文字つずマークアップすればOKです。


    <ruby>一<rt>いっ</rt>石<rt>せき</rt>二<rt>に</rt>鳥<rt>ちょう</rt></ruby>

    POINT!
  1. ・ルビを振りたい文字列をrubyタグでマークアップ!
  2. ・ruby要素の中、文字列の後にルビをrtタグでマークアップ!
  3. ・文字ごとにルビを振りたい場合は、一文字ずつrtタグでマークアップしよう!

rbタグやrpタグは必要?

ネットで「HTML ルビ」などと検索すると、この記事の他にも様々な記事がヒットしますが、中には<rb><rp>タグを使って説明しているものもあります。
前章で、rubyとrtタグだけで文字列にルビをふることができると説明しましたが、このrbとかrpも必要なのでしょうか?

結論から言うと、どちらも必要ありません。

どちらもrubyが非対応のブラウザの場合に備えたものですが、2022年5月現在、全ての主要なブラウザでサポートされているので、ほとんど気にする必要はありません。

▼参考(MDN Web Docsサイトによるruby要素対応状況)

https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby

さらに言えば、たとえ非対応の古いブラウザからの閲覧だったとしても、rb/rp要素でマークアップしていないことで致命的な問題が起こるわけでもありません。

どうしても万が一の場合に備えておきたい場合は、rpタグのみ使用して保険をかけておくと良いでしょう。
rbタグは非標準とされているので、rbタグでマークアップする必要性は全くありません。

以下はMDN Web Docsサイトからの引用です。

“<rb>ルビベース要素
非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。
ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。”

https://developer.mozilla.org/ja/docs/Web/HTML/Element/rb

rp要素でマークアップする場合は、以下のように( )まるかっこをrpの開始・終了タグで囲むようにマークアップします。


	<ruby>
		一石二鳥<rp>(</rp><rt>いっせきにちょう</rt><rp>)</rp>
	</ruby>

表示結果はruby対応ブラウザでは特に変わらず、ちゃんとルビが表示されます。
ごく一部の非対応ブラウザでのみ、一石二鳥(いっせきにちょう)というふうに、ルビの部分が( )で囲まれて違和感なく表示されます。

どんな人がどんなブラウザで見ても大丈夫なように設計しておかなければならない市町村や病院などのホームページでは、rp要素で保険をかけておくのも良いと思います。
が、最初に述べたように普通の企業、ブログサイトなどでは必要なしと考えて良いと思います。

    POINT!
  1. ・rbタグやrpタグでマークアップする必要は基本的にない!
  2. ・一応、rpタグにはルビ表示が非対応の場合の保険にはなる!
  3. ・2022年現在、主要なブラウザはルビ表示対応なので、一般的なサイトを作成する場合はあまり気にしなくて良い!

ルビのカスタマイズ

ruby関連要素でマークアップしたルビは、CSSやJavaScriptでカスタマイズすることが可能です。

実用性があるかどうかは別として、カスタマイズ例をご紹介します。

文字色変更もじいろへんこう

チェックでルビを大きく表示 文字拡大もじかくだい

カスタマイズの仕方は他の要素に対する方法と変わらず、rt要素にクラス(id)名をつけてCSSでフォントカラーやサイズの指定を行うだけです。

ルビのフォントサイズはどうしても小さくなってしまうので、例えばマウスオーバーでルビのフォントサイズが大きくなるような仕組みがあればUIの改善につながるかもしれませんね。

ただし、小さな文字が見づらい人に配慮するのであれば、ルビをふるのではなく「文字列(もじれつ)」という表記にした方が良いとは思います。

また、そもそもルビをふらないと読めないであろう漢字は使わず、ひらがなにしてしまうというのも有効な手段と言えるでしょう。

    POINT!
  1. ・ruby関連要素も他の要素と同じようにCSSでカスタマイズすることができる!
  2. ・例えばルビの色や大きさを変えることで、ルビを読みやすくできる(かも)!
  3. ・ルビの読みやすさを重視する場合は、( )の中にふりがなを記載する方が良いことも!

縦書きの場合

WebページはCSSのwriting-modeプロパティの設定を変えることで縦書きにもできます。
では、縦書きのルビはどのようになるのでしょうか?

百聞は一見にしかずということで、実際にどうなるのか表示を見てみましょう。
下のサンプルをご覧ください。

縦書たてが



	<div style="writing-mode: vertical-rl;">
		<ruby>縦書<rt>たてが</rt>き</ruby>
	</div>

…とまあ、普通に違和感なくルビをふってくれるので、縦書き(writing-mode: vertical-rl)だとruby関連要素が使えないとか、表示がおかしくなるといったことはありません。

むしろ、ルビ(ふりがな)は日本語ならではの発明と言えるので、日本語ならではの縦書きの場合にこそ積極的に使いたい機能です。

和食の料理店のサイトや旅館のサイトなど「和」の雰囲気が求められるサイトでは、縦書き&ルビの組み合わせが和の雰囲気とマッチするので、デザインの際に提案してみるのも良いのではないでしょうか。

    POINT!
  1. ・縦書き(writing-mode: vertical-rl)の場合でも問題なくruby関連要素は使用できる!
  2. ・日本語ならではの縦書きと、日本語ならではのルビはむしろ相性抜群!
  3. ・和の雰囲気が求められるようなサイトでは、縦書き+ルビの組み合わせを試してみるのも良いかも!

今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ruby</title>
	<style>
		html {
			font-size: 5vw;
		}
		.ruby_text {
			color: red;
			transition: .4s;
		}
		p:hover .ruby_text {
			font-size: 5vw;
		}
	</style>
</head>

<body>
	<p>
		<ruby>
			橈骨<rt class="ruby_text">とうこつ</rt>
		</ruby>
	</p>
	
	<p style="writing-mode: vertical-rl; font-family: serif;">
		<ruby>縦書<rt>たてが</rt>き</ruby>
	</p>
</body>
</html>


« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン