【初心者必見】HTMLでのルビの基本の振り方解説
「サイト上でルビを振りたいけどやり方がわからない・・」
こう思う方はおおいのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- HTMLでのルビの振り方がわかる
やりたいことはシンプルなのに、やり方が分からず途方に暮れる経験は誰しもあると思います。是非本記事をお読みいただき、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でのルビの振り方を紹介しました。どれも簡単にコーディングできるので、是非本記事をきっかけにユーザにとってわかりやすいサイト作成に挑戦してみてください。
