「サイト上でルビを振りたいけどやり方がわからない・・」

こう思う方はおおいのではないでしょうか。

本記事をお読みいただくと以下が分かります。

やりたいことはシンプルなのに、やり方が分からず途方に暮れる経験は誰しもあると思います。是非本記事をお読みいただき、HTMLでのルビの振り方について理解を深めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

ルビとは

ルビとは、漢字等に付けるふりがなのことです。例えば少し読み方が難しい漢字を使用する場合、ルビをつけておくとユーザにとって親切なサイトにすることができます。

HTMLでのルビの振り方

それでは、早速HTMLでのルビの振り方を紹介していきます。

基本のルビの振り方

まずはコードをご覧ください。

<ruby>
中央公園
<rt>ちゅうおうこうえん</rt>
</ruby>

上記のようにコーディングすると、以下のように「中央公園」に対してルビが振られます。

非常に簡単にルビを振ることができましたね。ルビを振りたい範囲を<ruby>で囲んで、<rt>で読み方を囲うことでルビを振ることができます。

1文字ごとにルビを振るやり方(1)

先ほど紹介したやり方だと「中央公園」全体に均等に「ちゅうおうこうえん」というルビがつきます。ここでは、1文字ごとにルビを振るやり方を紹介します。

<ruby>
中<rt>ちゅう</rt>央<rt>おう</rt>公<rt>こう</rt>園<rt>えん</rt>
</ruby>

こちらも非常に分かりやすいですね。1文字ずつ<rt>で区切って漢字とルビを対応させると1文字ずつルビを振ることができます。

1文字ごとにルビを振るやり方(2)

(1)と表示のされ方は変わりませんが、もう1つやり方を紹介しておきます。

<ruby>
<rb>中</rb><rt>ちゅう</rt>
<rb>央</rb><rt>おう</rt>
<rb>公</rb><rt>こう</rt>
<rb>園</rb><rt>えん</rt>
</ruby>

(1)のやり方だと横に漢字とルビを繋げて書いていましたが、少しコードが見づらいですよね。(2)のやり方だと1文字ずつの対応がわかりやすいので後からコードを見返しやすくなるメリットがあります。(1)は<rt>で繋げましたが、(2)では<rt>に加えて<rb>も使用します。

まとめ

いかがでしたでしょうか。HTMLでのルビの振り方を紹介しました。どれも簡単にコーディングできるので、是非本記事をきっかけにユーザにとってわかりやすいサイト作成に挑戦してみてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP